无法从threejs中的gltf加载场景中获取材料

Question

我想修改加载 gltf 的 model 中的材料以设置其不透明度/透明度。

我似乎无法得到任何网格。 我创建了这个小提琴，上面写着“没有找到网格”。 我发现了很多获取材料的例子，他们似乎都是这样做的（确保它是网格然后获取材料）。

<style>
  canvas {
    display: block;
    width: 98%;
    height: 98%;
  }

</style>

<canvas id="canvasid"></canvas>

<script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/controls/OrbitControls.js"></script>-->

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
  {
          "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.143/build/three.module.js"
          }
        }
    </script>

<script type="module">
  import * as THREE from 'three';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.143/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.143/examples/jsm/controls/OrbitControls.js';

var scene = new THREE.Scene();
scene.background = new THREE.Color(0x6699cc);
const lights = [];
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 100, 0);
lights[1].position.set(100, 100, 100);
lights[2].position.set(- 100, - 100, - 100);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);

const loader = new GLTFLoader();

loader.load("https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf", function (gltf) {
    const mesh = gltf.scene.children[0];
    scene.add(mesh);

    //my main question is about this code - looks like everyone can test if isMesh, then can get the material.  I have tried multiple models and can never find any mesh.  If I just assumme a material that doesn't work either
    gltf.scene.traverse((o) => {
        if (o.isMesh) {
            console.log("found mesh");
            console.log(o && o.material);
        } else {
            console.log("no mesh found");
        }
    });
}, undefined, function (error) {
    console.error(error);
});

var canvas = document.getElementById("canvasid");
var renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
});
renderer.setSize(canvas.parentElement.clientWidth, canvas.parentElement.clientHeight);
var camera = new THREE.PerspectiveCamera(1, canvas.parentElement.clientWidth / canvas.parentElement.clientHeight, 1, 1000);
camera.position.z = 100;

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
controls.autoRotate = true;
controls.enableDamping = true;
var animate = function () {
    requestAnimationFrame(animate);
    controls.update();

    renderer.render(scene, camera);
};

window.addEventListener('resize', function () {
    renderer.setSize(canvas.parentElement.clientWidth, canvas.parentElement.clientHeight);

    camera.aspect = canvas.parentElement.clientWidth / canvas.parentElement.clientHeight;
    camera.updateProjectionMatrix();
}, false);

animate();

如何访问网格/材料？

Answer 1

遍历不起作用，因为您将gltf.scene的第一个孩子添加到scene 。 这意味着您更改 object 层次结构，从而中断遍历。

要解决此问题，只需在调用Object3D.traverse()之后移动以下两行代码。

const mesh = gltf.scene.children[0];
scene.add(mesh);

另外，考虑这样做，因为 glTF 资产不一定只有一个子网格：

scene.add(gltf.scene);

更新小提琴： https://jsfiddle.net/ftcnby9e/