0

私はThree.jsに出くわしましたが、とても気に入っています。JavaScriptは初めてですが、アニメーションなどについてもっと知りたいです。

// UPDATE 現在このコードを持っていますが、何もしていません。カスタムテクスチャなしでこれを実行しようとすると、立方体がレンダリングされます。したがって、現在、テクスチャ以外はすべて機能します。

var camera, scene, renderer;
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.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 500;

    scene = new THREE.Scene();

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

    var cubeTexture = new THREE.texture();
    var loader = new THREE.ImageLoader();

    loader.addEventListener("load", function(event) {
        cubeTexture.image = event.content;
        cubeTexture.needsUpdate = true;
    });

    loader.load("crate.gif");

    var geometry = new THREE.CubeGeometry(300, 300, 300);
    var material = new THREE.MeshBasicMaterial({ map: cubeTexture, overdraw: true });

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

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

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );

}

function onDocumentMouseMove( event ) {

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

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {
    camera.position.x += ( mouseX - camera.position.x ) * 0.05;
    camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
    camera.lookAt( scene.position );

    renderer.render( scene, camera );
}

どんな助けでも大歓迎です！

4

2 に答える 2

2

コンソールにエラーが表示されているはずです。

   var cubeTexture = new THREE.Texture();

無料のヒント: こうする

   var geometry = new THREE.CubeGeometry( 300, 300, 300, 4, 4, 4 );

そうしないと、CanvasRenderer で多くの歪みが発生します。

于 2013-02-28T01:16:01.157 に答える
0

私の理解が正しければ、マウスに合わせて画像を伸ばしたり動かしたりしたいですか？そのためにJavaScriptを使用しないのはなぜですか？マウスの y & x 位置を簡単に読み取り、画像の位置を動的に変更できます。私が間違っている場合は訂正してください。ただし、これが必要な場合は、javascript を使用することをお勧めします。

敬具、ハーメン・ブリンクマン。

于 2013-02-27T14:02:56.077 に答える