Javascript Three.js破碎/分解平面几何体_Javascript_Three.js

Javascript Three.js破碎/分解平面几何体

javascript three.js

Javascript Three.js破碎/分解平面几何体,javascript,three.js,Javascript,Three.js,我正试图用Tween和plane几何体在Three.js中创建一个玻璃破碎效果，但我有点迷失了方向。网格/几何体没有使用tween更新，如果我在第一次渲染之前调用shatter，您可以看到tween正在工作，但仅用于一次过程。渲染后，网格/几何体停止更新目前的代码如下： <html> <head> <title>My first Three.js app</title> <style> body

我正试图用Tween和plane几何体在Three.js中创建一个玻璃破碎效果，但我有点迷失了方向。网格/几何体没有使用tween更新，如果我在第一次渲染之前调用shatter，您可以看到tween正在工作，但仅用于一次过程。渲染后，网格/几何体停止更新

目前的代码如下：

<html> 
<head> 
    <title>My first Three.js app</title> 
    <style> 
        body { margin: 0; } canvas { width: 100%; height: 100% } 
    </style> 
</head> 
    <body> 
        <script src="js/three.min.js"></script> 
        <script src="js/ExplodeModifier.js"></script> 
        <script src="js/tween.min.js"></script> 
        <script> 
            var scene = new THREE.Scene(); 
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
            var renderer = new THREE.WebGLRenderer(); 
            renderer.setSize( window.innerWidth, window.innerHeight ); 
            document.body.appendChild( renderer.domElement ); 

            var geometry = new THREE.PlaneGeometry(5, 5, 8,8); // create plane
            var material = new THREE.MeshBasicMaterial( { color: 0xB20000, wireframe: true});

            var mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            camera.position.z = 5;

            function shatter()
            {
                TWEEN.removeAll(); 

                var explodeModifier = new THREE.ExplodeModifier();
                explodeModifier.modify( geometry );

                var verticeA = 0;
                var verticeB = 1;
                var verticeC = 2;

                var test = geometry.vertices.length;

                geometry.vertices[verticeA].translateX(1);

                for(var i = 0; i < (geometry.vertices.length / 256); i++)
                {
                    TWEEN.removeAll();

                    var pos = new THREE.Vector3();

                    var final = Math.random();

                    pos.x = final;
                    pos.y = final;
                    pos.z = final;

                    new TWEEN.Tween(geometry.vertices[verticeA])
                    .to( { x: pos.x, y: pos.y, z: pos.z }, 2000 )
                    .easing( TWEEN.Easing.Exponential.InOut )
                    //.onUpdate( function() { })
                    .start();

                    new TWEEN.Tween(geometry.vertices[verticeB])
                    .to( {  x: pos.x, y: pos.y, z: pos.z }, 2000 )
                    .easing( TWEEN.Easing.Exponential.InOut )
                    .start();

                    new TWEEN.Tween(geometry.vertices[verticeC])
                    .to( { x: pos.x, y: pos.y, z: pos.z }, 2000 )
                    .easing( TWEEN.Easing.Exponential.InOut )
                    .start();

                    verticeA += 3;
                    verticeB += 3;
                    verticeC += 3;
                }
            };

            var render = function () {
                TWEEN.update();

                requestAnimationFrame( render );

                renderer.render(scene, camera);
            };

            render();
            shatter();
        </script> 
    </body> 
</html>

如果更改顶点坐标，则需要通过设置geometry.verticesNeedUpdate=true来标记

因为您正在制作动画，所以每次tween更新后，您都需要在更新或渲染回调中将其设置为true。

为什么要在for循环中执行tween.removeAll？