Hello and thanks for your time. I have just read multiple tutorials regarding clicking objects with the mouse in three.js. Unfortunately there was no mention if this is possible with sprites. As a workaround I attempted to apply a .png image to a plane geometry. While this worked as far as click-ability is concerned it looked very sloppy and didn't auto rotate towards the camera. Dose an object have to have a mesh to be clickable and if so is there any way to apply a invisible mesh to a sprite? Or any other workaround. I assume I'm missing something.
For billboarding effects -- for the plane to face the camera -- set the rotation of the plane equal to the rotation of the camera.
Related
for a university project I created a threecsg subtract in ThreeJS. I want to apply a texture for this mesh. But the missing uv coordinates after the processing is causing me some trouble. This needs to be a threecsg, because this a project requirement.
This is how the mesh looks like now: screenshot link
I found some code here: THREE.js generate UV coordinate
And it did get me closer to the solution. The side faces are now facing the applied texture in the right way: screenshot link
The upside has many weird faces. I tried to use the THREE.SimplifyModifier to get fewer faces so I might be able to calculate and set the uv-coordinates by myself, but I failed.
I thought it might be a solution to "just iterate" over the up- and downside and to kinda "cut of" the texture at the border, like it would be if the mesh were a cube. The mesh has about 350 Faces, I probably could be able to set the corner vertices but it would be nice if the uv-coordinates of the vertices in between could be calculated - but I have no idea how to to this. I do not mind about the side where cylinder is cut off, because you will not see it at the end.
thank you so much!
The CSG library I'm maintaining preserves UV coordinates from cut geometry.
https://github.com/manthrax/THREE-CSGMesh
http://vectorslave.com/csg/CSGDemo.html
http://vectorslave.com/csg/CSGShinyDemo.html
#JonasOe
I'm kinda new in Three js and I've been struggling with this for a while.
I have a 3d model facing a certain direction.
There is also a sphere around it and before moving the mesh, I want to animate it's rotation so it will face specified sphere.
So far I managed to get the angle of rotation but I suppose that is not the way to go
this is what I use for rotating the object towards a specified point:
if(movementTarget) { playerModel.lookAt(movementTarget); }
and this is the content of the
movementTarget = {x:154,y:55,z:35};
seems like the model is not actually orienting towards the sphere, but an empty spot, not sure what is the issue
I have managed to solve the issue, the coordinate system had a general variable which amplified the distance between the objects, by calling lookAt() function, the camera was oriented in the correct direction, but since the corrdinates Were not multiplied since they came straight from the server.
Has anybody used ThreeJS StereoEffect and Raycaster together for collision detection (in stereo view). In standard full screen view I can easily check if a Vector2 in the middle of the screen colides with an object in my scene. When I switch on the stereo effect I in effect get 2 scenes, and the collision detection stops working, but I am not really sure how to proceed. Should I create two new vector2d objects, one for each view - help :) ...
It's a bit late, but ...
I encountered a similar problem, I eventually found the reason. Actually in StereoEffect THREE.js displays the meshes on the two eyes, but in reality is actually adds only one mesh to the scene, exactly in the middle of the line left-eye-mesh <-> right-eye-mesh, hidden to the viewer.
So when you use the raycaster, you need to use it on the real mesh on the middle, not the illusion displayed on each eye !
I detailled here how to do it
Three.js StereoEffect displays meshes across 2 eyes
Hopes it solves your problem !
You can use my StereoEffect.js file in your project for resolving problem. See example of using.
How do you make a mini-cam or mini-map using three.js?
Two camera views. One mini-map "mini-cam" - top right corner (see image below), and the main camera view should span the rest of the scene (the rest, without the border in image below).
N.B. This actually can't quite be done via the viewport method, as the scene shouldn't be cropped off by the x-dimensionality, but should stretch out.
I have created a working example of a scene together with a minimap at:
http://stemkoski.github.io/Three.js/Viewports-Minimap.html
I don't understand your N.B. about not able to be done using viewports; as you'll see in the code at the website posted above, if you use for example an orthogonal camera positioned above the scene, you can set the left/right/top/bottom values so that the entire scene is included in your render, you just have to be careful about the height-to-width ratio so that your scene doesn't appear stretched.
On the other hand, if you're looking to go to the render-to-texture route, I have a relevant example at http://stemkoski.github.io/Three.js/Camera-Texture.html but as yaku mentioned in his response, you will have to update the position of the plane mesh so that it follows both the camera position (offset by some amount) and also rotation so that it always faces the camera. Due to the more complex nature of this approach, I really recommend the viewport method.
You can make a plane geometry (normal 3D object, and it actually doesn't need to be a plane, any shape goes) representing the minimap, and add it to camera so it follows the camera movement and is always visible.
Then use "Render to Texture" method to render the minimap and slap the texture to the plane "container".
There are render to texture examples around the net, SO, as well as in the Three.js examples folder, those should help get you started with that.
THREE JS, can often seem angular and straight edged. I haven't used it for very long and thus am struggling to understand how to curve the world so to speak. I would imagine a renderer or something must be changed, but the idea is to take a 2d map and turn it into a simple three lane running game. However, if you look at the picture below from another similar game, how can i achieve the fish eye effect?
I would do that kind of effect on per-vertex base depending on the distance from the camera.
Also, maybe a bit tweaked perspective camera with bigger vertical fov would boost up the effect of the "curviness".
It's just a simple distortion effect that has been simulated in some way, it probably isn't really curved. Hope this helps.
I'm sure there are many possible different approaches... Here's one that creates nice barrel distortion effect.
You can do something like that by rendering normal wide angle camera to a texture, then project it to a lens-shaped plane (a sphere even), then the actual on-screen render is from a camera pointing to that.
I don't have the code available ATM, but I should be able to dig it up in few days if interested. Or you can just adapt from the three.js examples. Three.js includes some postprocessing examples where the scene is first rendered into a texture, that texture is applied to a a quad then photographed with ortographic camera. You can modify such an example by changing the ortographic camera to a perspective one, then distorting/changing the quad to something more appropriately shaped.
Taken to extremes, this approach can produce some pixelization / blocky artifacts.