JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometrySpline = new THREE.Geometry();
geometrySpline.vertices.push(
new THREE.Vector3( -10, 5, 0 ),
new THREE.Vector3(0, -5, 0),
new THREE.Vector3( 10, 5, 0 )
);
geometrySpline.computeLineDistances();
var object = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xff0000, dashSize: 1, gapSize: .5} ) );
scene.add(object)

render();
function render(){
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}