We Keep Coding

Overlap same scene on the side of existing main scene

I have some robots running in my game scene. Now I want to switch the camera to the robot's first person view and show it in a small window on the side on top of the existing scene.
I have tried using multiple renderers.
I have been looking everywhere for it but so far quite unsuccessful.
Thank you.
P.S. For some reason renderer.setViewPort(0,0,15,20) doesn't seem to be working.

Found the fiddle to answer my question:
https://jsfiddle.net/qwb39spx/
//inset scene
renderer.clearDepth(); // important!
renderer.setScissorTest(true);
renderer.setScissor(20, 20, insetWidth, insetHeight);
renderer.setViewport(20, 20, insetWidth, insetHeight);
renderer.setClearColor( 0x222222, 1 );
camera2.position.copy(camera.position.clone().normalize().multiplyScalar(distance));
camera2.quaternion.copy(camera.quaternion);
renderer.render(scene, camera2);

How to add an overlay-section using three.js and orbit-controls which reacts to movement of main view?

I want to add a section in one corner of my main view in which I display a small version of the main view.
I am programming a webpage using JavaScript with three.js. I have a main view window in which I display some geometries. There are rotatable and movable using OrbitControls.
In the corner of my main view I want an separate section, in which I can display a small cube, which rotates the same way my main-view rotates. But I shall not zoom in or out if I zoom the main view.
var orientationGeometry = new THREE.Mesh( geometry, material );
camera.add( orientationGeometry );
// in animate function:
orientationCube.rotation.x = controls.getPolarAngle();
orientationCube.rotation.y = controls.getAzimuthalAngle();
This rotates the small cube correctly and by adding this cube as a child to the camera it stays fixed on the screen. But when I zoom in or out this small Box as well zooms away from the camera.
Is there a way to make an extra section like shown in the attached image?

To render a second viewport on the screen you can enable WebGLRenderer.ScissorTest, set the desired scissor, scale the viewport accordingly and render the scene again. Don't forget to clearDepth() or nothing will get rendered.
Now, in order to get a different camera behavior, you need to add a second camera to the scene and update it depending on your needs. If you want it to rotate and move just like the full-screen camera, you need to update those parameters.
In order to keep a fixed zoom state, you can get the normalized position of the camera and multiply by the set distance you want to use.
function animate() {
// render full scene.
// ...
// setup scissor viewport.
renderer.clearDepth(); // important!
renderer.setScissorTest( true );
renderer.setScissor( 20, 20, insetWidth, insetHeight );
renderer.setViewport( 20, 20, insetWidth, insetHeight );
// update second camera.
camera2.position.copy( camera.position );
camera2.position.normalize().multiplyScalar( distance );
camera2.quaternion.copy( camera.quaternion );
// render small scene.
renderer.render( scene, camera2 );
renderer.setScissorTest( false );
}
Here's a working example https://jsfiddle.net/qwb39spx/

Three.js Move object forward without translateZ

Like in lots of other similar questions, I want to move an object forward in three.js based on its rotation. The difference is, I can't use object.translateZ. This is because I'm using a physics simulator and it will mess up if I update the object like that. Here is an example fiddle of my problem. Feel free to play around with my fiddle and add your updated version to your answer.
I would like the cube to move forward by updating mesh.position.x and mesh.position.z based on mesh.rotation.y.
To keep in mind, I've sometimes realized that three.js rotations are a little weird some times when accessing them using mesh.rotation.y.
Thanks!

I would suggest using the mesh.getWorldDirection() to get a direction where you want to move your mesh. Then you can multiply it with a scalar to adjust movement speed.
direction = mesh.getWorldDirection();
mesh.position.add(direction.multiplyScalar(moveSpeed));
Fiddle: https://jsfiddle.net/k1swrxjr/1/
Good luck!

To move your mesh simply increment the value of the position in which you want your mesh to go in you animate() function instead of init function, example as follows:
function animate() {
mesh.position.x += 0.1;
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
This example code will increase x position of your mesh by 0.1 every time animate() is run.

Conflict of LookAt and controls in three.js

I am preparing an application which shows a 3D model of a building and it works fine now. I was trying to control "PerspectiveCamera" using LookAt. However, I noticed LookAt does not work when I have the following line in animate function.
controls.update(1);
Therefore, I disabled this line (see below):
function animate(time) {
requestAnimationFrame( animate );
//controls.update(1);
TWEEN.update(time);
renderer.render( scene, camera );
}
However, I lose my mouse control (cannot zoom in/out) when I disable that line. If I enable that line , LookAt does not work properly.
Any suggestion? Thanks.

Just call camera.lookAt() in the animation loop if you're using the controls. That will get it to re-point to whatever you want to lookAt() after you've moved things around with the controls.

Pausing/turn off three.js TrackballControls

I'm using TrackballControls to rotate the camera in my scene using the mouse but also need to be able to rotate individual objects in the scene using the mouse. I'd like to be able to toggle on/off TrackballControls to accomplish this. However, so far there are issues with everything I've tried. This is how my controls are defined:
var controls; // global
inside init():
controls = new THREE.TrackballControls( camera );
controls.addEventListener( 'change', render );
and finally in animate():
controls.update();
So far, I've tried:
Removing the event listener like this: controls.removeEventListener( 'change', render ); which didn't change anything; controls worked the same as it always has.
Conditionally updating the controls like this:
(global)
var enableControls = true;
(in animate)
if (enableControls == true) {
controls.update();
}
and then toggling enableControls using a KeyDown event. This seemed to work, because when enableControls was false I could rotate an object without moving the camera. However, when I update again, the camera moves significantly (it moves to where it would have been based on my clicking/dragging done while I wasn't updating).
I tried both of these separately and in conjunction with one another with no luck.

To disable TrackballControls, all you need to do is set
controls.enabled = false;
Also, you likely do not need controls.addEventListener( 'change', render ); since you are calling controls.update() in the animation loop.
three.js r.67