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.