个人中心
gpt4 book ai didi

javascript - Three.js 粉碎/爆炸平面几何体

转载 作者：行者123 更新时间：2023-11-28 07:20:30 24 4
gpt4 key购买 nike

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

到目前为止的代码如下，

<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 来标记这一点。

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

关于javascript - Three.js 粉碎/爆炸平面几何体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30371295/

24 4 0
文章推荐： javascript - 表单验证样式不起作用
文章推荐： javascript 错误停止运行时执行
文章推荐： ios - 带有多个内衬标签的 estimatedRowHeight 导致单元格剪裁
文章推荐： html - 使背面图像模糊和正面图像清晰可见
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com