JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

CSS

body {
  margin: 0;
}

JavaScript

const scene = new THREE.Scene();

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

const camera = new THREE.OrthographicCamera(-5, 5, 5, -5, 1, 1000);
camera.position.set(0, 0, 10);
camera.lookAt(0, 0, 0);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const material2 = new THREE.LineBasicMaterial( { color: 0xffffff } );
const points = [];
points.push( new THREE.Vector3( -1, 0, 0 ) );
points.push( new THREE.Vector3( 0, 1, 0 ) );
points.push( new THREE.Vector3( 1, 0, 0 ) );

const geometry2 = new THREE.BufferGeometry().setFromPoints( points );
const line = new THREE.Line(geometry2, material2);

scene.add(line);

function animate() {
	requestAnimationFrame(animate);
  
  controls.update();
  
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  
	renderer.render(scene, camera);
}
animate();