更改使用 Three.js 创建的 3D Cube 的颜色答案

【问题标题】：Change color of 3D Cube created using Three.js更改使用 Three.js 创建的 3D Cube 的颜色
【发布时间】：2014-03-12 17:01:07
【问题描述】：

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

这是我目前所拥有的 -

HTML

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

// 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 是它的小提琴。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

当 WIreframe 设置为 true 时，颜色属性由立方体的线或顶点获取，删除线框：true 你将得到立方体的颜色...

【讨论】：

【解决方案2】：

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

所以只需使用 THREE.MeshBasicMaterial({color:0xFF0000}) 和 color 属性集。

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

查看this fiddle 以获取演示

【讨论】：

谢谢！！！它起作用了，还有一个问题，就像你正在改变颜色点击一样，我们可以改变尺寸吗？？？我已经在 SO stackoverflow.com/q/21783976/2719346 中发布了这个问题，你能看一下吗？？

【解决方案3】：

在这一点上：

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

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

我仍在尝试让他们展示的简单多维数据集示例甚至可以加载到我的浏览器中...

【讨论】：