JSFiddle - React, Tailwind, and code Playground
by navinleon
HTML
<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/docs/scenes/js/geometry.js"></script>
<script>
var gui = new dat.GUI();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1 );
document.body.appendChild( renderer.domElement );
var orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;
var ambientLight = new THREE.AmbientLight( 0x000000 );
scene.add( ambientLight );
var lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 0 ].position.set( 0, 200, 0 );
lights[ 1 ].position.set( 100, 200, 100 );
lights[ 2 ].position.set( - 100, - 200, - 100 );
scene.add( lights[ 0 ] );
scene.add( lights[ 1 ] );
scene.add( lights[ 2 ] );
var mesh = new THREE.Object3D()
mesh.add( new THREE.LineSegments(
new THREE.Geometry(),
new THREE.LineBasicMaterial( {
color: 0xffffff,
transparent: true,
opacity: 0.5
} )
) );
mesh.add( new...