I new to javascript and three.js so this is probably a noob question. BTW, I'm working on the example interactive/cubes/tween and I'm trying to modify it to test something else. At the moment the MouseDown event gives the tween effect to the intersected geometry, here's the 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 );
}
*/
}
But what if I want to give that effect to the intersected geometry and a different effect to the non-intersected ones? I've tried this way:
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 my MouseDown 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 ) {
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 logic didn't work. How can I make it work?
Solved it. Actually I wasn't able to loop trough meshes into scene. Didn't know about scene.traverse(). Here's the new code:
Solution found here: Three.js: for loop for every mesh in scene?