three.js加載obj模型

本文轉載自查看原文 2016-11-22 13:25 17311 three.js

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="libs/three.js"></script>
        <script type="text/javascript" src="libs/OBJLoader.js"></script>
        
        <script type="text/javascript">
            var scene = null;
            var camera = null;
            var renderer = null;
            
            var mesh = null;
            var id = null;
            
            function init() {
                renderer = new THREE.WebGLRenderer({//渲染器
                    canvas: document.getElementById('mainCanvas')//畫布
                });
                renderer.setClearColor(0x000000);//畫布顏色
                scene = new THREE.Scene();//創建場景
                
                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);//正交投影照相機
                camera.position.set(15, 25, 25);//相機位置
                camera.lookAt(new THREE.Vector3(0, 2, 0));//lookAt()設置相機所看的位置
                scene.add(camera);//把相機添加到場景中
                
                var loader = new THREE.OBJLoader();//在init函數中，創建loader變量，用於導入模型
                loader.load('libs/port.obj', function(obj) {//第一個表示模型路徑，第二個表示完成導入后的回調函數，一般我們需要在這個回調函數中將導入的模型添加到場景中
                    obj.traverse(function(child) {
                        if (child instanceof THREE.Mesh) {
                            child.material.side = THREE.DoubleSide;
                        }
                    });
                
                    mesh = obj;//儲存到全局變量中
                    scene.add(obj);//將導入的模型添加到場景中
                });
                
                var light = new THREE.DirectionalLight(0xffffff);//光源顏色
                light.position.set(20, 10, 5);//光源位置
                scene.add(light);//光源添加到場景中
                
                id = setInterval(draw, 20);//每隔20s重繪一次
            }
            
            function draw() {//們在重繪函數中讓茶壺旋轉：
                renderer.render(scene, camera);//調用WebGLRenderer的render函數刷新場景
                
                mesh.rotation.y += 0.01;//添加動畫
                if (mesh.rotation.y > Math.PI * 2) {
                    mesh.rotation.y -= Math.PI * 2;
                }
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="800px" height="600px" ></canvas>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 three.js 加載 obj模型 Three.js外部模型加載 THREE.JS + Blender（obj、mtl加載代碼）如何使用Three.js加載obj和mtl文件 three.js循環加載模型bug Three.js加載gltf模型 three.js加載3D模型zip文件 vue中加載three.js的gltf模型（three.js）調用3D模型（obj+mtl格式） Three.js中的group,obj,模型中layers層級與相機