How to rotate light with camera in Three.js & OrbitControls.js - three.js

I tried to use camera.add(light),but it doesn't work...it didn't show..
Actually, i just want to use orbit control on only few things in the scene, and rotate others with camera, but i don't no how to do that with OrbitControls.js
😂please

Related

Three.js Line Using Orthographic Camera

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.

Circles on click using WebGL renderer in three.js

I want to place a circle on an object when you click on it.
I updated this example to work with webGL renderer (I basically changed THREE.SpriteCanvasMaterialto THREE.SpriteMaterial), but not only is the circle now a square, it also glitches with the surface of the object. Here's a JSFiddle that demonstrates my problem (click an object to test).
I found some similar questions on stackoverflow, but I can't seem to make it work in my example. Any tips?
you are adding sprites into a moving 3d scene, easy way to do what you want is to add spheres
var particle = new THREE.Mesh(new THREE.SphereGeometry(10,10,10),
new THREE.MeshBasicMaterial({color:0xff0000}) );
particle.position.copy( intersects[ 0 ].point );
scene.add( particle );
if you want real flat circles you will have to create a circular geometry and align it correctly to the object so it sits atop of the rectangle wall and if you want circles that do not deform when object is turned you will need some custom shader stuff

Why can't I set the camera rotation?

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.

Three.js: add light to camera

I want to move and rotate the camera but keep a PointLight on the same position relative to the camera. I've read a bunch of threads saying that you can add the light object to the camera instead of the scene. Like so:
pointLight = new THREE.PointLight( 0xffffff );
pointLight.position.set(1,1,2);
camera.add(pointLight);
However this does not seem to work for me. Instead I now when the camera changes set the light's position by applying the cameras matrixWorld to my desired relative light position. This works, but adding the light to the camera seems like a cleaner solution.
I'm a doing something wrong or is adding light object to the camera deprecated?
Thanks!
You need to add the camera to the scene if the camera has a child object, such as a `PointLight'.
scene.add( camera );
three.js r.68

Three.js default rotation with trackball control

I have a scene with several meshes in three.js The distance between the meshes is fixed. The problem is that the whole group is upside down. My first thought would be to rotate the camera over the z-axis with pi. This does't work because the trackball controls that I used reset this rotation. Is there a way to override the default rotation?

Resources