three.js 模型详解和外部模型详解

admin

原文链接：https://blog.csdn.net/weixin_50207776/article/details/119931486

three.js场景渲染模型，基于项目来说大多数模型都是建模师提供的，three.js建模api有限，无法制作出过于精美和写实的模型，而且代码量过大效率低。


1.three.js建立模型

  内置ipa包括很多形状。



更多几何体api可以参考官方文档（http://www.yanhuangxueyuan.com/Three.js/）

// 立方体模型
var geometry1 = new THREE.BoxGeometry(100, 100, 100);
var material1 = new THREE.MeshLambertMaterial({
  color: 0x0000ff
});
// 球体模型
var geometry2 = new THREE.SphereGeometry(60, 40, 40);
var material2 = new THREE.MeshLambertMaterial({
  color: 0xff00ff
});
// 圆柱模型
var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
var material3 = new THREE.MeshLambertMaterial({
  color: 0xffff00
});

//几何体模型初始化
var mesh1 = new THREE.Mesh(geometry1, material1);
scene.add(mesh1); //模型添加到场景中
var mesh2 = new THREE.Mesh(geometry2, material2);
scene.add(mesh2);
var mesh3 = new THREE.Mesh(geometry3, material3);
mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
scene.add(mesh3); //
模型搭建时需要载体，也就是模型的材质。模型的材质在three.js中也提供有 大量api，此处仅用基础材质。一个模型的组成是模型api+模型材质。初始化模型var mesh1 = new THREE.Mesh(geometry1, material1); //geometry1为模型api，material1为模型材质
scene.add(mesh1); //模型添加到场景

模型材质中可以对模型进行内含元素的设置。在初始化模型材质的时候对其进行设定。
var material3 = new THREE.MeshLambertMaterial({
  color: 0xffff00//模型颜色设置
});

模型可以设置的属性有很多，包括：颜色，贴图，粗糙度，金属度，透明度等等，具体可以参考官方文档。（郭隆邦）（http://www.yanhuangxueyuan.com/t ... s/MeshBasicMaterial）

模型的属性分为公有属性和私有属性，不做过多举例。他们可以设置的属性是很根据你选用的材质决定的。例如PBR材质，可以设置公有属性还可以设置他私有的私用属性。

2.three.js 引入外部模型

  引入外部模型就是建模师制作的精美的模型对象，通过文件形式发送给你，我们利用js和加载器对模型进行渲染。(注意：外部引入的模型一定要使用与之文件格式对应的加载器，而且外部模型的引入一定要搭建服务器，本地是读取不到的。)加载器的api根据文件形式选用，常见的模型文件格式为json，glb，gltf，fbx等。

let loader = new THREE.GLTFLoader();
        loader.load('phone.glb', function (gltf) {
            gltf.scene.traverse(function (child) {
                if (child.isMesh) {
                    child.material.emissive = child.material.color;
                    child.material.emissiveMap = child.material.map;
                }
            });
            meshh = gltf.scene;
            scene.add(meshh);//将模型加入场景
})


模型加入场景时默认位置说场景中心位置。可以通过
var axes = new THREE.AxisHelper(500);
scene.add(axes);在场景中加入辅助的坐标系。

模型在场景中的位置可以用mesh.position进行设定。

对外部模型的必要优化：

renderer = new THREE.WebGLRenderer({//开启渲染器的抗锯齿
            antialias: true,
            logarithmicDepthBuffer: true,
        });
加载器中对模型子集进行遍历，将颜色通道和贴图通道重新设定


gltf.scene.traverse(function (child) {
                if (child.isMesh) {
                    child.material.emissive = child.material.color;
                    child.material.emissiveMap = child.material.map;
                }
            });