Encountering an issue with CanvasRenderer not rendering a Mesh that has multiple materials applied to a BoxBufferGeometry. The Mesh appears without any materials when using CanvasRenderer, but works as expected with WebGLRenderer.
Check out the example code below:
// three.js: multiple materials on a single mesh
var renderer, scene, camera, mesh;
init();
render();
function init() {
// Setting up renderer
renderer = new THREE.CanvasRenderer( { alpha: true } );
renderer.setSize( window.innerWidth / 2, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Creating a scene
scene = new THREE.Scene();
// Configuring camera
camera = new THREE.PerspectiveCamera( 40, (window.innerWidth / 2) / window.innerHeight, 1, 1000 );
camera.position.set( 15, 20, 30 );
camera.lookAt(scene.position);
scene.add( camera );
// Adding ambient light
scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
// Adding point light source
camera.add( new THREE.PointLight( 0xffffff, 1 ) );
// Creating geometry
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
// Defining different materials
var material0 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var material2 = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var material3 = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var material4 = new THREE.MeshBasicMaterial({ color: 0x00ffff });
var material5 = new THREE.MeshBasicMaterial({ color: 0xff00ff });
var materials = [ material0, material1, material2, material3, material4, material5 ];
// Creating mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
}
function render() {
requestAnimationFrame(render);
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
For a visual demonstration and comparison between WebGLRenderer and CanvasRenderer, check out this fiddle
Seeking guidance from experienced individuals in troubleshooting this issue: - Is there an error in my implementation? - Could there be limitations within CanvasRenderer causing it to fail in rendering such a Mesh? - Should I consider reporting this as a bug on the three.js repository?
Your assistance is greatly appreciated!
Note: I am relatively new to Three.js, so please pardon any glaring mistakes. The usage of CanvasRenderer is essential for me due to the need for taking screenshots using phantom.js.
Using Three.js r93