JSFiddle - React, Tailwind, and code Playground
by apbln
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/jsm/libs/dat.gui.module.js"></script>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/jsm/libs/stats.module.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>s
<script src="https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/Line2.js"></script>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/LineMaterial.js"></script>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/LineGeometry.js"></script>
<script src="https://github.com/mrdoob/three.js/blob/master/examples/jsm/utils/GeometryUtils.js"></script>
<script>
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 THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 10;
controls.maxDistance = 500;
// Position and THREE.Color...