Attach a light to a camera

[pablo]

Hi,

 

I'm trying to create a model viewer similar to thingiview

https://github.com/tbuser/thingiview.js

demo:

http://n0r.org/thingiview.js/examples/client_side_ajax.html

 

This is what I'm trying to do:

- Load a babylon file (the model doesn't have a camera and light).

- Create a camera. Set the distance relative to the model size so all models will look like they are the same size.

- Create a light and attach it to the camera so the model will be always in the light.

- Allow the user to rotate around the object and zoom.

 

How can I attach the light to the camera so when the camera rotates, the light rotates with it?

Is there other to do get the same effect with lights?

Is it possible to zoom when using ArcRotateCamera? Maybe using the mouse wheel and pinch touch gestures?

Is there a way to automatically choose the camera distance so all models will start with reasonable zoom level?

 

Thanks

var canvas = document.getElementById("renderCanvas");var engine = new BABYLON.Engine(canvas, true);BABYLON.SceneLoader.Load("", "model.babylon", engine, function (scene) {  scene.executeWhenReady(function () {    var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);    scene.activeCamera.attachControl(canvas);    engine.runRenderLoop(function() {      scene.render();    });  });}, function (progress) {  // To do: give progress feedback to user});

[Dad72]

To attach, you can use "parent". Your light will follow the movements of the camera.

camera.parent = light0;

For the zoom with the rotating camera, you must increase the radius between the camera and the target

      if(event.delta > 0) {            camera.radius += 2; //Distance > between the camera and the target        }        else if(event.delta < 0) {                 camera.radius -= 2; //Distance < between the camera and the target        }   

To choose the distance of the camera automatically

camera.target = new BABYLON.Vector3(mesh.position.x, mesh.position.y + 5, mesh.position.z);//The camera looks at the target camera.radius = 30; //Distance between the camera and the target

[pablo]

Thank you for your answer.

camera.parent = light0;

Shouldn't it be the opposite?

I thought that the camera rotates and the light should follow it.

if(event.delta > 0) {  camera.radius += 2; //Distance > between the camera and the target } else if(event.delta < 0) {       camera.radius -= 2; //Distance < between the camera and the target }

Where should I put this code? Do I need to override the controls?

With my original code, zooming with the mouse wheel works in IE and Chrome but has no effect in FF. That's why I thought it's not implemented.

Is this a bug?

camera.target = new BABYLON.Vector3(mesh.position.x, mesh.position.y + 5, mesh.position.z);//The camera looks at the target camera.radius = 30; //Distance between the camera and the target

My model is a pdb file of a molecules with several meshes. What should I use as the target?

Is there a top level mesh or a way to get the center of the bounding box?

scene.meshes gives me an array of meshes.

[Dad72]

For the zoom you must create an event with the Scrool of your mouse.
The files for Babylon, are .Babylon (you must convert your file in .Babylon)
yes, it is ligth.parent = camera; for that the light follows the camera.

[unltdsoul]

I realize this is an 'old' post,   but, i am trying to do something similar,  i want to attach an object to the camera

but, whenever i make the    object.parent = camera,   the object no longer displays.

 

To illustrate I've modified a PlayGround    

http://www.babylonjs-playground.com/#1W3CLH#16

 

the playground has 2 boxes,  a parentBox and childBox

in the original file line #13 was:

 

childbox.parent = parentbox;

 

works fine,.

 

BUT   when I comment out line and add:

 

childbox.parent = camera;

 

the childBox no longer displays.     Did this feature of using the camera as a parent,  get taken out  or broken?   I am using Babylon 2.3 alpha

 

Otherwise, how do i get an object to track with the camera?

 

[RaananW]

Setting the camera to be the object's mesh means that the object will get the position and rotation of the camera as its parent position and rotation and will position the mesh relatively to those parameters.

To illustrate - he is the object (adding 40 in the Z axis) - http://www.babylonjs-playground.com/#1W3CLH#17

The box will always be 5 units higher and 40 units deeper than the camera.

If you want the (Arc rotate) camera to follow the object, set it as the camera's target:

http://www.babylonjs-playground.com/#1W3CLH#18

Now the object in the center of the camera will be the childbox.

 

If you want to follow a moving object, you can use the follow camera (http://doc.babylonjs.com/tutorials/05._Cameras , search for follow camera).

[unltdsoul]

RaananW   

"

 

Setting the camera to be the object's mesh means that the object will get the position and rotation of the camera as its parent position and rotation and will position the mesh relatively to those parameters.

 

Thanks for the quick reply.    I was thinking it must have been something like that, but, in my scene (local one i'm working on, not the playground) i didn't see the object anywhere,   must have been hidden somewhere.  So, it inherits the camera position, etc.    Ok.   What I am making is a simple under-water effect.  I have 'water' in my scene, which is a blue tinted transparent plane animated with a shader, etc,  but, when the camera goes underwater the river bed is no longer blue - water tinted, since the water effect has no volume.   So when the camera moves below the water line i will put up a blue-tint transparent plane in front of it, like putting a colored gel in front of the camera.  As the camera moves under the water it will be seeing everything with the blue tint.   It's not an ideal effect, but better then nothing,  the other would be to turn on a blue fog when the camera goes under...   but with this i can position the tint to where it starts at the water line so when the camera is seeing both above and below there will be tint

 

Thanks again. 

[RaananW]

Yei, water effect! - http://www.babylonjs-playground.com/#C1JSV (click on your mouse for on-off action)

I like the idea, I would add bump map of water drops and change the color according to depth. Would be wonderful to see the final result!!!