javascript 在three.js中更改立方体的颜色

bvpmtnay 于 2023-11-15 发布在 Java

关注(0)|答案(4)|浏览(170)

我正在尝试根据变量改变立方体的颜色。我创建了两个立方体，我想根据它们之间的距离改变它们的颜色。
立方体是这样创建的：

geometry = new THREE.CubeGeometry( 50, 50, 50 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );

字符串
现在我试着这样做：

if(distance > 20)
{
cube.material.color = 0xffffff;
}

型
但是它不起作用。我看了例子，但是找不到任何合适的东西。

JavaScript

来源：https://stackoverflow.com/questions/14181631/changing-color-of-cube-in-three-js

4条答案

按热度按时间

u3r8eeie1#

您没有正确指定颜色值。

cube.material.color.setHex( 0xffffff );

字符串

赞(0）回复(0）举报 2023-11-15

xtupzzrd2#

cube.material.color

字符串
会给你给予THREE.Color对象：
颜色
它有很多方法可以用来设置颜色。

赞(0）回复(0）举报 2023-11-15

yx2lnoni3#

我的建议是给你的对象附加一个函数，这样你就可以在运行时轻松地改变对象的颜色。
根据你的代码

geometry = new THREE.CubeGeometry( 50, 50, 50 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
cube = new THREE.Mesh( geometry, material );

//here is the funcion defined and attached to the  object
cube.setColor = function(color){
     cube.material.color.set(color);
}

cube.setColor(0xFFFFFF)  //change color using hex value or
cube.setColor("blue")    //set material color by using color name

scene.add( cube );

字符串

赞(0）回复(0）举报 2023-11-15

j2cgzkjk4#

在材料部分，您可以提供一个十六进制的颜色值，如meshMaterial = new THREE.MeshBasicMaterial({color:0xfffff})在下面的代码中，十六进制值（0xffffff）是白色

赞(0）回复(0）举报 2023-11-15