JSFiddle - React, Tailwind, and code Playground

by mars91

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

// Simple three.js example

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';


class RK2{
	constructor( x,y,z,dx,dy,dz )
	{
		this.sv = [x,y,z,dx,dy,dz];
		this.k1 = [];this.k2 = [];this.f = [];
		for (var i=0; i < 6; i += 1){this.k1.push(0);this.k2.push(0);this.f.push(0);};
	}
	derivative(state,fill,ox,oy,oz)
	{
		// eMu/rMag^3 sat2earth
		const rx = state[0] - ox;const ry = state[1] - oy;const rz = state[2] - oz;
		const rms = -100/Math.pow(rx*rx+ry*ry+rz*rz,1.5);
		fill[0 ] = state[3];fill[1 ] = state[4];fill[2 ] = state[5];
		// force sat experiences from earth
		fill[3 ] = rms*rx;fill[4 ] = rms*ry;fill[5 ] = rms*rz;
	}
	step(dt,ox,oy,oz)
	{
		const dtHalf = dt*.5;
		this.derivative(this.sv,this.k1,ox,oy,oz);
		for (var i=0; i < 6; i += 1){this.f[i] = this.sv[i]+this.k1[i]*dt;};
		this.derivative(this.f, this.k2,ox,oy,oz);
		for (var i=0; i < 6; i += 1){this.sv[i] += dtHalf*(this.k1[i]+this.k2[i]);};
		this.time += dt;
	}
}


let planet, renderer, scene, camera, controls, clock, rocket, prop, jetUp, rocketUp, rockeVel,wrldX, rocketLookAt, velHelper, upHelper, wrldY, group, dtheta, group2, rocketPos;

init();
animate();

function init() {

	//Basics
	///////////////
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setPixelRatio( window.devicePixelRatio );
	document.body.appendChild( renderer.domElement );
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set( -200, 0, 0 );
	controls = new OrbitControls( camera, renderer.domElement );
	scene.add( new THREE.AmbientLight( 0x222222 ) );
	const light = new THREE.DirectionalLight( 0xffffff, 1 );
	light.position.set( 20,20, 0 );
	scene.add( light );
	scene.add( new THREE.AxesHelper( 20 ) );
  scene.background = new THREE.Color( 0xA9A9A9 );
  group = new THREE.Group();
  group2 = new THREE.Group();
 ...