As a newcomer to javascript and three.js, I have a question that may seem basic. Currently, I am exploring the example interactive/cubes/tween and attempting to modify it for a different purpose. Right now, when a MouseDown event occurs, the intersected geometry experiences a tween effect using the following function:
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
x: Math.random() * 800 - 400,
y: Math.random() * 800 - 400,
z: Math.random() * 800 - 400 }, 2000 )
.easing( TWEEN.Easing.Elastic.Out).start();
new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
x: Math.random() * 2 * Math.PI,
y: Math.random() * 2 * Math.PI,
z: Math.random() * 2 * Math.PI }, 2000 )
.easing( TWEEN.Easing.Elastic.Out).start();
}
/*
// Parse all the faces
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
}
*/
}
However, I'm interested in applying this effect only to the intersected geometry while giving a different effect to non-intersected ones. My attempt at achieving this is shown below:
function init()
{
//JUST SOME CODE OF THE INIT()//
//TRIANGLE//
var triangle = new THREE.Mesh( new THREE.CircleGeometry( 50, 3, 0, Math.PI * 2 ), triangleMat );
triangle.position.set( 70, 0, 0 );
scene.add( triangle );
sceneArr.push(circle);
//SQUARE//
var square = new THREE.Mesh( new THREE.CircleGeometry( 50, 4, 0, Math.PI * 2 ), squareMat );
square.position.set( -35, 60.6218, 0 );
scene.add( square );
sceneArr.push( square );
//CIRCLE//
circle = new THREE.Mesh( new THREE.CircleGeometry( 50, 27, 0, Math.PI * 2 ), circleMat );
circle.position.set( -35, -60.6218, 0 );
scene.add( circle );
sceneArr.push( circle );
}
Here's what my MouseDown function looks like:
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
console.log( intersects[0] );
new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
x: 0,
y: 0,
z: 0 }, 4000 )
.easing( TWEEN.Easing.Elastic.Out).start();
new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
x: 0,
y: 0,
z: Math.random() * 2 * Math.PI }, 2000 )
.easing( TWEEN.Easing.Elastic.Out).start();
for( var geo in sceneArr){
if( geo != intersects[ 0 ]){
geo.position.set( 50, 50, 0);
}
}
}
}
Unfortunately, my approach failed to deliver the desired result. How can I adjust my logic to make it work?