73 Three.js 导入PLY格式的模型

2018-03-22 00:02:35 人阅读

案例查看有问题？
全屏试试！

案例解析

 

简介

PLY格式的全称是多边形（Polygon）文件格式，通常用来保存三维扫描仪的信息。这种格式只保存几何体数据，没有纹理颜色。

实现案例

案例查看地址：

  • 首先，引入script加载器
<script src="/lib/js/loaders/PLYLoader.js"></script>
  • 1
  • 然后，实例化加载器对象，然后加载模型，PLY模型里面只保存了几何体，所以我们实例化了一个纹理，添加到场景当中。
        var loader = new THREE.PLYLoader();         loader.load("/lib/models/ply/binary/Lucy100k.ply", function (geometry) {              //更新顶点的法向量             geometry.computeVertexNormals();              //创建纹理，并将模型添加到场景道中             var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );             var mesh = new THREE.Mesh( geometry, material );             mesh.rotation.y = Math.PI;             mesh.scale.set(0.05, 0.05, 0.05);             scene.add( mesh );         });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  •  

案例源代码


                        
 <!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>Title</title>


    <style type="text/css">


        html, body {


            margin: 0;


            height: 100%;


        }


 


        canvas {


            display: block;


        }


 


    </style>


</head>


<body onload="draw();">


 


</body>


<script src="/lib/three.js"></script>


<script src="/lib/js/loaders/PLYLoader.js"></script>


<script src="/lib/js/controls/OrbitControls.js"></script>


<script src="/lib/js/libs/stats.min.js"></script>


<script src="/lib/js/libs/dat.gui.min.js"></script>


 


<script>


    var renderer;


    function initRender() {


        renderer = new THREE.WebGLRenderer({antialias:true});


        renderer.setSize(window.innerWidth, window.innerHeight);


        //告诉渲染器需要阴影效果


        renderer.setClearColor(0xffffff);


        document.body.appendChild(renderer.domElement);


    }


 


    var camera;


    function initCamera() {


        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);


        camera.position.set(0, 40, 50);


        camera.lookAt(new THREE.Vector3(0,0,0));


    }


 


    var scene;


    function initScene() {


        scene = new THREE.Scene();


    }


 


    //初始化dat.GUI简化试验流程


    var gui;


    function initGui() {


        //声明一个保存需求修改的相关数据的对象


        gui = {


        };


        var datGui = new dat.GUI();


        //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）


    }


 


    var light;


    function initLight() {


        scene.add(new THREE.AmbientLight(0x444444));


 


        light = new THREE.PointLight(0xffffff);


        light.position.set(0,50,50);


 


        //告诉平行光需要开启阴影投射


        light.castShadow = true;


 


        scene.add(light);


    }


 


    function initModel() {


 


        //辅助工具


        var helper = new THREE.AxesHelper(50);


        scene.add(helper);


 


        var loader = new THREE.PLYLoader();


        loader.load("/lib/models/ply/binary/Lucy100k.ply", function (geometry) {


 


            //更新顶点的法向量


            geometry.computeVertexNormals();


 


            //创建纹理，并将模型添加到场景道中


            var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );


            var mesh = new THREE.Mesh( geometry, material );


            mesh.rotation.y = Math.PI;


            mesh.scale.set(0.05, 0.05, 0.05);


            scene.add( mesh );


        });


    }


 


    //初始化性能插件


    var stats;


    function initStats() {


        stats = new Stats();


        document.body.appendChild(stats.dom);


    }


 


    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放


    var controls;


    function initControls() {


 


        controls = new THREE.OrbitControls( camera, renderer.domElement );


 


        // 如果使用animate方法时，将此函数删除


        //controls.addEventListener( 'change', render );


        // 使动画循环使用时阻尼或自转 意思是否有惯性


        controls.enableDamping = true;


        //动态阻尼系数 就是鼠标拖拽旋转灵敏度


        //controls.dampingFactor = 0.25;


        //是否可以缩放


        controls.enableZoom = true;


        //是否自动旋转


        controls.autoRotate = true;


        controls.autoRotateSpeed = 0.5;


        //设置相机距离原点的最远距离


        controls.minDistance  = 1;


        //设置相机距离原点的最远距离


        controls.maxDistance  = 200;


        //是否开启右键拖拽


        controls.enablePan = true;


    }


 


    function render() {


 


        renderer.render( scene, camera );


    }


 


    //窗口变动触发的函数


    function onWindowResize() {


 


        camera.aspect = window.innerWidth / window.innerHeight;


        camera.updateProjectionMatrix();


        render();


        renderer.setSize( window.innerWidth, window.innerHeight );


 


    }


 


    function animate() {


        //更新控制器


        render();


 


        //更新性能插件


        stats.update();


 


        controls.update();


 


        requestAnimationFrame(animate);


    }


 


    function draw() {


        initGui();


        initRender();


        initScene();


        initCamera();


        initLight();


        initModel();


        initControls();


        initStats();


 


        animate();


        window.onresize = onWindowResize;


    }


</script>


</html>
展开内容

CSDN的网页地址

http://blog.csdn.net/qq_30100043/article/details/79645502
上一篇 72 Three.js 导入VTK格式的模型
下一篇 74 Three.js 导入AWD格式的模型

联系我们

一个人的力量不如两个人的，两个人的力量不如一群人的。欢迎加入大家庭一起共同学习，共同进步。

查看更多