如何在three.js中覆盖GLTF材料 [英] How to override GLTF materials in three.js

问题描述

我正在尝试创建一种动态方式来在 Three.js 中的 gltf 导入模型上显示太阳能数据.目的是将不同的纯色与模型的不同部分相关联，并能够关闭和打开它们.我目前的障碍是在 gltf 中更改材质的颜色.

I am trying to create a dynamic way to display solar data on a gltf imported model in three.js. The aim would be to associate different solid colours to different segments of the model and be able to switch these off and on. My current hurdle is changing the colour of the material in gltf.

我尝试使用 ObjLoader 来代替我输入自己的材料，但这不起作用:/

I have tried using an ObjLoader instead so that I can input my own material, but this didn't work :/

这是我目前拥有的js:

Here is the js I have currently:

        const gltfLoader = new THREE.GLTFLoader();
        gltfLoader.load('Building.glb', (gltf) => {
            const root = gltf.scene;
            scene.add(root);

            const box = new THREE.Box3().setFromObject(root);
            const boxSize = box.getSize(new THREE.Vector3()).length();
            const boxCenter = box.getCenter(new THREE.Vector3());

            frameArea(boxSize * 0.5, boxSize, boxCenter, camera);

            controls.maxDistance = boxSize * 10;
            controls.target.copy(boxCenter);
            controls.update();
          });


    function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
        const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
        const halfFovY = THREE.Math.degToRad(camera.fov * .5);
        const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
        const direction = (new THREE.Vector3())
        .subVectors(camera.position, boxCenter)
        .multiply(new THREE.Vector3(1, 0, 1))
        .normalize();

        camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));

        camera.near = boxSize / 100;
        camera.far = boxSize * 100;

        camera.updateProjectionMatrix();

        // point the camera to look at the center of the box
        camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
    }

    renderer = new THREE.WebGLRenderer({canvas: myCanvas, antialias: true});
    renderer.setClearColor(0x000000);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild( renderer.domElement );



    function resizeRendererToDisplaySize(renderer) {
        const canvas = renderer.domElement;
        const width = canvas.clientWidth;
        const height = canvas.clientHeight;
        const needResize = canvas.width !== width || canvas.height !== height;
        if (needResize) {
          renderer.setSize(width, height, false);
      }
      return needResize;
    }

    function render() {
        if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement;
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
             camera.updateProjectionMatrix();
            }
            renderer.render(scene, camera);
            requestAnimationFrame(render);
         }
         requestAnimationFrame(render);

推荐答案

加载器返回的 gltf.scene 结果是一个 THREE.Scene 实例——一旦你有了它，用什么文件格式来加载模型.在这种情况下，您需要遍历该场景并更改其中任何网格的材质.MeshStandardMaterial 和 Mesh 文档可能会有所帮助.

The gltf.scene result returned by the loader is a THREE.Scene instance – once you have it, it doesn't matter much what file format was used to load the model. In this case, you'll want to traverse that scene and change the materials of any meshes within it. The MeshStandardMaterial and Mesh documentation may be helpful.

var model = gltf.scene;
var newMaterial = new THREE.MeshStandardMaterial({color: 0xff0000});
model.traverse((o) => {
  if (o.isMesh) o.material = newMaterial;
});

如果您需要更改纹理，请注意GLTFLoader 文档.

If you need to change the textures, note the instructions in the GLTFLoader documentation.

这篇关于如何在three.js中覆盖GLTF材料的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！