更改使用Three.js創建的3D立方體的顏色

幫助！您如何從Three.js示例中的默認值更改3D立方體的顏色？更改使用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是它的一個小提琴。

來源

2014-02-13 UID

http://stackoverflow.com/questions/11252592/how-to-change-face-color-in-three-js – woodlumhoodlum

或http://stackoverflow.com/questions/8820591/how-to-use-multiple-materials -in-a-three-js-cube –

MeshNormalMaterial不支持其用於manipul要麼color或Ambient性質吃了材料的顏色

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

或者您可以使用材質之後的setHex函數更改之前創建的材質color。

檢查this fiddle用於演示

來源

2014-02-14 07:08:12 Shiva

謝謝！它的工作，還有一個問題，就像你正在改變顏色點擊，我們可以改變尺寸嗎？我已經在SO中發佈了這個問題http://stackoverflow.com/q/21783976/2719346你可以看看int嗎？ – UID

在該位：MeshBasicMaterial顏色顏色的十六進制編碼你想

我還在試圖讓簡單的立方體例子

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

改變他們發現，即使負載在我的瀏覽器，但...

來源

2014-02-13 22:00:25 George

當線框設置爲true，採取的是線上或立方體的頂點顏色屬性，刪除線框：真的，你會得到立方體的顏色...

來源

2014-03-12 11:31:54 user3363468

更改使用Three.js創建的3D立方體的顏色

回答

相關問題