I have a scene with some 3d Objects when you drag the scene objects look stretched. See the image
I know that this is the normal behavior But I have a client with this weird requirement, that the objects should move but without the distortion on the shape.
Is there way to do that?
That’s due to the camets fov. You can change it through the camera component
Related
I need a way to render a sprite always over top of a 3DObject, but it also must disappear behind it when the camera is rotated.
I first tried disabling the depth-buffer write but this will always render the Sprite in front.
Is there a way to hide it when its behind, but prevent clipping with the Object?
Edit 1:
The Problem is not exactly about z-fighting because the depthbuffer values of the sprite and the object are not equal.
The Sprite is a Billboard, so it will always face the camera, but it clips with the object, when rotating the camera.
Thank you for your help
I'm working with an orthographic view in three.js/WebGL renderer, and I want a magnifying glass that tracks with the user mouse. I'm looking for the best way of doing this that's efficient.
When working with html5 canvas raw commands, this was easy: I simply defined a circular clip region, zoomed my coordinates, and re-drew the whole scene. With 3d objects, it's less obvious how do to it.
The method I've found so far is to do the following:
Define a second camera that looks into the zoomed region. Set the orthographic clip coordinates to be small so that it doesn't need to do much work
Create a THREE.WebGLRenderTarget
Tell the renderer and all my line textures that the resolution is about to change
Render the scene into the RenderTarget
Add a CircleGeometry as a MeshObject at the spot at the mouse position (in world coordinate but above the rest of the scene, close to the camera). Call this the lens.
Give the lens the WebGLRenderTarget as a texture.
Go back to my default camera, reset all my resolution parameters, and redraw the scene with the 'lens' object added.
This works (see image below) but I'm worried about parts of it:
I have to render twice per frame
Lines don't draw well, because the resolution problems. I have to keep track of all materials that need to know screen resolution and update all of them twice per screen render.
Related problems:
I want to overlay some plot axes on top of this, and possibly gridlines. These would change as the view pans. I'm not sure if I should make these 3d objects, or do it in a 2d canvas context I lay overtop.
I want to overlay some plot lines, and have them show up sensibly in the zoomed view. "Sensible" here is hard to figure out: I don't want them too fat in the zoomed view, but I also don't want to scale them up as much as the image detail (which is being rendered as a texture onto Plane objects behind).
This is a long post, but I'm still new to three.js and looking for good ideas.
I am working on an aframe project where 3D objects are loaded from .obj files. However the raycaster wouldn't work with the imported objects. I suspect the reason is that unlike built-in geometries, these imported objects don't have proper collider set up. Is it possible to add mesh colliders to a generic 3D object, like in Unity? Or is it for some other possible reasons that the raycaster won't work on these objects?
Meshes do work with the raycaster so if you have issues 2 quick solutions:
make sure the mesh is indeed properly size and centered. Chances are it's not and the bounding box is incorrect so you have to look in specific parts of the mesh to make it work. Using the inspector allows to see the bounding box. You can then use a 3D modeling software like Blender to fix the mesh.
the bounding box might feel too small for natural interaction, you can then add an invisible transparent object e.g. a sphere or box that will then change with they raycaster. This solution only makes sense if don't mind imperfection on the volume.
Also make sure there is no object between the origin of the raycaster and the mesh! It's a silly problem but sometimes we forget that we add/remove object by making them transparent and... they prevent the raycaster to interact with the object behind.
PS: if you want a collider in addition to the raycaster there is the aabb-collider component.
I would like to create an object into the center of a scene (there is nothing else) in three.js and I need controls. I am not want to use Orbit or Trackball controls.
So the question is which way is more performance: rotate the camera around the object or rotate the object?
In general, and I don't really need to say this, fewer operations yields better performance.
For your simple example case...
If you have a camera, a light, and a single object, then moving the object will be faster. Even if you parent the light to the camera, there would be more matrix operations to move the camera/light.
But that's where it ends.
If you have more objects than you do camera+lights, then it's better to rotate the camera and lights around the object(s). This is the approach used by most controls (including TrackballControls and OrbitControls) because you almost always have more scene objects than cameras+lights.
Recommendation: Unless you're never going to use your control for scenes with more than one object, rotate the camera around the objects. Just watch out for gimbal lock.
I have a large terrain scene with many objects that cast shadows on the terrain. It seems I need multiple light sources to achieve good shadow resolution.
I will probably need to edit the source code to make a particular light affect one object in the scene only so that it only casts shadows from that one light.
How do I edit the shadows SRC in THREE.JS to acheive this?