0

I'm new to ThreeJS and I'm sure this question must've been asked several times before but I couldn't find anything relevant to my case here.

I'm trying to add a few spheres to the scene that have negative co-ordinates and trying to set the camera's position so that all the spheres are visible but I'm just not getting it right.

Still a newbie in ThreeJS so apologies for the novice question.

Here's a code snippet followed by a JS fiddle link:

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

        camera.position.set(-600, -1000, -500);
    
        var geometry0 = new THREE.Geometry();

        geometry0.vertices = [
            {
                "x": -600.18847386,
                "y": -989.403640835,
                "z": -212.355555096
            },
            {
                "x": -1399.55385418,
                "y": -1614.19038931,
                "z": -669.71891056
            },
            {
                "x": -1447.77539674,
                "y": -1611.02653965,
                "z": -611.240468084
            }
        ].map(function (pos) {
            return new THREE.Vector3(pos.x, pos.y, pos.z);
        });
        
        var spheres = [];
        for (var i=0 ; i<geometry0.vertices.length ; i++) {


            var sphereGeometry = new THREE.SphereGeometry(0.2, 10, 10);
            var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, opacity: 1});
            spheres[i] = new THREE.Mesh(sphereGeometry, sphereMaterial);
            spheres[i].position.set(geometry0.vertices[i].x,
                geometry0.vertices[i].y,
                geometry0.vertices[i].z);
            scene.add(spheres[i]);

        }

        
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    renderer.render(scene, camera);

}
<script src="https://stemkoski.github.io/Three.js/js/Three.js"></script>

https://jsfiddle.net/shashank2104/7dpzxe16/2/

Hope to get some quick help. Thanks.

Shashank
  • 5,570
  • 1
  • 11
  • 17
  • https://stackoverflow.com/questions/14614252/how-to-fit-camera-to-object – 2pha Jun 28 '20 at 22:13
  • Thanks @2pha. Mind helping me out with that? I tried it but couldn't make it work. These negative co-ordinates are messing it up. If you don't mind, can you point me in the right direction by updating the fiddle? – Shashank Jun 28 '20 at 22:29

0 Answers0