一些three.js的基础——加载FBX模型

---

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green

贡献主题：https://github.com/xitu/juejin-markdown-themes

theme: sunhuapeng

highlight:

1、创建一个基础场景 包含场景scene、透视相机PerspectiveCamera、控制器OrbitControls、点光源PointLight、半球光HemisphereLight、渲染器WebGLRenderer，以及今天的主角FBXLoader fbx加载器

场景背景颜色设置为0xf65144

javascript scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x000000, 600, 3000); //雾化场景 scene.background = new THREE.Color(0xf65144);

透视相机位置设置为正对x轴

javascript camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.set(0, 0, 200); //设置相机位置

灯光采用半球光和点光源两种

半球光用来渲染整个场景的颜色，点光源用来渲染模型高光

``` javascript // 设置光照 // 半球光 const hemisphereLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 1 ); // hemisphereLight.position.set(0, 200, 0); scene.add(hemisphereLight); // 点光源 light = new THREE.PointLight(0xffff00, 2, 100); light.position.set(0, 0, 0); scene.add(light);

``` ...

所有基础元素创建完成后，可以在页面看到这样的场景

接下载要使用到fbxloader

文件的引用 <script src="../../../three.js-master\examples\js\loaders\FBXLoader.js"></script>

因为是在html内写的代码，所以路径为当前文件的相对路径，可以根据自己文件位置进行更改

官网内有对于fbx加载器的使用，这里不赘述，主要讲一下材质和贴图

javascript // 模型地址 const url = "../model/fbx/beats耳机/source/beats_highpoly.fbx" const loader = new THREE.FBXLoader() loader.load( url, function (loadedModel) { console.log(loadedModel); mesh = loadedModel.children[0].clone(); scene.add(mesh); } );

在加载的过程中遇到一些小问题，fbx依赖的Inflate.min.js文件找不到

需要在js中引入intflate.min.js

javascript <script src="../../../three.js-master\examples\js\loaders\FBXLoader.js"></script> <script src="../../../three.js-master\examples\js\libs\inflate.min.js"></script>

加载后可以看出来，没有对模型进行材质的修改和贴图，材质本身是黑色的

在上面代码中，我们打印一下loadedModel 是一个组对象group，组对象没有材质，而且并不是咱们最终要加载的模型对象，可以看一下组对象的children中的结果，有一个mesh对象，这是咱们需要渲染的对象，打印一下可以看到material材质对象

模型本身的材质是一个Phong网格材质

那么一会的贴图也会选择这样的材质

首选如果要贴图肯定需要将贴图加载为纹理，这样就要用到 TextureLoader

javascript const textureLoader = new THREE.TextureLoader(); const textureUrl = "../model/fbx/beats耳机/textures/beats_red.png" const textureNormal = textureLoader.load( textureUrl );

原本贴图样式

这张图，是3D工程师导出工程的时候通过某种手段生成的，感兴趣的童鞋可以跟身边的3D工程师了解

至于每个贴图点，每个位置能够对应上模型，也是在3D工程生成时候计算好的，作为前端只是拿来用就可以

接下来对模型进行材质的重新渲染

mesh = loadedModel.children[0].clone(); mesh.material = new THREE.MeshPhongMaterial({ color: 0x00ffff, }) console.log(mesh); scene.add(mesh);

先小试一下

通过已经被改变的颜色不难发现，可以对模型的材质进行修改

接下来需要将我们加载好的纹理贴图和模型结合上，

3D工程师在交给你一项3D工程的时候会有很多贴图，比如发光贴图，凹凸贴图、颜色贴图、环境贴图、等等...

可以通过这里看出来之前默认为null的表示之前并未对它进行材质贴图，也可以通过官网上面的material查看这些贴图具体什么作用

此次我们要对贴图进行重新渲染的是map 颜色贴图

所以将map设置为之前定义的 textureNormal 即可

javascript // 模型地址 const url = "../model/fbx/beats耳机/source/beats_highpoly.fbx"; const loader = new THREE.FBXLoader(); loader.load(url, function (loadedModel) { const textureLoader = new THREE.TextureLoader(); const textureUrl = "../model/fbx/beats耳机/textures/beats_red.png" const textureNormal = textureLoader.load( textureUrl ); mesh = loadedModel.children[0].clone(); mesh.material.map = textureNormal console.log(loadedModel.children[0]); scene.add(mesh) });

接下来我们就可以通过一些微调改变一下模型材质的展示

mesh.material中有一个属性shininess 控制高光显示程度，可以对它进行控制，修改高光具体显示程度

首先要调整的是灯光，我们之前对灯光只是设置上了，并没有调整打光的位置

``` // 设置光照 // 半球光 const hemisphereLight = new THREE.HemisphereLight( 0xffaea8, // 天空发出颜色 0x7f0900, // 地面发出颜色 1 // 光照强度 ); hemisphereLight.position.set(0, 50, 60); scene.add(hemisphereLight);

// 聚光灯 const spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(100, 60, 100); scene.add(spotLight);

const spotLightHelper = new THREE.SpotLightHelper(spotLight); scene.add(spotLightHelper); ```

在渲染动画中，将点光源进行一个位置的转换，这样就可以调整出不同位置的高光

function animate() { requestAnimationFrame(animate); const time = Date.now() * 0.0005; if (light) { light.position.x = Math.sin(time * 0.7) * 50; // light.position.y = Math.cos(time * 0.3) * 50; light.position.z = Math.sin(time * 0.5) * 50; } renderer.render(scene, camera); }

最终调整的效果如下：

代码地址

html

模型

贴图