While attempting to utilize both the map and color properties at the same time with the canvas renderer, I have encountered a problem where only one of them will work properly. Additionally, when the cube to which the image is applied rotates, the image displayed becomes distorted with the canvas renderer, whereas this distortion does not occur with webGL. To demonstrate this issue, I have set up a jsfiddle. However, I am experiencing difficulties in getting the webGL renderer to display correctly in the jsfiddle, even though it works fine when tested locally. I am currently using build 62dev.
// revolutions per second
var angularSpeed = 0.2;
var lastTime = 0;
// this function is executed on each animation frame
function animate(){
// update
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
cube.rotation.y += angleChange;
lastTime = time;
// render
renderer.render(scene, camera);
// request new frame
requestAnimationFrame(function(){
animate();
});
}
// renderer
//var renderer = new THREE.WebGLRenderer();
var renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
// scene
var scene = new THREE.Scene();
// cube
var spriteImg = new THREE.ImageUtils.loadTexture( 'http://unrestrictedstock.com/wp-content/uploads/lugano-switzerland-villa-ciani.jpg' );
var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshBasicMaterial({
color: 'red', map: spriteImg
}));
cube.rotation.x = Math.PI * 0.1;
scene.add(cube);
// start animation
animate();