Three.js入门学习笔记04：外部模型导入-无材质obj模型

最新推荐文章于 2024-06-23 16:35:00 发布

月亮实验室

最新推荐文章于 2024-06-23 16:35:00 发布

阅读量1.7k

点赞数 3

分类专栏： Three.js 文章标签： webgl javascript 前端

本文链接：https://blog.csdn.net/jbwhysy/article/details/104655047

版权

Three.js 专栏收录该内容

21 篇文章 8 订阅

订阅专栏

参考学习：
Three.js入门指南
https://www.ituring.com.cn/book/miniarticle/53810

外部模型导入支持格式

外部文件导入辅助函数下载地址
https://github.com/mrdoob/three.js/tree/master/examples/js/loaders

*.obj是最常用的模型格式，导入*.obj文件需要OBJLoader.js；导入带*.mtl材质的*.obj文件需要MTLLoader.js以及OBJMTLLoader.js。另有PLYLoader.js、STLLoader.js等分别对应不同格式的加载器，可以根据模型格式自行选择。

目前支持格式：

*.obj
*.obj, *.mtl
*.dae
*.ctm
*.ply
*.stl
*.wrl
*.vtk

无材质的模型

3ds max导出obj文件在页面里效果：
在这里插入图片描述
C4D导出obj文件在页面里效果：

在这里插入图片描述

下载OBJLoader.js并在HTML的<head>中使用：

<script type="text/javascript" src="OBJLoader.js"></script>

1.用3ds max建立茶壶模型，放在原点处，半径3，这一单位与three.js场景中单位是一致的。
在这里插入图片描述
2.导出成port.obj
选择Export materials，会生成一个同名的*.mtl文件。
不选，就是不导出材质

3.结构和路径
结构
在这里插入图片描述

对应路径

我的版本，简略代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d_camera</title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
</head>

<body>
<script type="text/javascript">
    
    //renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(800, 600);
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
    //scene
        var scene = new THREE.Scene();
    
    //camera
        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));
                scene.add(camera);
   //model
        var loader = new THREE.OBJLoader();
                loader.load('model/cubenew2.obj', function(obj) {
                mesh = obj; //储存到全局变量中
                scene.add(obj);
            });
    
    //light 
        var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);
                                
        id = setInterval(draw, 20);
            function draw() {
                renderer.render(scene, camera);
                mesh.rotation.y += 0.01;
                if (mesh.rotation.y > Math.PI * 2) {
                    mesh.rotation.y -= Math.PI * 2;
                }
                
            }
  
</script>
</body>
</html>

如果想要静止不动的可以把动画部分写成

     function draw() {
                renderer.render(scene, camera);   
            }

我尝试了3ds max导出obj的茶壶，和C4D导出立方体都可以加载，导出有无材质的都可以，只要把obj的文件加载进来就行。
在软件里调整大小和世界坐标对加载在网页里的大小和位置也有影响。
以上模型3ds max茶壶单位长度是3，C4D导出的是1cm左右。世界坐标均为（0，0，0）

问题待解决：
1.为什么要加一个draw函数，去掉了就看不到模型？
2.导出一个大一些obj模型就加载不出来，只有黑色的渲染区域，不知是模型问题还是代码问题

教程代码

https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter7/7.2.1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
</head>

<body>
<script type="text/javascript">
            var scene = null;
            var camera = null;
            var renderer = null;
            
            var mesh = null;
            var id = null;
            
          
                var renderer = new THREE.WebGLRenderer();
        renderer.setSize(800, 600);
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
            
                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));
                scene.add(camera);
                
                var loader = new THREE.OBJLoader();
                loader.load('model/port2.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);
            
            
            function draw() {
                renderer.render(scene, camera);
                
                mesh.rotation.y += 0.01;
                if (mesh.rotation.y > Math.PI * 2) {
                    mesh.rotation.y -= Math.PI * 2;
                }
                
            }
           
        </script>
</body>
</html>

月亮实验室

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Three.js入门学习笔记04：外部模型导入-无材质obj模型

参考学习：Three.js入门指南https://www.ituring.com.cn/book/miniarticle/53810外部模型导入支持格式外部文件导入辅助函数下载地址https://github.com/mrdoob/three.js/tree/master/examples/js/loaders*.obj是最常用的模型格式，导入*.obj文件需要OBJLoader.js...
复制链接

扫一扫

专栏目录