0

私はThree.jsにはかなり慣れていませんが、CanvasRendererを使用して必要なものを作成できました。唯一の問題は、コードがIEで機能せず、FireFoxで「遅れている」ことです。

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 );
}
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 に答える