JSFiddle - React, Tailwind, and code Playground

by grano

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from 'https://threejs.org/build/three.module.js';
import {OrbitControls} from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import {BufferGeometryUtils} from "https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js";
import {GUI} from "https://threejs.org/examples/jsm/libs/dat.gui.module.js";


let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 5, 10);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

const geometry1 = new THREE.BoxGeometry( 30, 30, 30 );
const material1 = new THREE.MeshBasicMaterial({color: 'green'});

let mesh1 = new THREE.Mesh( geometry1, material1 );
mesh1.position.set(0,-40, -80)
scene.add(mesh1)

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial();

let mesh = new THREE.Mesh( geometry, material );
mesh.position.set(0,0, -10)
//scene.add( mesh );
camera.add( mesh );
scene.add(camera)



renderer.setAnimationLoop((time) => {
  renderer.render(scene, camera);
  mesh.position.y = Math.sin( time *0.001 ) ;
  mesh.rotation.x = time * 0.1 *0.001;
  mesh.rotation.z = time * 0.11 *0.001;

})