Three.js无法获取贴图和颜色属性'使用Canvas渲染器

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

本文关键字：使用 Canvas 属性 颜色 js 获取 Three      更新时间：2023-09-26

我一直试图将map和color属性与画布渲染器同时使用，但只有其中一个可以使用。此外，使用画布渲染器时，当应用到的立方体旋转时，显示的图像会失真。webGL不会出现这种失真。我已经建立了一个jsfiddle来展示我的问题。这是我第一次使用jsfiddle，我也无法使webGL渲染器正确显示，但当我在本地测试时，webGL渲染程序确实可以工作。我使用的是build62dev。

  // 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();

CanvasRenderer不支持同时使用material.color和material.map。

图像失真是众所周知的CanvasRenderer的限制。可以通过进一步镶嵌几何体来减少失真。

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

你可以在这篇优秀的博客文章中阅读更多关于这个限制的内容。

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

three.js r.63

相关文章：