Three.js shatter/explode 平面几何

Question

我正在尝试使用 Tween 和平面几何体在 Three.js 中创建玻璃破碎效果，但我有点不知所措。 mesh/geometry 没有随补间更新，如果我在第一次渲染之前调用 shatter() ，您可以看到补间正在工作，但仅用于一次渲染。渲染后 mesh/geometry 停止更新。

目前代码如下，

<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>

Answer 1

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

因为您正在制作动画，所以您需要在每次补间更新后将其设置为 true，无论是在更新还是渲染回调中。

Three.js shatter/explode 平面几何

Three.js shatter/explode plane geometry

javascript

three.js