javascript - 更改使用 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();

<强> Here是一个 fiddle 。

Answer 1

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

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

或者您可以随后在 Material 上使用setHex函数来更改之前创建的 Material 的颜色。

检查this fiddle演示