I am facing a major issue with three.js:
My goal is to create a simple cube with different colors on each face. I attempted to achieve this using the following code snippet:
// 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);
Unfortunately, I encountered the following error message: "Uncaught TypeError: Cannot read property 'map' of undefined" from line 19152 in three.js.
It appears to be an issue related to the WebGL renderer. Most resources I found suggested using the canvas renderer instead. However, I prefer to use the webgl renderer.
Does anyone have any insights or suggestions to resolve this problem? Thank you:-)