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哲学的，所以...... meh。

这是完整的代码：

<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();

Three.js alpha材料和补间

1 个答案: