JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://threejs.org/build/three.min.js"></script>
JavaScript
var camera, scene, renderer;
var positions, colors;
var lines = 1000;
var buffer_geometry;
function updateGeomData() {
var radius = 280;
for ( var i = 0; i < lines; i ++ ) {
var lat = Math.random()*180 - 90;
var lng = Math.random()*360 - 180;
var phi = (90.0 - lat) * Math.PI / 180.0;
var theta = (360.0 - lng) * Math.PI / 180.0;
var x = radius * Math.sin(phi) * Math.cos(theta);
var y = radius * Math.cos(phi);
var z = radius * Math.sin(phi) * Math.sin(theta);
positions[ i * 6 + 0 ] = 0;
positions[ i * 6 + 1 ] = 0;
positions[ i * 6 + 2 ] = 0;
positions[ i * 6 + 3 ] = x;
positions[ i * 6 + 4 ] = y;
positions[ i * 6 + 5 ] = z;
colors[ i * 6 + 0 ] = 1;
colors[ i * 6 + 1 ] = 1;
colors[ i * 6 + 2 ] = 1;
colors[ i * 6 + 3 ] = ( x / radius ) + 0.5;
colors[ i * 6 + 4 ] = ( y / radius ) + 0.5;
colors[ i * 6 + 5 ] = ( z / radius ) + 0.5;
}
}
function add_lines_buffer_geom() {
buffer_geometry = new THREE.BufferGeometry();
buffer_geometry.dynamic = true;
var material = new THREE.LineBasicMaterial({ vertexColors: true });
buffer_geometry.attributes = {
position: {
itemSize: 3,
array: new Float32Array(lines * 3),
numItems: lines * 3
},
color: {
itemSize: 3,
array: new Float32Array(lines * 3),
numItems: lines * 3
}
};
positions = buffer_geometry.attributes.position.array;
colors = buffer_geometry.attributes.color.array;
updateGeomData();
buffer_geometry.computeBoundingSphere();
var buffer_mesh = new THREE.Line( buffer_geometry, material );
scene.add( buffer_mesh );
}
function init() {
container = document.createElement( 'div' );
container.style.position = 'absolute';
container.style.top = '0px';
container.style.left = '0px';
...