JSFiddle - React, Tailwind, and code Playground

by GoupilSystem

JavaScript

// Simple three.js example

import * as THREE from "https://threejs.org/build/three.module.js";
import {
  TransformControls
} from 'https://threejs.org/examples/jsm/controls/TransformControls.js';

var sphereToCut, cube, clippingPlane, renderer, scene, camera, transformControl;

init();
animate();

function init() {

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

  clippingPlane = new THREE.Plane( new THREE.Vector3( 0, 0, 0 ), 0.8 );
  var Empty = Object.freeze( [] );
				renderer.clippingPlanes = Empty;
				renderer.localClippingEnabled = true;

  
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 0, 10);
  camera.lookAt(0, 0, 0);

  transformControl = new TransformControls(camera, renderer.domElement);
  transformControl.setMode("rotate");

  scene.add(new THREE.AmbientLight(0x222222));
	var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  var geometry = new THREE.SphereGeometry(5, 12, 8);
  var material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    flatShading: true,
    clippingPlanes: [ clippingPlane ]
  });
  sphereToCut = new THREE.Mesh(geometry, material);
  sphereToCut.position.set(0, -3, 0);
  scene.add(sphereToCut);
  
  var geometry2 = new THREE.BoxGeometry( 4, 4, 4 );
  var material2 = new THREE.MeshNormalMaterial();
  cube = new THREE.Mesh(geometry2, material2);
  cube.position.set(0, -1, 2);
  scene.add(cube);
  transformControl.attach(cube);
  
  scene.add(transformControl);
  
  window.addEventListener( 'keydown', function ( event ) {
					switch ( event.keyCode ) {
						case 87: // W
							transformControl.setMode( "translate" );
							break;
						case 69: // E
						transformControl.setMode( "rotate"...