Struggling to achieve a glass shattering effect in Three.js using Tween and plane geometry. The issue arises when the mesh/geometry fails to update with the tween after the initial rendering. It seems that calling the function "shatter()" before the first render demonstrates that the tween is functional, but only for one cycle. Subsequently, post-render, the mesh/geometry ceases to update.
The current code looks like this:
<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>