// TODO: corner mesh // TODO: cylinder mesh // TODO: end point mesh import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Initialise scene const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Set up lights const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(1, 3, 2); scene.add(directionalLight); scene.add(directionalLight.target); // Position the camera camera.position.z = 5; const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.update(); // Make materials const redMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); const greenMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 }); const blueMaterial = new THREE.MeshLambertMaterial({ color: 0x0000ff }); // Make cubes function makeCube(xCoord, material) { const geometry = new THREE.BoxGeometry(); const cube = new THREE.Mesh(geometry, material); cube.position.set(xCoord, 0, 0); scene.add(cube); return cube; } class CornerCurve extends THREE.Curve { constructor(scale) { super(); this.scale = scale; } getPoint(t) { const tx = (Math.sin(.5 * Math.PI * t) -.5) * this.scale; const ty = (Math.cos(.5 * Math.PI * t) -.5) * this.scale; const tz = 0; return new THREE.Vector3(tx, ty, tz); } } function makeCorner(material) { const path = new CornerCurve(.75); const tubularSegments = 20; const radius = .25; const radialSegments = 8; const closed = false; const geometry = new THREE.TubeGeometry(path, tubularSegments, radius, radialSegments, closed); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); return mesh; } let meshes = []; meshes.push(makeCube(-2, redMaterial)); meshes.push(makeCorner(greenMaterial)); meshes.push(makeCube(2, blueMaterial)); // Animation loop function animate() { requestAnimationFrame(animate); for (let i = 0; i < meshes.length; i++) { const cube = meshes[i]; cube.rotation.x += 0.01; cube.rotation.y += 0.01; } controls.update(); renderer.render(scene, camera); } animate();