How to draw path using position coordinates?

Questions
1

Hello! I’m new to three.js and I’m looking to draw a curve/path from a file containing position data for an object. The data consists of x, y, and z coordinates. The problem right now is that the path appears to be cut off as I zoom in/out, and after zooming out it suddenly disappears completely.

image
image1920×1382 37.1 KB

Here is the code I have:

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  10000
);

camera.position.set(1000, 1000, 1000);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

function parseCSV(csvData) {
  const rows = csvData.split("\n").slice(1);
  const positions = [];

  rows.forEach((row) => {
    const columns = row.split(",");
    const Rx = Number(columns[1]);
    const Ry = Number(columns[2]);
    const Rz = Number(columns[3]);

    if (!isNaN(Rx) && !isNaN(Ry) && !isNaN(Rz)) {
      positions.push(new THREE.Vector3(Rx, Ry, Rz));
    }
  });
  return positions;
}

async function loadCSVAndCreatePath() {
  try {
    const response = await fetch("data/data.csv");
    const csvData = await response.text();
    const positions = parseCSV(csvData);

    const geometry = new THREE.BufferGeometry().setFromPoints(positions);
    const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

    const line = new THREE.Line(geometry, material);
    scene.add(line);
  } catch (error) {
    console.error("Error loading CSV:", error);
  }
}

loadCSVAndCreatePath();

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});

I would really appreciate any help!

2

I’d check whether the lines are within the camera frustum. You camera is set with a far plane at 10000, so if lines go further away, they will be guillotined.

If this is not the problem, you might want to post an online debuggable demo of the issue (on codepen, for example), so that people can inspect what is going on.