Is there any way to capture mouse click in ParticleSystem? With Mesh and Paticle its working fine but if i call intersectObject on a ParicleSystem the intersects length is always 0.
vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
ray.set(camera.position,vector.subSelf( camera.position ).normalize() );
intersects = ray.intersectObjects( particleSystem );
console.log(intersects.length);
Heres is an example with interactive particles: https://dl.dropbox.com/u/4253186/three/examples/webgl_interactive_particles.html
but its not working with the latest version of three.js.
Ray.intersectObjects() does not support ParticleSystem in the current version of three.js (r.53).
So the answer is 'no', unless you modify the library yourself.
Related
In this demo:
https://threejs.org/examples/?q=clipping#webgl_clipping_advanced
if you enable the "visualize" option, you can see the 3d pyramid "cutting" the inside object.
Here:
https://threejs.org/examples/?q=clipping#webgl_clipping
there is a simple 2d plane cutting the object, but there is no such option to "see" the plane. I just started learning threejs and I am not too familiar with any 3d engine (other than fully understanding the math behind it), so I tried some basic stuff, e.g.:
localPlane.visible = true
But of course it didn't work. Any 'simple' way to make the second demo display the cutting plane?
Thank you
Here's some code to add the plane in the position you want:
const planeGeometry = new THREE.PlaneGeometry( 1.5, 1.5 );
const planeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.copy(localPlane.normal);
plane.position.multiplyScalar(-localPlane.constant);
plane.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, 1), localPlane.normal);
plane.material.opacity = 0.5;
plane.material.transparent = true;
scene.add( plane );
And here's what that looks like...
However, depending on what you are implementing, you may find it easier to create a Plane Mesh in the position you want, and then derive the clipping plane THREE.Plane from that.
If you want to be able to move the clipping plane around, the reasoning involved in moving a Plane Mesh Object3D is probably more straightforward than reasoning about moving a THREE.Plane.
(update)
Another alternative approach I've come across: you could simply use the built in THREE.PlaneHelper, which can be used to visualize any THREE.Plane.
https://threejs.org/docs/#api/en/helpers/PlaneHelper
The sample code offered on that page is this:
const plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
const helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
scene.add( helper );
In three.js How to set the center of the camera orbit ? (with OrbitControls)
Egg : I want to use
camera.lookAt(new THREE.Vector3( 100,50,200 )
and make my camera orbit around this point and not around 0,0,0
How to set ?
You can set the center of rotation for OrbitControls like so:
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( x, y, z );
The Vector3 target is the center of rotation, and the point the camera "looks at".
three.js r.76
i try since weeks to raycast from the centre of a perspectivecamera. without event.client.x and y, because i use the device orientation:
var raycaster = new THREE.Raycaster();
var vector = new THREE.Vector3( 0, 0, 0 ); // instead of event.client.x and event.client.y
var direction = new THREE.Vector3( 0, 0, -1 ).transformDirection( camera.matrixWorld );
raycaster.set( vector, direction );
var intersects = raycaster.intersectObjects(objects);
i have a perspectivecamera on (0,0,0) … i use the device orientation instead keyboard and mouse to obtain the Rotation… and want to hit a cube with a raycast sent from the center of my cam. i try a lot of examples for a three.js raycast, but no success.
what the hell is wrong with my raycast????
For your raycast vector and direction use the cameras world vectors:
raycaster.set( camera.getWorldPosition(), camera.getWorldDirection() );
Use simple:
raycaster.setFromCamera( new THREE.Vector2(), camera );
http://jsfiddle.net/gLbkg21e/
I've got a Perspective Camera and would like to use Raycasting to find the object in front of the player. I can't find any tutorials on how to do this, instead of clicking an object with the mouse pointer which I don't want to do. Where can I find out how to do this, or how do I implement this myself? Or do I just use the raycaster by itself?
This is simple.
Based on the code of the raycasting example with terrain
http://threejs.org/examples/#webgl_geometry_terrain_raycast
And on this reference
http://threejs.org/docs/#Reference/Core/Raycaster
You can see that all you have to do is change the second parameter of the Raycaster constructor to a vector that points in the same direction as the camera does.
So the following code from the example
var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
var mouseY = -( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3( mouseX, mouseY, camera.near );
// Convert the [-1, 1] screen coordinate into a world coordinate on the near plane
var projector = new THREE.Projector();
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
becomes
var vector = new THREE.Vector3(0, 0, -1);
vector = camera.localToWorld(vector);
vector.sub(camera.position); // Now vector is a unit vector with the same direction as the camera
var raycaster = new THREE.Raycaster( camera.position, vector);
Using this should always create a raycaster that selects objects pointed to by the camera, independent of the type of camera you use, or its controls.
I am using Three.js 57 version. Now I am working in animation using JSONLoader. I got the animation successfully. But I want to update full vertex color of mesh for each frame in animation. Is this possibe in three.js
Thanks in Advance
Vertex colors are currently not supported in CanvasRenderer.
Here is the pattern you need to follow for WebGLRenderer:
Set THREE.VertexColors when you create the material for the mesh;
material.vertexColors = THREE.VertexColors;
Also make sure that vertexColors are defined for each face of your geometry.
geometry.faces[ faceIndex ].vertexColors[ vertexIndex ] = new THREE.Color( 0xff0000 );
Then in your render loop, to change a vertex color, do this:
geometry.faces[ faceIndex ].vertexColors[ vertexIndex ].setHSL( Math.random(), 0.5, 0.5 );
mesh.geometry.colorsNeedUpdate = true;
three.js r.59