JSFiddle - React, Tailwind, and code Playground

by tfoller

JavaScript

import * as CONTROLS from 'https://alikim.com/_v1_jsm/controls.js'

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );


const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const hlp = new THREE.AxesHelper(3);

scene.background = new THREE.Color(0x002200);
scene.add(hlp);


//const geo = new THREE.IcosahedronGeometry(1, 2);//8, 16);
const geo = new THREE.SphereGeometry(1, 8, 16);
const geo2 = new THREE.SphereGeometry(1, 8, 8);

const mat0 = new THREE.MeshBasicMaterial({color:0x990099,wireframe:false});
const mat1 = new THREE.MeshBasicMaterial({color:0x999900,wireframe:false});

const mat2 = new THREE.MeshBasicMaterial({color:0x990099,wireframe:false});
const mat3 = new THREE.MeshBasicMaterial({color:0x999900,wireframe:false});

const mesh0 = new THREE.Mesh(geo, mat0);
const mesh1 = new THREE.Mesh(geo, mat1);
const mesh2 = new THREE.Mesh(geo, mat2);
const mesh3 = new THREE.Mesh(geo2, mat3);
mesh3.scale.set(1.01, 1.01, 1.01);

//mesh3.rotateX(Math.PI/2);
mesh1.rotateY(Math.PI/8);

mesh0.position.x -= 1.5;
mesh1.position.x -= 1.5;
mesh2.position.x += 1.5;
mesh3.position.x += 1.5;

[mesh0, mesh1, mesh2, mesh3].forEach(m => { scene.add(m) });

camera.position.set(5,3,2);
camera.lookAt(0,0,0);

const render = () => { renderer.render( scene, camera ) };

render();

CONTROLS.create({
  cont: renderer.domElement, 
  cam: camera,
  type: 'Orbital', 
  overlay: true, 
  lookAt: [0,0,0],
  callback: render
});