My project requires me to create a 3D scatter graph using three.js. I have attempted to implement the code provided below. While the code is functional, the resulting graph appears more like a 2D representation. Adjusting the camera position can add depth to the graph, but I am struggling to pinpoint the precise camera position.
let scene,camera,renderer,axes;
let set = [];
let createGeometry = function()
{
set.push(new THREE.Vector3(5,5,10) );
set.push(new THREE.Vector3(10,15,17));
set.push(new THREE.Vector3(15,20,12));
set.push(new THREE.Vector3(20,16,10));
set.push(new THREE.Vector3(17,9,19));
set.push(new THREE.Vector3(23,2,13));
let setgeometry = new THREE.BufferGeometry().setFromPoints(set);
let setmaterial = new THREE.PointsMaterial({ color : 0xff0000 , size : 10 ,sizeAttenuation : false});
let plot = new THREE.Points( setgeometry , setmaterial );
scene.add(plot);
}
let init = function(){
scene = new THREE.Scene;
scene.background = new THREE.Color(0x000000);
camera = new THREE.PerspectiveCamera(25 , window.innerWidth/window.innerHeight , 1 , 1000);
camera.position.set(20,10,90);
let axes =new THREE.AxesHelper(25);
scene.add(axes);
createGeometry();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
};
let mainloop = function(){
renderer.render(scene , camera);
requestAnimationFrame(mainloop);
};
init();
mainloop();html, body {margin: 0; padding: 0;overflow: hidden;}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d39253f28280d7d637c7c7a637c">[email protected]</a>/build/three.min.js"></script>