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