0

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

2 回答 2

0

这在评论中太草率了。如果没有加载和运行开发工具，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-01T01:25:15.913 回答
0

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

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

此外，您的图像是 4.6 兆。

于 2013-03-01T00:03:56.690 回答