Rotating camera independently from its parent in Three.js

Question

Rotating camera independently from its parent in Three.js

I have a scenario where an Entity is traversing a CatmullRomCurve3 path, moving left with the left or down arrow keys and right with the right or up arrow keys.

Initially, I encountered an issue where I wanted the Entity to face perpendicular to the path at 90 degrees instead of in the same direction as the path. You can refer to my code for this scenario here. The problem was resolved with this solution.

In essence, I had to incorporate the following code to rotate the entity:

entity.lookAt((point2).sub(point1).applyAxisAngle(axis, -Math.PI * 0.5).add(point1));

Although the entity now rotates correctly, a new issue arose where the camera was not aligning with the entity or moving along with it (I desired a third-person perspective of the entity); however, attaching the camera as a child of the entity solved the problem!

The Current Issue

Now, my objective is to have the entity initially face 90 degrees away from the path, but upon pressing the left or down arrows, I want the entity to face left (along the path as originally intended), and face the opposite direction when the right or up arrows are pressed.

I achieved this by utilizing some conditional statements in the render loop to adjust the value of -Math.PI * 0.5 to either -Math.PI * 2 or -Math.PI * 0.5 for the left and right directions based on the key pressed.

However, this adjustment also influences the camera, which shares the updated lookAt value since it is linked to the entity. I want the camera to maintain its position consistently (facing 90 degrees from the path, just like the entity when stationary).

How can I prevent the camera from rotating/moving/changing its lookAt orientation when the entity rotates?

It seems that any modifications I make to the camera have no effect, as it remains fixed to the entity's orientation.

Appreciate your assistance.

javascript three.js

Answer 1

Answer №1

I believe I have comprehended your inquiry correctly:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 20, -20);
camera.lookAt(0, 0, 0);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var grid = new THREE.GridHelper(300, 30);
grid.position.setZ(100);
scene.add(grid);

var points = [
  new THREE.Vector3(-80, 5, 35),
  new THREE.Vector3(-80, 5, 192.5),
  new THREE.Vector3(80, 5, 192.5),
  new THREE.Vector3(80, 5, 35)
];

var curve = new THREE.CatmullRomCurve3(points);
curve.closed = true;

var curvePoints = curve.getPoints(200);
var geomCurvePath = new THREE.BufferGeometry().setFromPoints(curvePoints);
var matCurvePath = new THREE.LineBasicMaterial({
  color: 0xff0000
});
var CurvePath = new THREE.Line(geomCurvePath, matCurvePath);
scene.add(CurvePath);

var group = new THREE.Group();
scene.add(group);

group.add(camera);

var pointerGeom = new THREE.ConeGeometry(4, 20, 4);
pointerGeom.translate(0, 10, 0);
pointerGeom.rotateX(Math.PI * 0.5);
var pointer = new THREE.Mesh(pointerGeom, new THREE.MeshNormalMaterial());
group.add(pointer);

btnLeft.addEventListener("click", function() {
  turn(Math.PI * 0.5)
});
btnRight.addEventListener("click", function() {
  turn(-Math.PI * 0.5)
});

function turn(angle) {
  pointer.rotation.y += angle;
}

var p1 = new THREE.Vector3();
var p2 = new THREE.Vector3();
var lookAt = new THREE.Vector3();
var axis = new THREE.Vector3(0, 1, 0);
var percentage = 0;

render();

function render() {
  requestAnimationFrame(render);
  percentage += 0.0005;
  curve.getPointAt(percentage % 1, p1);
  curve.getPointAt((percentage + 0.001) % 1, p2);
  lookAt.copy(p2).sub(p1).applyAxisAngle(axis, -Math.PI * 0.5).add(p1); // look at the point 90 deg from the path
  group.position.copy(p1);
  group.lookAt(lookAt);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

#buttons {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="buttons">
  <button id="btnLeft">left</button>
  <button id="btnRight">right</button>
</div>

Answer 2

I believe I have comprehended your inquiry correctly:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 20, -20);
camera.lookAt(0, 0, 0);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var grid = new THREE.GridHelper(300, 30);
grid.position.setZ(100);
scene.add(grid);

var points = [
  new THREE.Vector3(-80, 5, 35),
  new THREE.Vector3(-80, 5, 192.5),
  new THREE.Vector3(80, 5, 192.5),
  new THREE.Vector3(80, 5, 35)
];

var curve = new THREE.CatmullRomCurve3(points);
curve.closed = true;

var curvePoints = curve.getPoints(200);
var geomCurvePath = new THREE.BufferGeometry().setFromPoints(curvePoints);
var matCurvePath = new THREE.LineBasicMaterial({
  color: 0xff0000
});
var CurvePath = new THREE.Line(geomCurvePath, matCurvePath);
scene.add(CurvePath);

var group = new THREE.Group();
scene.add(group);

group.add(camera);

var pointerGeom = new THREE.ConeGeometry(4, 20, 4);
pointerGeom.translate(0, 10, 0);
pointerGeom.rotateX(Math.PI * 0.5);
var pointer = new THREE.Mesh(pointerGeom, new THREE.MeshNormalMaterial());
group.add(pointer);

btnLeft.addEventListener("click", function() {
  turn(Math.PI * 0.5)
});
btnRight.addEventListener("click", function() {
  turn(-Math.PI * 0.5)
});

function turn(angle) {
  pointer.rotation.y += angle;
}

var p1 = new THREE.Vector3();
var p2 = new THREE.Vector3();
var lookAt = new THREE.Vector3();
var axis = new THREE.Vector3(0, 1, 0);
var percentage = 0;

render();

function render() {
  requestAnimationFrame(render);
  percentage += 0.0005;
  curve.getPointAt(percentage % 1, p1);
  curve.getPointAt((percentage + 0.001) % 1, p2);
  lookAt.copy(p2).sub(p1).applyAxisAngle(axis, -Math.PI * 0.5).add(p1); // look at the point 90 deg from the path
  group.position.copy(p1);
  group.lookAt(lookAt);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

#buttons {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="buttons">
  <button id="btnLeft">left</button>
  <button id="btnRight">right</button>
</div>

Rotating camera independently from its parent in Three.js

Answer №1

Similar questions

Add some TD(s) after the td element

Utilizing Node Mailer and Sendgrid to send emails in an Angular MEAN stack project with the angular-fullstack framework generated by Yeoman

Trigger an event in Vue with specified parameters

Having trouble setting a value in a Vue.js variable

I'm encountering problems when attempting to display the image/png response from an xmlHTTPRequest. Instead of the correct data, I

Transferring information between Vue.js components via data emissions

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

When using AngularJS, encountered an issue where a view was not updating with new data from a $http request

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

Is there a way to display errors during jQuery validation?

What is the purpose of using route('next') within ExpressJS?

Retrieve all default and user-defined fields associated with contacts in the CRM 2011 system

Is there a way to retrieve the id of a jQuery autocomplete input while inside the onItemSelect callback function?

What is the method to show text on hover in angularjs?

Issues with object changes not reflecting in Vue.js 2.0 component rendering

Dynamic Image Grid Created Using JavaScript Glitches

Is it possible to replicate a stale closure similar to React's useEffect hook without the use of the useEffect hook?

How to pass data from a child component to a parent component in React applications

Utilizing the $scope variable within an event in the Google Maps API

Executing several GET requests in JavaScript