更改使用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您將獲得多維數據集的顏色...