How to put line in the center of scene

Questions
,
1

Hi all,
I have two dataset in 3D. I used the CatmullRomCurve3 to visualize one data in three.js.
When I change to another data, the curve will disappear. I want to put it in the center of the window.
But they seems not shown in the scene. I know the camera may be set wrong position.
So I set the camera position as same as the mean position of these points.
But the curve still not appear.

The following are my main codes:

1.Calculate the mean position (mx , my, mz) for all points

2.Create the geometry

3. Set the geometry position as same to mean position:
mesh.position.set(mx , my, mz);

4. Set the light position
light.position.set( mx , my, mz*10 );

5. Calculate fov
fov = 2*Math.atan( (max2-my) / (max3-mz) ) * ( 180 / Math.PI );

6.Set the camera position
camera.position.set( mx , my, mz);
camera.lookAt(mx , my, mz);

7. Set the scene position
scene.position.set( mx , my, mz);
scene.lookAt(mx , my, mz);

Thanks very much.

##################################

	var size = points1.length;
    var mx=0; my=0; mz = 0;	 
    for(var k=0; k < size ; k++){
            mx += points1[i].x;
		 my += points1[i].y;
		 mz += points1[i].z;
            Math.abs(points1[i].x) > max1 ?  max1 = Math.abs(points1[i].x) : null; 
		Math.abs(points1[i].y) > max2 ?  max2 = Math.abs(points1[i].y) : null; 
		Math.abs(points1[i].z) > max3 ?  max3 = Math.abs(points1[i].z) : null;  
					
     }
	 mx = mx / size;  my = my / size;  mz = mz / size; 
				
         scene = new THREE.Scene();
         curve = new THREE.CatmullRomCurve3( points1, false, "centripetal"); 

          geometry = new THREE.TubeBufferGeometry( curve, size, 2, 4, closed );
    	geometry.name = "TubeGeometry";
    	geometry.elementsNeedUpdate = true;
    	geometry.colorsNeedUpdate = true;
         
         // material
    	 material = new THREE.MeshPhongMaterial( { 
    					 color: 0xFFFFFF,//0xf4f9f9,  
    					 vertexColors: THREE.VertexColors,
    					 opacity: 1, 
    					 transparent: false,
    					 side:THREE.DoubleSide,
    					 wireframe: false
    	  }); 
    	 material.visible = true;
    	 material.needsUpdate = true;
    	 material.name = "material" + i; 
    				   // mesh
    	 mesh = new THREE.Mesh( geometry, material );
         mesh.name = "mesh" + i;
    	 mesh.position.set(mx ,  my, mz); 

        // lights
	var light = new THREE.DirectionalLight(0xbdc1c1);
	 light.position.set( mx ,  my, mz*10 );
	light.name = "drlight" ;
	scene.add( light ); 
	light = new THREE.AmbientLight( 0x5b6060 );//0x222222 0xD6EAF8
        light.name = "amblight" ;
	scene.add( light ); 

        fov =  2*Math.atan( (max2-my) / (max3-mz) ) * ( 180 / Math.PI ); 
       var camera = new THREE.PerspectiveCamera(fov, 1, mz*0.01, mz*100);
       camera.position.set( mx ,  my, mz);
       camera.lookAt(mx ,  my, mz);

      scene.add(camera); 
      scene.position.set( mx ,  my, mz);
     scene.lookAt(mx ,  my, mz);
2

I’m not sure it’s a good idea to center the camera at the center position of the curve. In this way, you will probably miss certain parts of the geometry. Instead, it might be more promising to position the camera at a certain distance and then looking exactly at the curve’s center.

You can use a similar approach like in model viewers. One of my favorite references is the gltf-viewer often seen in other threads of this forum. The idea is to compute a bounding box for your mesh and then use the AABB’s size and center to reposition your mesh and to compute optimal camera parameters. I think you can use both code snippets for your use case. In this way, you will have a nice automatic process which should work for all kinds of curves.


3

Hi @Mugen87,
Thanks for your code. The current results are much better than my previous results. But the buffergeometry dosenot contain the getSize() and getCenter() function. Hence, I used the center.z to set the camera.
Best regards

geometry.center(); 
const center = new THREE.Vector3((geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2,
						(geometry.boundingBox.max.y - geometry.boundingBox.min.y) / 2,
						(geometry.boundingBox.max.z - geometry.boundingBox.min.z) / 2);
mesh.position.set( -center.x,-center.y,-center.z); 

var camera = view.cameraInit(1, 30, center.z* 0.001, center.z*1000, center.z*1.5);
camera.position.set(center.x*3,center.y*3,center.z*3 );
camera.lookAt(center);
4

Hi!

THREE.Box3() has these methods.

5

Hi prisoner849,
Thanks for reminding me. I am sorry for that I did not understand the code. I should use the buffergeometry to initialize the Box3. Thanks.

Best regards