我爱模板网在使用THREE.JS的GLTFLoader加载模型时，加载出来的是黑色的。首先，我用windows自带的3D工具打开是下面的效果：
然后，我设置的光线如下：
1 | const directionLight = new THREE.DirectionalLight(0xffffff, .6) |
2 | directionLight.position.set(400, 200, 200) |
3 | scene.add(directionLight) |
4 | const ambientLight = new THREE.AmbientLight(0xffffff, 1) |
加载的glb代码如下：
1 | const loader2 = new GLTFLoader() |
2 | loader2.load('/img/tree_small.glb', (glb) => { |
3 | glb.scene.scale.set(1000, 1000, 1000) |
但是最终结果却是下图：
经过一番摸索，发现，对加载的模型的材质和颜色重新赋值即可：
01 | const loader2 = new GLTFLoader() |
02 | loader2.load('/img/tree_small.glb', (glb) => { |
04 | glb.scene.traverse(item => { |
05 | if(item.type === 'Mesh'){ |
06 | item.material = new THREE.MeshPhongMaterial({ |
07 | map: item.material.map, |
08 | color: item.material.color |
12 | glb.scene.scale.set(1000, 1000, 1000) |
最终效果如下：
