JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<body onLoad="init()"></body>

CSS

body {
    font-family: Monospace;
    background-color: #a8ddf8;
    margin: 0px;
    overflow: hidden;
}

JavaScript

var controls, scene, camera, box, spline, counter = 0;

var tangent = new THREE.Vector3();
var axis = new THREE.Vector3();
var up = new THREE.Vector3(0, 1, 0);

function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.set(0, 0, 600);
    camera.lookAt(new THREE.Vector3(0, 100, 0));
    scene = new THREE.Scene();
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    var numPoints = 50;

    spline = new THREE.CatmullRomCurve3([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(0, 200, 0),
    new THREE.Vector3(150, 150, 0),
    new THREE.Vector3(150, 50, 0),
    new THREE.Vector3(250, 100, 0),
    new THREE.Vector3(250, 300, 0)]);

    var material = new THREE.LineBasicMaterial({
        color: 0xff00f0,
    });

    var geometry = new THREE.Geometry();
    var splinePoints = spline.getPoints(numPoints);

/*
 box.position.copy( spline.getPointAt(counter) );

        tangent = spline.getTangentAt(counter).normalize();

        axis.crossVectors(up, tangent).normalize();

        var radians = Math.acos(up.dot(tangent));

        box.quaternion.setFromAxisAngle(axis, radians);

        counter += 0.005
*/
    for (var i = 0; i < splinePoints.length; i++) {
        geometry.vertices.push(splinePoints[i]);
        
        var boxer = new THREE.Mesh(new THREE.BoxGeometry(10.5, 10.5, 24.5))
        scene.add(boxer)
       boxer.rotateX(Math.PI*3/2)
    boxer.position.set(splinePoints[i].x, splinePoints[i].y, splinePoints[i].z)
     boxer.lookAt(new THREE.Vector3(0, 0, 0))
    }

    var line = new THREE.Line(geometry, material);
    scene.add(line);

    geometry = new THREE.BoxGeometry(5, 40, 4);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });

    box = new THREE.Mesh(geometry,...