关于Three.js导入glb模型为黑色时应该进行的操作

2,899 阅读1分钟

哈喽哈,我是小王子今天介绍下我导入了GLB模型进three.js时遇到的问题,我导入进去,模型是黑色的,没有材质显示,只要大家按照我下面代码去导入,就会生成完美的图形了。。。

const loader = new GLTFLoader();

loader.load("http://localhost:8080/ROBOT.glb", function (gltf) {
    // Add the loaded object to the scene
    console.log(gltf);
    scene.add(gltf.scene);
    gltf.scene.traverse(function (child) {
        if (child.isMesh) {
            child.material = new THREE.MeshStandardMaterial({
                emissive: child.material.color,
                emissiveMap: child.material.map,
                    });
                 }
	});
        gltf.scene.scale.set(20, 20, 20);
        gltf.scene.position.set(500, 0, 500);
});

提示这里导入在线包的内容

	<script
		async
		src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"
	></script>
	<script type="importmap">
		{
			"imports": {
				"three": "https://unpkg.com/three@0.150.1/build/three.module.js",
				"three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
			}
		}
	</script>


<script type="module">
	import * as THREE from "three";
	import { OrbitControls } from "three/addons/controls/OrbitControls";
	import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
	import { DRACOLoader } from "three/addons/loaders/DRACOLoader";
    </script>