JavaScript
import * as THREE from 'https://cdn.skypack.dev/three@v0.122.0';
let camera;
let scene;
let renderer;
let object;
let geometry;
const m = 10; // size multiplier
let material = new THREE.MeshBasicMaterial({ color: 'red' });
const lines = [
{
def: [-0.2, 0],
current: [-0.2, 0],
maxDelta: [0, 0],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [-1.5, 0.4],
current: [-1.5, 0.4],
maxDelta: [0.3, 0.3],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [-2.3, 2],
current: [-2.3, 2],
maxDelta: [0.3, 0.3],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [-1.5, 3.6],
current: [-1.5, 3.6],
maxDelta: [0.3, 0.3],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [0, 4],
current: [0, 4],
maxDelta: [0.5, 0.5],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [1.5, 3.6],
current: [1.5, 3.6],
maxDelta: [0.3, 0.3],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [2.3, 2],
current: [2.3, 2],
maxDelta: [0.3, 0.3],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [1.5, 0.4],
current: [1.5, 0.4],
maxDelta: [0.3, 0.3],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [0.2, 0],
current: [0.2, 0],
maxDelta: [0, 0],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
{
def: [0, 0],
current: [0, 0],
maxDelta: [0, 0],
lastSign: [1, 1],
lastRandomTarget: [null, null],
delta: [0.005, 0.005],
},
];
init();
animate();
function init() {
const container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 50;
camera.position.y = 15;
scene = new...