Lines

const line = scene.create("line3d", {
  start: vec3(0, 0, 0),
  end: vec3(5, 3, 2),
  color: "cyan",
  thickness: 1,
});

scene.create("line3d", {
  start: vec3(0, 0, 0),
  end: vec3(1, 0, 0),
  color: "red",
});

scene.create("line3d", {
  start: vec3(0, 0, 0),
  end: vec3(1, 0, 0),
  thickness: 0.5, // Thin
});

scene.create("line3d", {
  start: vec3(0, 1, 0),
  end: vec3(1, 1, 0),
  thickness: 2, // Thick
});

const p1 = scene.create("point3d", { coords: vec3(0, 0, 0), color: "red" });
const p2 = scene.create("point3d", { coords: vec3(3, 3, 3), color: "blue" });

scene.create("line3d", {
  start: p1.coords,
  end: p2.coords,
  color: "white",
  thickness: 0.5,
});

const p1 = scene.create("point3d", { coords: vec3(0, 0, 0), color: "red" });
const p2 = scene.create("point3d", { coords: vec3(3, 2, 1), color: "blue" });

scene.create("line3d", {
  start: p1.coords,
  end: p2.coords,
  color: "white",
});

// Label at the midpoint showing the line's length
const midpoint = scene.atom((get) => {
  const start = get(p1.coords);
  const end = get(p2.coords);
  return vec3((start.x + end.x) / 2, (start.y + end.y) / 2, (start.z + end.z) / 2);
});

scene.create("overlay3d", {
  position: midpoint,
  content: scene.atom((get) => {
    const diff = Vec3.subtract(get(p2.coords), get(p1.coords));
    return `d = ${Vec3.length(diff).toFixed(2)}`;
  }),
  anchor: "bottom-left",
  offset: vec2(6, -6),
});

const line = scene.create("line3d", {
  start: vec3(0, 0, 0),
  end: vec3(1, 1, 1),
  color: "white",
});

// Update endpoints
line.start.set(vec3(-1, -1, -1));
line.end.set(vec3(2, 2, 2));

// Update styling
line.color.set("pink");
line.thickness.set(2);