加载外部OBJ模型-03

最新推荐文章于 2025-06-14 16:41:05 发布

原创最新推荐文章于 2025-06-14 16:41:05 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

three.js 专栏收录该内容

4 篇文章

订阅专栏

1.外部模型加载介绍

通过其他的建模工具导出three.js支持的格式，这样就可以将模型从外部加载到3维场景中。

2.找到模型加载库的位置

three.js-master\three.js-master\examples\js\loaders

3.本文使用的加载器是OBJLoader

／／引入外部模型　桌子模型

　/加载obj模型代码
　var loader=new THREE.OBJLoader();
　loader.load("../desk/Desk.obj",function(deskScene){
    scene.add(deskScene);
　});

　//由于加载外部模型的方法load 是异步的所以第一次加载页面时候  桌子没有出来
　//解决办法  加入动画处理
　function animate() {
    requestAnimationFrame(animate);//每一帧都执行这个动画
    render();
　}
　animate();
４.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs--demo001</title>
    <script src="../js/three.js"></script>
    <script src="../js/OrbitControls.js"></script>
    <script src="../js/OBJLoader.js"></script>
</head>
<body>
    <script>
        //第一步创建场景元素
        var scene=new THREE.Scene();

        //第二步创建一个网格模型对象  网格对象方法function Mesh( geometry, material )
        //需要两个参数geometry几何模型  material材质
        var geometry=new THREE.BoxGeometry(100,100,100);//立方体模型
        var material=new THREE.MeshLambertMaterial({color:0xff0000});
        var mesh=new THREE.Mesh(geometry,material);
        scene.add(mesh);//添加网格到场景中

        //加载obj模型代码
        var loader=new THREE.OBJLoader();
        loader.load("../desk/Desk.obj",function(deskScene){
            scene.add(deskScene);
        });

        //添加灯光  点光源
        var light=new THREE.PointLight(0xff0000);
        light.position.set(300,400,200);//光源的位置
        scene.add(light);//将光源加入到场景中

        scene.add(new THREE.AmbientLight(0x333333));//添加环境光  让背景 亮一点

        //添加相机  透视相机
        var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);
        camera.position.set(200,200,200);//相机的位置
        camera.lookAt(scene.position);//相机朝向的位置

        //添加渲染器
        var renderer=new THREE.WebGLRenderer();
        renderer.setSize(800,600);
        //将渲染器加到文档中
        document.body.appendChild(renderer.domElement);

        function render() {
            renderer.render(scene,camera);
        }
        render();//刚加载页面的时候就渲染一次  要不刚进入页面背景会是黑色的
        //将相机加入到相机控制
        var controls=new THREE.OrbitControls(camera);//不传参数默认是整个文档
        //添加事件监听
        controls.addEventListener("change",render);  //当事件改变 触发render方法 渲染界面

        //由于加载外部模型的方法load 是异步的所以第一次加载页面时候  桌子没有出来
        //解决办法  加入动画处理
        function animate() {
            requestAnimationFrame(animate);//每一帧都执行这个动画
            render();
        }
        animate();
    </script>
</body>
</html>

５.加载带材质的模型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs--demo001</title>
    <script src="../js/three.js"></script>
    <script src="../js/OrbitControls.js"></script>
    <script src="../js/OBJLoader.js"></script>
</head>
<body>
    <script>
        //第一步创建场景元素
        var scene=new THREE.Scene();

        //第二步创建一个网格模型对象  网格对象方法function Mesh( geometry, material )
        //需要两个参数geometry几何模型  material材质
        var geometry=new THREE.BoxGeometry(100,100,100);//立方体模型
        var material=new THREE.MeshLambertMaterial({color:0xff0000});
        var mesh=new THREE.Mesh(geometry,material);
        scene.add(mesh);//添加网格到场景中

        //加载obj模型代码
        var loader=new THREE.OBJLoader();
        loader.load("../desk/Desk.obj",function(deskScene){
//            deskScene.scale.set(0.1,0.1,0.1);//缩小10倍
            deskScene.position.y=-90;
            scene.add(deskScene);
        });

        var Desk_D = new THREE.TextureLoader().load('../desk/Desk_DeskBody_Diffuse.png');
        var Desk_S = new THREE.TextureLoader().load('../desk/Desk_DeskBody_Glossiness.png');
        var Desk_N = new THREE.TextureLoader().load('../desk/Desk_DeskBody_Normal.png');
        var mat_Desk = new THREE.MeshPhongMaterial({
            map: Desk_D,
            specularMap: Desk_S,
            normalMap: Desk_N,
        });
        loader.load( '../desk/Desk.obj', function(object) {
            object.traverse( function ( child ) {
                if ( child instanceof THREE.Mesh ) {
                    child.material = mat_Desk;
                }
            });
            object.scale.set(2.2, 2, 2);
            object.position.set( 0, -76.5,0);
            object.rotation.y = Math.PI / 2;
            scene.add(object);
        });

        //添加灯光  点光源
        var light=new THREE.PointLight(0xff0000);
        light.position.set(300,400,200);//光源的位置
        scene.add(light);//将光源加入到场景中

        scene.add(new THREE.AmbientLight(0x333333));//添加环境光  让背景 亮一点

        //添加相机  透视相机
        var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);
        camera.position.set(200,200,200);//相机的位置
        camera.lookAt(scene.position);//相机朝向的位置

        //添加渲染器
        var renderer=new THREE.WebGLRenderer();
        renderer.setSize(800,600);
        //将渲染器加到文档中
        document.body.appendChild(renderer.domElement);

        function render() {
            renderer.render(scene,camera);
        }
        render();//刚加载页面的时候就渲染一次  要不刚进入页面背景会是黑色的
        //将相机加入到相机控制
        var controls=new THREE.OrbitControls(camera);//不传参数默认是整个文档
        //添加事件监听
        controls.addEventListener("change",render);  //当事件改变 触发render方法 渲染界面

        //由于加载外部模型的方法load 是异步的所以第一次加载页面时候  桌子没有出来
        //解决办法  加入动画处理
        function animate() {
            requestAnimationFrame(animate);//每一帧都执行这个动画
            render();
        }
        animate();
    </script>
</body>
</html>