2013-04-02 35 views
4

工作的多種材料我有一個大問題,three.js所:three.js所:如何獲得一個網狀

我想用不同顏色的每個面上一個簡單的立方體。我已經試過這樣:

// set the scene size 
    var WIDTH = jQuery('#showcase').width() - 20, HEIGHT = jQuery('#showcase').height(); 

    // set some camera attributes 
    var VIEW_ANGLE = 45, ASPECT = WIDTH/HEIGHT, NEAR = 0.1, FAR = 10000000; 

    this.container = jQuery('#showcase'); 

    this.renderer = new THREE.WebGLRenderer(); 
    this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 
    this.scene = new THREE.Scene(); 
    this.scene.add(this.camera); 

    // camera start position 
    this.camera.position.z = this.model.radius; 
    this.camera.position.y = this.model.cameraY; 
    this.camera.position.x = 0; 
    this.camera.lookAt(this.scene.position); 

    this.renderer.setSize(WIDTH, HEIGHT); 
    this.container.append(this.renderer.domElement); 

    //Multiple Colors 
    var materials = [new THREE.MeshBasicMaterial({ 
     color : 0xFF0000 
    }), new THREE.MeshBasicMaterial({ 
     color : 0x00FF00 
    }), new THREE.MeshBasicMaterial({ 
     color : 0x0000FF 
    }), new THREE.MeshBasicMaterial({ 
     color : 0xAA0000 
    }), new THREE.MeshBasicMaterial({ 
     color : 0x00AA00 
    }), new THREE.MeshBasicMaterial({ 
     color : 0x0000AA 
    })]; 

    this.geometry = new THREE.CubeGeometry(100, 100, 100, materials); 

    this.mesh = new THREE.Mesh(this.geometry, new THREE.MeshFaceMaterial()); 

    this.scene.add(this.mesh); 

    // create a point light 
    this.pointLight = new THREE.PointLight(0xFFFFFF); 
    this.pointLight.position = this.scene.position; 
    this.scene.add(this.pointLight); 

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

但我收到此錯誤信息: 「遺漏的類型錯誤:無法讀取的未定義的屬性‘地圖’」在three.js所行19152。

對我來說,這似乎是一個webgl渲染器的問題。在大多數我在這裏和其他地方發現的主題中,他們都使用畫布渲染器。但我想留在webgl渲染器中。

有沒有人知道這個問題的一些事情? 非常感謝:-)

+0

你可以找到你的答案在 http://stackoverflow.com/questions/13922130/trying-to-color-a-cube-in-three-js/13922407 – gaitat

回答

6

試試這個

this.geometry = new THREE.CubeGeometry(100, 100, 100); 
this.mesh = new THREE.Mesh(this.geometry, new THREE.MeshFaceMaterial(materials)); 
+7

但它是如何分配材料面臨? – user151496

+0

這篇文章提供了關於材料映射到面的更多信息:https://stackoverflow.com/questions/45796655/what-is-the-status-on-multiple-materials – duhaime

1

也許嘗試與陣列工作。

與I使用此代碼爲用不同的材料一天空盒three.js所49(如果它與57的工作原理的不要):

var axes = new THREE.AxisHelper(); 
scene.add(axes); 

var materialArray = []; 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/himmel.jpg') })); 
    var skyboxGeom = new THREE.CubeGeometry(5000, 5000, 5000, 1, 1, 1, materialArray); 
    var skybox = new THREE.Mesh(skyboxGeom, new THREE.MeshFaceMaterial()); 
    skybox.flipSided = true; 
    scene.add(skybox); 
1

嘗試此也,應用vertexcolors。

var geom = new THREE.BoxGeometry(20, 20, 20); 
var faceIndices = ['a', 'b', 'c']; 
var vertexIndex, point; 
mat = new THREE.MeshBasicMaterial({ 
vertexColors: THREE.VertexColors 
}); 
mesh = new THREE.Mesh(geom, mat); 
scene.add(mesh); 
geom.faces.forEach(function (face) { // loop through faces 
for (var i = 0; i < 3; i++) { 
vertexIndex = face[ faceIndices]; 
point = geom.vertices[vertexIndex]; 
color = new THREE.Color(
point.x + 0.5, 
point.y + 0.5, 
point.z + 0.5 
); 
face.vertexColors[ i ] = [![the output will be as in the attached picture][1]][1]color; 
} 
});