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