Question

所以我对Three.js很新，但是我已经设法用CanvasRenderer创建了我想要的东西唯一的问题是代码在IE中不起作用而且它在FireFox中“滞后”。

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 );
}

Answer 1

你的飞机有800个面孔。这样做：

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

此外，您的图片是4.6 Meg。

Answer 2

这在评论中太过邋。了。如果没有加载和运行开发工具，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 () {};
}

CanvasRenderer不在IE中渲染并在FF中滞后

2 个答案: