CanvasRenderer在IE中没有渲染和滞后于FF答案

【问题标题】：CanvasRenderer not rendering in IE and lag in FFCanvasRenderer在IE中没有渲染和滞后于FF
【发布时间】：2023-03-03 08:20:25
【问题描述】：

所以我对 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 );
}

【问题讨论】：

标签： internet-explorer firefox html5-canvas three.js lag

【解决方案1】：

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

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

另外，你的图像是 4.6 兆。

【讨论】：

我也注意到了这一点，当我在 IE 中测试时，直到我打开开发者工具才会加载。
对，现在我想到它似乎是一件愚蠢的事情。我只是不确定如何设置飞机，因为我找不到更新的演示。无论如何，它现在在 FireFox 中更流畅了，但在 IE9 中仍然只是呈现为黑色。并且图像很大，因为它只是一个草稿而且它是一个很大的图像（2560x1600），我想文件大小会对动画的“流畅度”产生影响。

【解决方案2】：

这样评论太草率了。如果没有加载和运行开发工具，IE 就没有真正的控制台。尝试在 Three.JS 加载之前将此 sn-p 放入您的代码中。如果控制台不存在，它基本上会创建一些虚拟方法。

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

【讨论】：