JSFiddle - React, Tailwind, and code Playground

by orion_prime

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<div class="slidecontainer">
  <input type="range" min="0" max="1" value="0" step="0.01" class="slider" id="myRange">
</div>

<p id='text'>0</p>

CSS

body {
  margin: 0;
}

.slider {
  position: fixed
}

#text {
  top: 10px;
  color: white;
  position: fixed
}

JavaScript

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 30;
const orgPoints = [

  new THREE.Vector3(-10, 5, 0),
  new THREE.Vector3(-8, 10, 0),
  new THREE.Vector3(0, -10, 0),
  new THREE.Vector3(4, 5, 0),
  new THREE.Vector3(5, 0, 0),
  new THREE.Vector3(6, 1, 0),
  new THREE.Vector3(7, -1, 0),
  new THREE.Vector3(8, 2, 0),
  new THREE.Vector3(9, -10, 0),
  new THREE.Vector3(10, 5, 0)

]

const geo = new THREE.BoxGeometry(0.5, 0.5, 0.5)
const mat = new THREE.MeshBasicMaterial({
  color: 0xffff00
});
for (point of orgPoints) {

  const helper = new THREE.Mesh(geo, mat);
  helper.position.copy(point);
  scene.add(helper);

}

const curve = new THREE.CatmullRomCurve3([new THREE.Vector3(-10, 0, 0), ...orgPoints]);


// create curve mesh

const points = curve.getPoints(100);
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

const material = new THREE.LineBasicMaterial({
  color: 0xff0000
});
const curveObject = new THREE.Line(lineGeometry, material);
scene.add(curveObject);

const boxMesh = new THREE.Mesh(new THREE.BoxGeometry(0.8, 0.8, 0.8), new THREE.MeshBasicMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 0.5
}))
scene.add(boxMesh);

// visualize spaced points 

const sphereGeomtry = new THREE.SphereBufferGeometry(0.3);
const sphereMaterial = new THREE.MeshBasicMaterial({
  color: 0xff0000
});

const spacedPoints = curve.getPoints(10);

for (const point of spacedPoints) {

  const helper = new THREE.Mesh(sphereGeomtry, sphereMaterial);
  helper.position.copy(point);
  scene.add(helper);

}

// renderer

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x20252f);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

animate();

window.addEventListener('resize', onResize, false);

function...