Coordinate system issue in three.js

Question

I am working on a program in three.js. So I have a particle system loaded from a LAS file. It has a coordinate system. I have added a functionality which enables user to click on a particle, and it would add a bounding box to the scene. My aim is to find which particles lie inside this bounding box.

Code for adding bounding box at point p clicked by user:

var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 
   0xffff00,wireframe: true } );
var cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
cube.position.x = p.x;
cube.position.y = p.y;
cube.position.z = p.z;
scene.add(cube);

But I am facing an issue. The box created has a different coordinate axis orientation than particle system. It's Y axis is oriented in direction of particle system's Z axis. This causes containsPoint method to give wrong answer.

How to solve this issue?

Posted on three.js forum too:discourse.threejs.org/t/coordinate-system-issue-in-three-js/… — Mandroid
– Mandroid, Commented May 1, 2018 at 12:30
maybe this comment is helpful: github.com/potree/potree/issues/31#issuecomment-41888962 — gaitat
– gaitat, Commented May 1, 2018 at 13:36

Mugen87 · Accepted Answer · 2018-05-01 13:38:16Z

1

Try this:

var e = new THREE.Euler( - Math.PI / 2, 0, 0 );
p.applyEuler( e );

This will apply a rotation of 90 degrees around the x-axis or a conversion from Z-up to Y-up.

answered May 1, 2018 at 13:38

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Coordinate system issue in three.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related