JSFiddle - React, Tailwind, and code Playground

by forerun

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>My money don't jiggle jiggle</title>

		<style>
			body { margin: 0; }
            canvas { width: 100%; height: 100%; }
		</style>
	</head>
	<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.144.0/build/three.module.js",
                "addons/": "https://unpkg.com/three@0.144.0/examples/jsm/"
            }
        }
    </script>

        <script>
        </script>
	</body>
</html>

JavaScript

import * as THREE from 'three'
import {GLTFLoader} from 'addons/loaders/GLTFLoader.js'
import { OrbitControls }from 'addons/controls/OrbitControls.js'
newFunction();
function newFunction() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 6
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
//resize window as it adjusts
    window.addEventListener( 'resize', function()
    {
        var width = window.innerWidth;
        var height = window.innerHeight;
        renderer.setSize( width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    });

    //orbit controls
    const controls = new OrbitControls( camera, renderer.domElement);
    controls.target.set( 0, 1.6, 0.5 );
    controls.update()
 

    //rotate geometry to camera
    const geometry2 = new THREE.PlaneGeometry( 2, 1, 16, 16 );
    const material2 = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide, wireframe: true})
    const plane2 = new THREE.Mesh( geometry2, material2 );
    plane2.position.set(0, 1.6, 2.5);
    plane2.rotateY(1.571)
    scene.add( plane2 );

    

    const geometry1 = new THREE.SphereGeometry( 0.001, 32, 16 );
    const material1 = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    const sphere1 = new THREE.Mesh( geometry1, material1 );
    sphere1.position.set(-0.35, 1.6, 1.5);
    //scene.add( sphere1 );
    



    //ambient light 
    var ambientLight = new THREE.AmbientLight(0xFFFFFF, 2.0);
    scene.add( ambientLight ); 

    
    //game logic
    var update = function () {
       plane2.quaternion.slerp(camera.quaternion, 0.08)
    };

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

    var GameLoop = function () {
        requestAnimationFrame(GameLoop);
 ...