Three.js alpha材质和缓动效果

Question

我昨天才开始使用Three.js，但是我遇到了缓动的问题。我通过hack示例，并使用可拖动的立方体来控制旋转，这部分已经很好了。但问题在于透明度。我尝试通过自定义函数来hack它，但需要大量的代码：

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>

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

- sphere42

Answer 1

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

- WestLangley