JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.js"></script>
JavaScript
THREE.Linear3 = THREE.Curve.create(
function ( points, label /* array of Vector3 */) {
this.points = (points == undefined) ? [] : points;
this.label = label;
},
function ( t ) {
var points = this.points;
var index = ( points.length - 1 ) * t;
var floorIndex = Math.floor(index);
if(floorIndex == points.length-1)
return points[floorIndex];
var floorPoint = points[floorIndex];
var ceilPoint = points[floorIndex+1];
return floorPoint.clone().lerp(ceilPoint, index - floorIndex);
}
);
THREE.Linear3.prototype.getUtoTmapping = function(u) {
return u;
};
var camera, scene, renderer, geometry, material, mesh, points, index = 1;
// curve attrs
var c_material, c_path, c_tube, c_mesh;
points = [new THREE.Vector3(0, 0, 0),
new THREE.Vector3(25, 25, 25),
new THREE.Vector3(50, 50, 50),
new THREE.Vector3(75, 75, 75),
new THREE.Vector3(100, 100, 100),
new THREE.Vector3(75, 100, 100),
new THREE.Vector3(50, 100, 100),
new THREE.Vector3(25, 100, 100),
new THREE.Vector3(0, 100, 100),
new THREE.Vector3(0, 75, 100),
new THREE.Vector3(0, 50, 100),
new THREE.Vector3(0, 25, 100),
new THREE.Vector3(0, 0, 100)];
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
c_material = new THREE.MeshLambertMaterial({color:0xFF0000});
c_material.matrixAutoUpdate = true;
c_material.transparent = false;
document.body.appendChild(renderer.domElement);
}
function animate() {
setTimeout(animate, 500);
render();
}
function render() {
if (index > 12){
index = 0;
}
index = index + 1;
...