JSFiddle - React, Tailwind, and code Playground
CSS
body {
margin: 0;
}
canvas {
display: block;
}
JavaScript
import * as THREE from 'https://threejs.org/build/three.module.js';
import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import { Line2 } from 'https://threejs.org/examples/jsm/lines/Line2.js';
import { LineMaterial } from 'https://threejs.org/examples/jsm/lines/LineMaterial.js';
import { LineGeometry } from 'https://threejs.org/examples/jsm/lines/LineGeometry.js';
import { GeometryUtils } from 'https://threejs.org/examples/jsm/utils/GeometryUtils.js';
var line, renderer, scene, camera, camera2, controls;
var line1;
var matLine, matLineBasic, matLineDashed;
var stats;
var gui;
// viewport
var insetWidth;
var insetHeight;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0x000000, 0.0 );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( - 40, 0, 60 );
camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
camera2.position.copy( camera.position );
controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 10;
controls.maxDistance = 500;
// Position and THREE.Color Data
var positions = [];
var colors = [];
var points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var spline = new THREE.CatmullRomCurve3( points );
var divisions = Math.round( 12 * points.length );
var color = new THREE.Color();
for ( var i = 0, l = divisions; i < l; i ++ ) {
var point = spline.getPoint( i / l );
positions.push( point.x, point.y, point.z );
color.setHSL( i / l, 1.0, 0.5...