I want to realize a 3D interactive globe with three.js and I wonder if there is a way to intersect over Sprites primitive with the Raycaster?
If you check the source code for RayCaster at
https://github.com/mrdoob/three.js/blob/master/src/core/Raycaster.js
it would appear that the intersectObject function only checks objects that are instances of THREE.Particle or THREE.Mesh, not THREE.Sprite. Possibly this is because sprites could be set to use screen coordinates, and so a ray that projects into your 3d scene wouldn't make sense in this situation, or if placed in the scene as the sprite image always faces the camera, it doesn't act like your standard 3d mesh.
Perhaps you could attach a PlaneGeometry or a very thin CubeGeometry to the position of your sprite, set its rotation to the rotation of the camera so that it is always parallel to the view plane of the camera like the sprite is, and then check for intersections with the mesh instead?
Related
I used sprites in Three js to display 2d images, the problem that I faced with sprites that they rotate to face the camera.
I am trying to use it to fake a shadow for the 3d object. When I rotate the camera the 3d object tilt with the camera until it makes a 30-degree angle with the horizontal but it's shadow (2d sprite) still at 0 degrees.
How to disable the auto rotation of sprite, or is there another solution to preview 2d images in three js to look like a 3d object?
How to disable the auto rotation of sprite, or is there another solution to preview 2d images in three js to look like a 3d object?
It's not possible to disable the orientation towards the camera with a flag or configuration. You would have to modify the shader code of SpriteMaterial for this.
I suggest you use a mesh instead based on a PlaneBufferGeometry and a MeshBasicMaterial. Alternatively, you write a custom billboard shader with ShaderMaterial or RawShaderMaterial.
I'm learning webgl, threejs and glsl shaders. The scene you see below is my attempt at working with instanced geometry. I have 3 patches of "grass". The grass is actually made of instanced cones around the central position of the mesh I'm building.
As you can see, if the central position (marked with a white wireframe cone) of the mesh is no longer in the camera view, all instances disappear.
How can I prevent this?
And to be even more specific: Are all the grass patches, or all fire instances, or all particles of the same time supposed to be instanced at once and place around the scene how we see fit? My assumption is that they should. Right?
If you are using InstancedBufferGeometry, there are two ways you can deal with frustum culling.
One way is to turn frustum culling off for the mesh:
mesh.frustumCulled = false;
The other option is to set the bounding sphere of the mesh's geometry manually, if it is known in your case:
geometry.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius );
three.js r.88
I'm trying to use Three.js to create an ’asteroid field' using particle systems or point clouds or stuff like that. One of the problems I've bumped into with all of these is that when the camera rotates around the z axis, the particles rotate individually with the camera, preserving the same orientation no matter how the camera is turned. I want the simulation to look as if the user is flying through a bunch of asteroids, and obviously asteroids don't magically spin whenever you tilt your head, so I was wondering if there is any way to prevent them from turning when the camera turns. Must particles always be upright?
If you want to rotate sprites you can use attribute SpriteMaterial.rotation:
var sprite = new THREE.Sprite( new THREE.SpriteMaterial({map: texture,rotation: Math.PI/4}));
see this http://threejs.org/examples/webgl_sprites.html
In your case, rotation of all sprites should be equal to camera rotation.
I'm trying to create a shadow in my orthographic scene in three.js. I'd like to have a directional light so the shadow is offset from all objects equally in the scene. I am however having problems using DirectionalLight.
My first problem is that I can't get the shado to cover the entire scene, only part of it ever has a shadow. I played with the light's frustum settings, but can't figure out how to get it to cover the scene. Ideally I'd want the frustrum to match that of the camera.
The second problem is that the shadows aren't "clean". If I use a SpotLight the shadows have nice crisp borders (but obviously not the universal directionality I want). When I use a DirectionalLight the borders are misshappen and blurry.
In the samples the tile is a simply box created with CubeGeometry.
How can I create an ortographic directional light source for my scene?
I want to realize a 3D interactive globe with three.js and I wonder if there is a way to intersect over Sprites primitive with the Raycaster?
If you check the source code for RayCaster at
https://github.com/mrdoob/three.js/blob/master/src/core/Raycaster.js
it would appear that the intersectObject function only checks objects that are instances of THREE.Particle or THREE.Mesh, not THREE.Sprite. Possibly this is because sprites could be set to use screen coordinates, and so a ray that projects into your 3d scene wouldn't make sense in this situation, or if placed in the scene as the sprite image always faces the camera, it doesn't act like your standard 3d mesh.
Perhaps you could attach a PlaneGeometry or a very thin CubeGeometry to the position of your sprite, set its rotation to the rotation of the camera so that it is always parallel to the view plane of the camera like the sprite is, and then check for intersections with the mesh instead?