I have two SpotLights in my canvas. One is front side and the other is left side. I know how to set them but I want to know how I can get the exact position. Maybe using console.log?
itsLight.position.set(?,?,?);
The light's position is in the position attribute:
console.log(itsLight.position.x, itsLight.position.y, itsLight.position.z);
The coordinates for front side and left side depend on where you have your camera. It also depends on what kind of light it is. DirectionalLight and PointLight behave differently.
Related
I am trying to achieve movement of an object on walls, instead of only one plane. In this example, an object dragged on walls by using:
intersects = raycaster.intersectObjects([walls]);
object.position.copy(intersects[0].point);
However, with this method, the object jumps because the object's center moves to the mouse. There is a related question and helpful JSFiddle for dragging on one plane without jumpin Would you please help me to modify it for multiples planes (walls)? Thanks
After reading your comment, I think what you're looking for is you want the object to animate to the position. You can do this a few ways. The "threejs" way is to move it each frame (within the animate/update loop). You could do this with Vector3.lerp by storing intersects[0].point as your target location and lerping your object.position to it each frame. Another option is to use an animation library like animejs or gsap.
I am using the PerspectiveCamera in three.js. I want to move the camera forward and backward, so I try to use translates and it works well.
I also need to get the camera's position. But the translateZ doesn't change the position of the camera. So what does translateZ change?
All Three.js objects have a translateX, translateY, translateZ method, which changes the position along the axis by the given units. translateZ() moves it along the Z-axis. If you're not seeing any change in the camera, try using larger values, maybe you're just not noticing it because moving forward/backward is a little less obvious than moving up/down or left/right.
I'm looking for an way to give specify light for some objects.
I have added new light to object to remove shadow on it, but then, the other objects also affected by additional light, and I don't want it.
I have let the object's castShadow = false; receiveShadow = false, but it doesn't work.
When the camera is positioned with the light directions, camera will see the 'light' meshes, and at the opposite position, camera will see the dark side.
I want both sides to see 'light' meshes.
(I want to remove the shadow.)
Thanks for your help. :)
I have added new light to object to remove shadow on it, but then, the other objects also affected by additional light, and I don't want it.
What you are looking for is called "selective lighting" which is not yet supported by three.js. Check out the following issue for more information:
https://github.com/mrdoob/three.js/issues/5180
The only workaround right now is to work with multiple scenes and render passes.
When the camera is positioned with the light directions, camera will see the 'light' meshes, and at the opposite position, camera will see the dark side.
When using a single directional, point or spot light, it's normal that this setup produces a lit and unlit side of a sphere mesh. You can only avoid this by adding an additional light on the other side of the mesh, by using unlit materials or again by using different scenes with different lighting setups.
three.js R112
How to move (either move or drag n drop) three js objects(for ex. A Cube) from one div to another.
I am making divs by putting all the three js left hand side objects in one div(with one scene and perspective camera) and a different right div(with different div and camera).
[everything else other then the camera and scene is generic]
The problem i am facing is, Raycaster takes camera as input, now if i pass the left hand side camera in raycaster, only left hand side objects intersection is returned, if i pass right hand div camera, only right hand side object's intersection is returned, everything else is returned as 0,0,0.
Any other idea is most welcome.
I'm quite new to three.js and lacking some basic understanding of the coordinate systems obviously.
I have an Object3D "group" that has some children (planes). I use "group" to rotate the group of planes, which works fine. Now camera can move and parent object can rotate. One can click on the planes to select them. What I want now is to let the selected plane fly into the camera.
If I just move the plane to the camera position it flys in any direction but mostly not to the camera. Certainly because "group" seems to be the "world" for the child objects. If I move a plane along the z-axis the plane move along the z-axis of the parent.
I don't understand which coordinates I need to take (or transform) to move the plane bound to "group" in front of the camera.
Basically I demoed with three.js what famo.us did, just spent some two hours on it or so. I faked the wanted effect with an additional plane that is not grouped and which I can just move to camera without transformations. The demo is available here:
http://hwg.rattat.net/famo.html.
Would be nice if somebody could tell me how to get this working. I could still live with the fake, when I would be able to place the additional plane exactly over the selected plane.
Thanks in advance,
Christian
The question of converting local coordinates to world coordinates has been addressed at THREE.js: Calculate world space position of a point on an object . There might also be helping information at how to: get the global/world position of a child object .