3

私はちょうどイースターの日にThree.jsを使い始めましたが、トゥイーンの問題にぶつかりました。キーボードの矢印で回転を制御するために、ドラッグ可能な立方体で例をハックする方法を見つけました。うまく動作します。しかし、問題はアルファです。私はこれをたくさん使ってカスタム関数でハックしようとしました:

if(someBoolean == 1){object.material.opacity -= someFloat;}

それは機能しますが、これを試してみると：

case KEYUP:
new TWEEN.Tween(cubeOpacity).to(0).start();
console.log("tweening opacity to 0");

いいえ、起こりません。コンソールは何も問題はないと言っていますが、トゥイーンは永遠に続き、値は 1 のままです。そして、その理由がわかりません。そして、すべての要素の不透明度を変更するための関数を書くことは、DRY 哲学に反しているようです。

コード全体は次のとおりです。

<script src="js/three.min.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/keys.js"></script>

<script>

    var container, stats;
    var camera, scene, renderer;
    var cube;


    var centerX = window.innerWidth / 2;
    var centerY = window.innerHeight / 2;

    init();
    animate();

    function init(){

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

        var info = document.createElement ('div');
        info.style.position = 'absolute';
        info.style.top = '10px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.innerHTLM = 'Drag to spin';
        container.appendChild(info);

        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.y = 150;
        camera.position.z = 500;

        scene = new THREE.Scene();

        // Cube 

        var geometry = new THREE.CubeGeometry( 200, 200, 200, 10, 10, 10);

        for (var i = 0; i < geometry.faces.length; i+= 3 ) {
            var hex = Math.random() * 0xffffff;
            geometry.faces[i].color.setHex(hex);
            geometry.faces[i+1].color.setHex(hex+100);

        }   
        var material = new THREE.MeshBasicMaterial( {vertexColors: THREE.FaceColors, overdraw: 0.5, transparent: true, opacity: 1.0 } );

        cube = new THREE.Mesh(geometry, material);
        cube.position.y = 150;
        scene.add(cube);


        // Plane 

        var geometry = new THREE.PlaneGeometry( 200, 200, 10, 10 );
        geometry.applyMatrix( new THREE.Matrix4().makeRotationX(- Math.PI / 2));

        var materialBottom = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );
        plane = new THREE.Mesh(geometry, materialBottom);
        scene.add(plane);


        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        document.addEventListener('keydown', onKeyPressed, false);          

    }
    function onWindowResize(){

        centerX = window.innerWidth / 2;
        centerY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }
    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {

        TWEEN.update();
        if (TWEEN.update()) {   

            console.log(TWEEN.update());
            console.log(cube.material.opacity);
        }
        renderer.render( scene, camera );
    }

    function onKeyPressed (event) {
        var key = event.keyCode;
        if (!TWEEN.update()) {
            switch( key )
            {
                case KEYLEFT:

                new TWEEN.Tween(cube.rotation).to( {
                    x: 0,
                    y: cube.rotation.y + 90 * (Math.PI/180),
                    z: 0 }, 750 )
                .easing( TWEEN.Easing.Quadratic.InOut).start();

                new TWEEN.Tween(plane.rotation).to( {
                    x: 0,
                    y: plane.rotation.y + 90 * (Math.PI/180),
                    z: 0 }, 1000 )
                .easing( TWEEN.Easing.Quadratic.InOut).start();
                console.log("tweenLeft");
                break;

                case KEYRIGHT:

                new TWEEN.Tween(cube.rotation).to( {
                    x: 0,
                    y: cube.rotation.y -90 * (Math.PI/180),
                    z: 0 }, 750 )
                .easing( TWEEN.Easing.Quadratic.InOut).start();

                new TWEEN.Tween(plane.rotation).to( {
                    x: 0,
                    y: plane.rotation.y -90 * (Math.PI/180),
                    z: 0 }, 1000 )
                .easing( TWEEN.Easing.Quadratic.InOut).start();
                console.log("tweenRight");
                break;   

                case KEYUP:
                new TWEEN.Tween(cube.material.opacity).to(0).start();
                console.log("tweenAlpha");
                break;
            }
        }
    }

</script>

それで、誰が問題がどこにあるか知っていますか？前もって感謝します！

4

1 に答える 1

14 
new TWEEN.Tween( cube.material ).to( { opacity: 0 }, 1000 ).start();
于 2013-10-16T14:37:17.110 に答える