Three.js不能獲取地圖和顏色屬性與Canvas渲染器一起使用

我一直在嘗試使用地圖和顏色屬性與canvas渲染器同時使用，但只有一個或另一個可以工作。此外，當使用畫布渲染器時，正在顯示的圖像在應用旋轉的立方體時會變形。 webGL不會出現這種失真。我已經設置了jsfiddle來證明我的問題。這是我第一次使用jsfiddle，並且我無法正確顯示webGL渲染器，但是當我在本地測試時，webGL渲染器不起作用。我正在使用build 62dev。Three.js不能獲取地圖和顏色屬性與Canvas渲染器一起使用

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

來源

2013-11-22 Kahless

CanvasRenderer不支持使用material.color和material.map同時進行。

圖像失真是CanvasRenderer的衆所周知的限制。您可以通過進一步鑲嵌您的幾何圖形來減少失真。

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

您可以在this excellent blog post中瞭解關於此限制的更多信息。

小提琴：http://jsfiddle.net/8ASqn/3/

three.js所r.63

來源

2013-11-22 23:53:00 WestLangley

酷的幫助表示感謝。 – Kahless

Three.js不能獲取地圖和顏色屬性與Canvas渲染器一起使用

回答

相關問題