Question

我想更改场景中显示的对象的某些部分的颜色。但是，我无法做到。我尝试了下面的代码：

        var loader = new THREE.OBJMTLLoader();
        loader.load('LFPL_IDRun01a_body.obj', 'LFPL_IDRun01a_body.mtl', function(object){
            object.position.set( 0, -90, 0 );
            object.rotation.x = -Math.PI / 2;

            object.traverse(function(child){
                if(child instanceof THREE.Mesh){
                    child.material.color.setRGB(25,0,0);
                }
            });

            scene.add(object);
        }, onProgress, onError );

然而，物体变成红色。如何在不丢失纹理的情况下更改对象的颜色？此外，我只想要一些部分着色。我有另一个带有红色部分的文件，用于定义应该应用颜色的区域。我怎么能这样做？

编辑：

这是整个代码

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="DDSLoader.js"></script>
<script src="MTLLoader.js"></script>
<script src="OBJMTLLoader.js"></script>
<script src="Detector.js"></script>
<script type="text/javascript">
    window.onload = function() {
        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;
        var PIXELRATIO = window.devicePixelRatio;

        var VIEW_ANGLE = 45;
        var ASPECT = WIDTH / HEIGHT;
        var NEAR = 1;
        var FAR = 2000;

        var mouseX = 0, mouseY = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        var container = document.getElementById('container');

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
        camera.position.set( 0, 0, 200 );
        scene.add(camera);

        var ambient = new THREE.AmbientLight( 0x444444 );
        scene.add(ambient);

        var directionalLight = new THREE.DirectionalLight( 0xffeedd );
        directionalLight.position.set(0,0,1).normalize();
        scene.add(directionalLight);

        var onProgress = function(xhr){
            if(xhr.lengthComputable){
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log(Math.round(percentComplete, 2) + '% downloaded');
            }
        };

        var onError = function(xhr){};

        THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());

        var loader = new THREE.OBJMTLLoader();
        loader.load('LFPL_IDRun01a_body.obj', 'LFPL_IDRun01a_body.mtl', function(object){
            object.position.set( 0, -90, 0 );
            object.rotation.x = -Math.PI / 2;

            object.traverse(function(child){
                if(child instanceof THREE.Mesh){
                    child.material.color.setRGB(25,0,0);
                }
            });

            scene.add(object);
        }, onProgress, onError );

        var renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setPixelRatio(PIXELRATIO);
        renderer.setSize(WIDTH, HEIGHT);
        container.appendChild(renderer.domElement);

        camera.lookAt(scene.position);

        animate();

        function animate(){
            requestAnimationFrame(animate);
            render();
        }

        function render(){
            renderer.render(scene, camera);
        }
    };
</script>

Answer 1

将traverse参数更改为：

object.traverse(function(child){
    if ((child instanceof THREE.Mesh)&&(part_needs_recoloring(child))) {
        child.material.color.setRGB(25,0,0);
    }
});

我留给你的part_needs_recoloring(child)（返回一个布尔值）的具体测试条件。

在three.js

1 个答案: