教你如何利用threejs对3D模型皮肤进行DIY

一步一步教你如何利用threejs加载gltf模型来实现DIY换肤功能。 ### 模型准备 - ***模型制作*** 模型可以通过网上下载，也可以自己通过c4d、maya、blender等模型制作软件得到。这里就不叙述有关模型制作的问题，本文中会在blender进行模型的有关设置。 - ***模型导出*** 1、导出前设定 为了在页面中方便后续的操作，在导出模型前，将模型的各个部件拆分好进行命名约定（本文以小车模型为例）具体如下图所示： 图1 2、导出模型格式选取 threejs可以加载的模型有很多中，之前.ojb、.json、.FBX等格式都有讲过参我之前的文章[从Maya中把模型搬运至网页的过程](http://www.flowers1225.com/lessons/2018/03/07/1)、[首个threejs-3D项目](https://flowers1225.com/lessons/2016/02/29/1)，所以我这里选取官方推荐现在使用的格式.gltf、.glb。 > gltf与glb的区别： gltf文件类似与json格式而glb是以二进制流进行存储。 3、模型导出 在blender中直接有gltf格式导出的选项，如果没有特别的要求，按照默认配置导出就可以了。导出界面如下图所示： 图2 ### 场景建立 - ***使用threejs建立一个场景*** 首先将需要的东西从threejs (r110) 中引入，然后进行建立场景四部曲： ```javascript import {Scene, WebGLRenderer, PerspectiveCamera, Color} from 'three'; ``` 1、Scene ```javascript let scene = new Scene(); scene.background = new Color(0xB3CEFB); scene.fog = new Fog(scene.background, 1, 100); ``` 2、Camera ```javascript let camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 15; ``` 3、Render ```javascript let renderer = new WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); ``` 4、Animate ```javascript const render = function () { requestAnimationFrame(render); renderer.render(scene, camera); } ``` 然后就会看到一个蓝蓝的场景（因为设置了背景颜色） ### 加载模型 - ***GLTFLoader加载模型至场景*** ```javascript import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; const loader = function () { let gltfLoader = new GLTFLoader(); gltfLoader.load( 'toycar.glb', // your .glb & .gltf gltf => { scene.add(gltf.scene); // 添加至建立好的场景中 // gltf.animations; // Array