更改使用Three.js创建的3D立方体的颜色

Question

救命！ 如何从Three.js示例中的默认值更改3D立方体的颜色？

这是我到目前为止 -

HTML

<div id="container"></div>

JS

// revolutions per second
var angularSpeed = 0.2;
var lastTime = 0;

// this function is executed on each animation frame
function animate() {
  // update
  var time = (new Date()).getTime();
  var timeDiff = time - lastTime;
  var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
  cube.y += angleChange;
  lastTime = time;

  // render
  renderer.render(scene, camera);

  // request new frame
  requestAnimationFrame(function () {
    animate();
  });
}

// renderer
var container = document.getElementById("container");
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);

// camera
var camera = new THREE.PerspectiveCamera(45, 
                 window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 700;

// scene
var scene = new THREE.Scene();

// cube Length, Height, Width
var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 100, 200), 
      new THREE.MeshBasicMaterial({
          wireframe: true,
          color: '#ff0000'
}));
cube.rotation.x = Math.PI * 0.1;
cube.rotation.y = Math.PI * 0.3;
scene.add(cube);

// start animation
animate();

这是一个小提琴。

Answer 1

在这一点：

var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 100, 200), new THREE.MeshBasicMaterial({ wireframe: true, color: '#ff0000'

将MeshBasicMaterial颜色更改为所需颜色的十六进制代码

我仍然试图获得他们展示的简单立方体示例，甚至加载到我的浏览器上...

Answer 2

MeshNormalMaterial不支持用于操纵材质颜色的color或Ambient属性

所以只需使用THREE.MeshBasicMaterial({color:0xFF0000})并设置color属性即可。

或者您可以在材质上使用setHex函数来更改先前创建的材质color 。

查看这个小提琴进行演示

Answer 3

当WIreframe设置为true时，color属性由多维数据集的一行或多个顶点获取，删除wireframe：true您将获得多维数据集的颜色...