TypeScript

by adilrabbani

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.169.0/three.cjs"></script>
<div id="container"></div>

JavaScript

// Importing necessary three.js components from a CDN
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { Line2 } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/lines/Line2.js';
import { LineMaterial } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/lines/LineMaterial.js';
import { LineGeometry } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/lines/LineGeometry.js';

let scene, camera, renderer, line;

function init() {
  const container = document.getElementById('container');
  
  // Create a scene
  scene = new THREE.Scene();

  // Set up camera
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 1, 5);

  // Set up renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  // Orbit controls for easier navigation
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.update();

  // Create LineGeometry for the fat line
  const positions = [];
  positions.push(-1, 0, 0);
  positions.push(1, 0, 0);
  positions.push(0, 1, 0);
  positions.push(0, 0, 1);

  const lineGeometry = new LineGeometry();
  lineGeometry.setPositions(positions);

  // Create LineMaterial for thick lines
  const lineMaterial = new LineMaterial({
    color: 0xff0000,
    linewidth: 5, // Thickness in world units
    dashed: false,
  });

  // Create Line2 object (fat line) using geometry and material
  line = new Line2(lineGeometry, lineMaterial);
  line.computeLineDistances(); // Required for dashed lines
  scene.add(line);

  // Handle resizing
  window.addEventListener('resize', onWindowResize);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
 ...