Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
172
rated 0 times [  175] [ 3]  / answers: 1 / hits: 16277  / 11 Years ago, tue, april 2, 2013, 12:00:00

I have a big problem with three.js:



I want a simple cube with a different color on each face. I have tried this way:



// 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);


But I get this error message:
Uncaught TypeError: Cannot read property 'map' of undefined from line 19152 in three.js.



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.



Does anyone know something about this problem?
Thanks a lot:-)


More From » canvas

 Answers
4

Try this



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

[#79171] Monday, April 1, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tina

Total Points: 91
Total Questions: 106
Total Answers: 104

Location: Vanuatu
Member since Fri, May 13, 2022
2 Years ago
;