Three.js alpha Material 和补间

Question

我刚开始使用 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>

那么，有人知道问题出在哪里吗？提前致谢!

Answer 1

new TWEEN.Tween( cube.material ).to( { opacity: 0 }, 1000 ).start();