I want to achieve a very simple reflection. I have a object in scene and floor underneath it. Main camera looks at the scene. And the reflection camera looks underneath. Problem is i cannot figure out how to position the reflection camera and what should be its up vector. maincamera and reflectioncamera will have the same lookat.
Can anyone help?
Related
I am using THREE.MeshLine from https://github.com/spite/THREE.MeshLine to try and draw lines in three.js. The lines appear to work when using a perspective camera to view the scene as the demos showed, but when I use an orthographic camera which is the camera I need to use for my project, the line is distorted.
For now, I am trying to make sure that the line works by creating a sin wave, but with the ortho camera, it looks like this:
Why does the mesh not display correctly with an orthographic camera? Are there any ways to fix this or achieve orthographic lines with a thickness in three.js?
This is a know issue, see https://github.com/spite/THREE.MeshLine/issues/118.
The wide line implementation of three.js does support orthographic cameras, though.
I need to get the camera up direction and i've tried many ways with no luck, i'm not an expert of quaternions so i'm doubting i did it right.
I've tried:
camera.up
camera.up.applyMatrix4(camera.matrixWorld);
new THREE.Vertex3(0,1,0).applyMatrix4(camera.matrixWorld);
camera.up.normalize().applyMatrix4(camera.matrixWorld);
after this i create two planes passing by two points of my interest, and add the plane helper to the scene and i can see they are very far from where i was expecting them. (i'm expecting two planes that looks like the top and bottom of the camera frustum).
P.s. the camera is a shadow camera of a directional light so an orthographic camera, and i manipulate the directional light position and target before doing this operation, but i've called updateMatrixWorld on the light, on it's target and the camera, on the camera i've called also updateProjectionMatrix... still no results
I've made a sandbox to see what i've tried till now, and better visualize what i want to achieve:
https://codesandbox.io/embed/throbbing-cache-j5yse
once i manage to get the green arrow to point to the top of the blue triangle of the camera helper i'm good to go
In the normal render flow, shadow camera matrices are updated as part of rendering the shadow map (WebGLShadowMap.render).
However, if you want the updated matrix values before the render, then you'll need to update them manually (you already understand this part).
The shadow camera is a property of (not a child of) the DirectionalLight. As such, it doesn't follow the same rules as other scene objects when it comes to updating its matrices (because it's not really a child of the scene). Instead, you need to call the shadow property's updateMatrices method (inherited from LightShadow.updateMatrices).
const dl = new THREE.DirectionalLight(0xffffff, 1)
dl.shadow.updateMatrices(dl) // <<------------------------ Updates the shadow camera
This updates the shadow camera with information from the DirectionalLight's own matrix, and its target's matrix, to properly orient the shadow camera.
Finally, it looks like you're trying to get the "world up" of the camera. Personally, I'd use the convenience function localToWorld:
let up = new THREE.Vector3(0, 1, 0)
dl.shadow.camera.localToWorld(up) // destructively converts "up" from local-to-camera into world coordinates
via trial and errors i've figured out that what gave me the correct result was:
calling
directionalLight.shadow.updateMatrices(...)
and then
new THREE.Vector3(0,1,0).applyQuaternion(directionalLight.shadow.camera.quaternion)
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
I've been struggling with an application where I'm trying to set the camera rotation initially so when the scene is loaded, you'll be looking where we want you to look.
The backstory, I'm creating a panorama viewer where the panorama is applied to a mesh with a sphere geometry.
The problem I'm having is I don't seem to be able to set the camera rotation. I've tried multiple attempts, but none have been working. I attempted setting the camera rotation after creating the camera, and I tried applying the target of my orbitcontrols and setting the object rotation in the orbit controls. I haven't had any luck yet with just setting an initial camera rotation.
I'm really hoping at this point that this is due to something minor that I'm over looking.
Here's a source: http://www.freeptools.com/mapster/testing-360s2.php
It shows the camera itself AND the orbit controls object. It also shows what their target is I'm setting, and what they really are. So far I haven't been able to get this to accept anything I give it.
THREE.js OrbitControls take over the camera completely, so you should not use that in conjunction with updating camera rotations.
Instead, OrbitControls has methods that help you do this: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js
orbitControls.rotateLeft( angle );
orbitControls.rotateUp( angle );
In addition, you can move orbitControls.target around (it's a THREE.Vector3) and the camera will just look to that direction.
I have a fixed camera at 0,0,0 on my OpenGL scene and have a model.
The model is translated and rotated, and would like to move it on the right of my camera. However if I translate to x, it will translate towards x of the model and not of the camera.
How can I overcome this situation ?
Change the order in which glRotate and glTranslate are called. First rotating and then translating will look like you move the camera around. First translating and then rotating looks like you're looking at a table that spins around its axis with your model on top.