Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/google-sheets/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
在three.js中更改部分对象颜色_Three.js - Fatal编程技术网

在three.js中更改部分对象颜色

在three.js中更改部分对象颜色,three.js,Three.js,我想更改场景中显示的对象的某些部分的颜色。然而,我无法做到这一点。我尝试了下面的代码: var loader = new THREE.OBJMTLLoader(); loader.load('LFPL_IDRun01a_body.obj', 'LFPL_IDRun01a_body.mtl', function(object){ object.position.set( 0, -90, 0 ); object.rota

我想更改场景中显示的对象的某些部分的颜色。然而,我无法做到这一点。我尝试了下面的代码:

        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>

window.onload=函数(){
变量宽度=window.innerWidth;
var HEIGHT=window.innerHeight;
var PIXELRATIO=window.devicePixelRatio;
var视图_角度=45;
var ASPECT=宽度/高度;
var近=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摄像机=新的三个透视摄像机(视角、方向、近距离、远距离);
摄像机位置设置(0,0,200);
场景。添加(摄影机);
var环境光=新的三个环境光(0x4444);
场景。添加(环境光);
var方向灯=新的三个方向灯(0xffeedd);
directionalLight.position.set(0,0,1).normalize();
场景。添加(方向光);
var onProgress=函数(xhr){
if(xhr.长度可计算){
var percentComplete=xhr.loaded/xhr.total*100;
log(Math.round(完成百分比,2)+'%download');
}
};
var onError=函数(xhr){};
添加(/\.dds$/i,新的三个.DDSLoader());
var loader=new THREE.OBJMTLLoader();
loader.load('LFPL\u IDRun01a\u body.obj','LFPL\u IDRun01a\u body.mtl',函数(对象){
对象位置集(0,-90,0);
object.rotation.x=-Math.PI/2;
遍历(函数(子对象){
if(三个.Mesh的子实例){
儿童。材料。颜色。setRGB(25,0,0);
}
});
场景。添加(对象);
},onProgress,onError);
var renderer=new THREE.WebGLRenderer({antialas:true});
渲染器.setPixelRatio(PIXELRATIO);
设置大小(宽度、高度);
container.appendChild(renderer.domeElement);
摄像机。注视(场景。位置);
制作动画();
函数animate(){
请求动画帧(动画);
render();
}
函数render(){
渲染器。渲染(场景、摄影机);
}
};

遍历
参数更改为如下内容:

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

part\u needs\u recoloring(child)
(返回布尔值)的特定测试条件留给您。

您发布的代码将对象的所有子对象更改为红色。所以你需要另一个检查,显然你需要从你的另一个文件中获取,但你没有提供任何信息。我已经编辑了我的帖子。我把所有的密码都写上了。不知道它是否有用。现在你告诉我“调试我的代码”。你最初的问题不够具体,无法回答。