StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POthree.js: How to get multiple materials working for one mesh
text
Body
copied!<p>I have a big problem with three.js:</p> <p>I want a simple cube with a different color on each face. I have tried this way:</p> <pre><code>// 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); </code></pre> <p>But I get this error message: "Uncaught TypeError: Cannot read property 'map' of undefined" from line 19152 in three.js. </p> <p>To me it seems to be a problem of the webgl renderer. In most topics I have found here and somewhere else, they were using the canvas renderer. But I want to stay with the webgl renderer.</p> <p>Does anyone know something about this problem? Thanks a lot:-)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload