CODEWITHSUNDEEP
javascriptthree.js
Kahless
Kahless

Reputation: 1253

Three.js cant get the map and color property's to work with Canvas renderer

I have been trying to use the map and color property's simultaneously with the canvas renderer but only one or the other will work. Also when using the canvas renderer the image being displayed becomes distorted when the cube it is applied to rotates. This distortion does not occur with webGL. I have set up a jsfiddle to demonstrate my issue. This is my first time using a jsfiddle and I can't get the webGL renderer to display correctly either but the webGL renderer does work when I test it locally. I am 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();

Upvotes: 0

Views: 114

Answers (1)

WestLangley
WestLangley

Reputation: 104763

CanvasRenderer does not support the use of material.color and material.map simultaneously.

The image distortion is a well-known limitation of CanvasRenderer. You can reduce the distortion by further tessellating your geometry.

var geometry = new THREE.CubeGeometry( 200, 200, 200, 4, 4, 4 );

You can read more about this limitation in this excellent blog post.

Fiddle: http://jsfiddle.net/8ASqn/3/

three.js r.63

Upvotes: 1

Related Questions