very basic question about position

Questions
1

Hi threejs community. Using this code, I expect sphereGeometry as left side and boxGeometry as right side. But, they are rendered on opposite side. Could you tell me why ?

I think in case of camera from (0, 0, -1000) ----> to (0, 0, 0),

  • X positive direction as right side
  • Y positive direction as up side
<html>
<head>
<meta charset='utf-8' />
<script type='importmap'>
{
    "imports" : {
        "THREEJS" : "https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.module.js"
    }
}
</script>
</head>
<body>
<script type='module'>

import * as THREE from 'THREEJS';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 0, -1000);
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.up.set(0, 1, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 });

// sphereGeometry (expect left side)
const sphereGeometry = new THREE.SphereGeometry(50, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -150;
scene.add(sphere);

// boxGeometry (expect right side)
const boxGeometry = new THREE.BoxGeometry(100, 100, 100);
const box = new THREE.Mesh(boxGeometry, material);
box.position.x = 150;
scene.add(box);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

</script>
</body>
</html>
2

to have the sphere on the left, and box on the right,
replace

camera.position.set(0, 0, -1000);
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.up.set(0, 1, 0);

with

camera.position.set(0, 0, 1000);

or

camera.position.set(0, 0, -1000)            
camera.up.set(0, -1, 0)
camera.lookAt(0, 0, 0)

or

camera.position.set(0, 0, -1000)            
camera.lookAt(0, 0, 0)
scene.scale.x = -1
1 Like
3

Thank you for your advice. I appreciate to you.

If my understanding in incorrect, please point it out.
In my understanding, the axes of threejs is based on right-hand rule.

  • X-axis : right of the display is positive direction
  • Y-axis : top of the display is positive direction
  • Z-axis : depth direction of the display is positive direction

But, in my case, axis is not based on right-hand rule.

  • X-axis : right of the display is negative direction

Is this spec of threejs ?

camera.position.set(0, 0, 1000);

Yes, but in this case, axis is not based on right-hand rule.

  • Z-axis : depth direction of the display is negative direction

camera.position.set(0, 0, -1000)
camera.up.set(0, -1, 0)
camera.lookAt(0, 0, 0)

Yes, but in this case, axis is not based on right-hand rule.

  • Y-axis : top of the display is negative direction

camera.position.set(0, 0, -1000)
camera.lookAt(0, 0, 0)
scene.scale.x = -1

I may use this.
Please let me know if my understanding is right.

In my understanding, the axes of threejs is based on right-hand rule.

4

Chat GPT said :

In Three.js, as well as in many other 3D graphics libraries, the coordinate system is typically set up as follows:

  • Right direction of the screen: Positive direction of the X-axis
  • Upward direction of the screen: Positive direction of the Y-axis
  • Backward direction into the screen: Positive direction of the Z-axis

This coordinate system is known as the “right-hand coordinate system” and is the default used in Three.js. In the right-hand coordinate system, if you curl your fingers, your right thumb represents the X-axis, your index finger represents the Y-axis, and your middle finger represents the Z-axis. In this case, the middle finger extends back into the screen, which corresponds to the positive direction of the Z-axis.

Therefore, in Three.js, the direction going back into the screen is the positive direction of the Z-axis. This indicates the direction in which objects move away from the screen in the 3D space. Conversely, the direction coming towards the screen is the negative direction of the Z-axis.

5

You are confusing how it is displayed in the camera view, with where it is positioned in the scene coordinates.

In Threejs (and WebGL) the rule describes the positive direction of the axes when looking in the direction (0,0,-1) and up (0,1,0).
Not the direction depending on your current camera frustum settings.

What you name your axes is also another story.

You can change the camera frustum any time, but it doesn’t change the coordinate system.

When you change the camera position, direction, and its up vector,
you are just looking at the coordinate system from a different perspective.

Make the right hand rule with your hand, now turn it around so your index finger is now pointing at your face. Your head is the camera, but the direction of your fingers reference each other didn’t change.

Use my first suggestion, nearly every example you find on the internet does it this way.
The default camera direction is looking down the Z axis. (0,0,-1). So thats why you position it positive Z if you want to see (0,0,0) without changing any other settings.

Don’t use my second suggestion, nobody does this. I just changed the direction of the camera and flipped it upside down so the sphere is on the left. Its over engineering.

Definetly don’t use my third suggestion, it was a joke, you are just creating a whole lot of extra work for yourself, especially if you try to integrate a physics engine, or export/import a glb from blender into threejs. “It doesn’t work! why is it mirrored?”

Here is an example to help you visualise. You can slide the box on the axes, and look at it from different directions by using your mouse to rotate the camera around 0,0,0.

The axes helper green line is positive Y reference 0,0,0
The axes helper red line is positive X reference 0,0,0
The axes helper blue line is positive Z reference 0,0,0

2 Likes
6

Thank you for your explanation very much. I found I misunderstood about right-hand rule.

7

Thanks to you, my application, named stick-figure, development was complete.
https://pj-corridor.net/stick-figure/stick-figure.html
If needed for your pptx material, please use it ^^
image

image
image378Ă—509 28.7 KB

1 Like