CanvasRenderer沒有在IE中渲染，但在FF中滯後FF

所以我對Three.js比較陌生，但我已經設法使用CanvasRenderer創建我想要的東西，唯一的問題是該代碼在IE中不工作，並且「滯後「在FireFox中。CanvasRenderer沒有在IE中渲染，但在FF中滯後FF

無論IE試圖做什麼，IE通常都會遇到某種問題，這就是它的特殊之處。而且我明白FireFox的滯後可能來自我自己的結尾，但FireFox中的更多「高級」和沉重的東西運行良好，所以我認爲它與我的代碼有關。

無論如何，我希望有人可以看看我的代碼，並可能解釋爲什麼它不在IE中工作，爲什麼它在FireFox中很慢，並希望指向正確的方向，所以我可以採取某些措施嘗試和解決這個問題。

的代碼是在這裏水潭裏，你可以去這裏看到自己一個活生生的例子，http://ecaz.net/ThreeJS/redZone/

var camera, scene, renderer, plane; 
var mouseX = 0, mouseY = 0; 

var windowHalfX = window.innerWidth/2; 
var windowHalfY = window.innerHeight/2; 

init(); 
animate(); 

function init() { 
    camera = new THREE.PerspectiveCamera(75, window.screen.width/window.screen.height, 1, 10000); 
    camera.position.z = 475; 

    scene = new THREE.Scene(); 

    container = document.createElement('div'); 
    document.body.appendChild(container); 

    var planeTexture = new THREE.Texture(); 
    var loader = new THREE.ImageLoader(); 

    loader.addEventListener("load", function(event) { 
     planeTexture.image = event.content; 
     planeTexture.needsUpdate = true; 
    }); 
    loader.load("redzone.png"); 
    var geometry = new THREE.PlaneGeometry(window.screen.width, window.screen.height, 200, 4, 4, 4); 
    var material = new THREE.MeshBasicMaterial({ map: planeTexture, overdraw: true }); 

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    plane = new THREE.Mesh(geometry, material); 
    scene.add(plane); 
    container.appendChild(renderer.domElement); 

    document.addEventListener('mousemove', onDocumentMouseMove, false); 
    window.addEventListener('resize', onWindowResize, false); 

} 

function onWindowResize() { 
    camera.aspect = window.screen.width/window.screen.height; 
    camera.updateProjectionMatrix(); 

    renderer.setSize(window.innerWidth, window.innerHeight); 
} 

function onDocumentMouseMove(event) { 

    mouseX = (event.clientX - windowHalfX)/190; 
    mouseY = (event.clientY - windowHalfY)/50; 

} 

function animate() { 

    requestAnimationFrame(animate); 

    render(); 

} 

function render() { 

    camera.position.x += (mouseX - camera.position.x) * 0.1; 
    camera.position.y += (- mouseY - camera.position.y) * 0.1; 

    camera.lookAt(scene.position); 

    renderer.render(scene, camera); 
}

來源

2013-02-28 Andreas

你的飛機有800面。取而代之：

var geometry = new THREE.PlaneGeometry(window.screen.width, window.screen.height, 4, 4);

此外，您的圖像是4.6兆。

來源

2013-03-01 00:03:56 WestLangley

我已經注意到了，當我在IE中測試它不會加載，直到我打開開發工具。 – 2013-03-01 00:07:29

對，現在看來我覺得這很愚蠢。我只是不確定如何設置一架飛機，因爲我找不到更新的演示。無論如何，現在FireFox有點平滑，但它仍然只是在IE9中呈現爲黑色。而且圖像相當大，因爲它只是一個草稿，並且它是一個相當大的圖像（2560x1600），我認爲文件大小可以影響動畫的「平滑度」。 – Andreas 2013-03-01 00:17:09

這在評論中太過於草率。沒有加載和運行開發工具，IE沒有真正的控制檯。嘗試在Three.JS加載之前將此代碼片段放入代碼中。如果控制檯不存在，它基本上會創建一些虛擬方法。

if (typeof (console) === 'undefined') { 
    var console = {} 
    console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {}; 
}

來源

2013-03-01 01:25:15

CanvasRenderer沒有在IE中渲染，但在FF中滯後FF

回答

相關問題