CODEWITHSUNDEEP
three.js3d
Richard Hill
Richard Hill

Reputation: 31

Viewing arbitrary geometry in THREE JS

I have to load 3 different types of geometry ( cubes, lines and points) from csv files into a scene add a camera and lights to look at it.

Sounds quite easy but I’m struggling with points and positioning to point collection in the Center of the scene.

I’m looking for some pseudo code that outlines the approach you would take to achieve this regardless of the geometry.

I’ve got this working with cubes , but points and lines I’m struggling with.

A rough idea of the process I am using currently is -:

  1. Perform the import
  2. Wrap the imported geometry in a group
  3. Position group at origin
  4. Creat camera and point at origin

Welcome any ideas.

Rich

Upvotes: 1

Views: 75

Answers (1)

Mugen87
Mugen87

Reputation: 31086

A typical approach is to compute the AABB for the geometry and use it to center the geometry at the origin. The typical code in three.js for this looks like so:

const aabb = new THREE.Box3().setFromObject( object );
const center = aabb.getCenter( new THREE.Vector3() );

object.position.x += ( object.position.x - center.x );
object.position.y += ( object.position.y - center.y );
object.position.z += ( object.position.z - center.z );

If you need a more complete solution that automatically configures the camera and controls (THREE.OrbitControls) with optimal parameters, check out the code from the following three.js based glTF viewer:

https://github.com/donmccurdy/three-gltf-viewer/blob/691ca91fddb69b6e1ba3d3a49753142e38082ef7/src/viewer.js#L218-L247

three.js R108

Upvotes: 2

Related Questions