import * as THREE from 'three'; import { GUI } from 'lil-gui'; import { TaperedLink } from './taperedLink.js'; const FACE_OPACITY = 0.3; const CAMERA_K = 5; // scene, lights and camera const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const light = new THREE.PointLight(0xffffff, 2); light.position.set(10, 10, 10); scene.add(light); const light2 = new THREE.PointLight(0xffffff, 2); light2.position.set(-10, 5, 10); scene.add(light); const amblight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(amblight); camera.position.set(0, 0, CAMERA_K / 2); camera.lookAt(0, 0, 0); //camera.position.z = 4; const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.localClippingEnabled = true; document.body.appendChild( renderer.domElement ); const NODEC = 0x3293a9; const BACKGROUNDC = 0xd4d4d4; scene.background = new THREE.Color(BACKGROUNDC); const material = new THREE.MeshStandardMaterial({ color: NODEC }); const params = { r1: 0.5, r2: 0.6, l: 3, }; const gui = new GUI(); gui.add(params, "r1", 0.01, 1.5); gui.add(params, "r2", 0.01, 1.5); gui.add(params, "l", 0, 4); function makeNode(material, pos, r) { const geometry = new THREE.SphereGeometry(1); const sphere = new THREE.Mesh(geometry, material); updateNode(sphere, pos, r); return sphere; } function updateNode(node, pos, r) { node.scale.copy(new THREE.Vector3(r, r, r)); node.position.copy(pos); } const n1 = makeNode(material, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]); const n2 = makeNode(material, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"]) //const tl = new TaperedLink( scene.add(n1); scene.add(n2); function animate() { requestAnimationFrame(animate); updateNode(n1, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]); updateNode(n2, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"]); renderer.render(scene, camera); } animate();