JSFiddle - React, Tailwind, and code Playground

by Cody Bennett

HTML

<script src="https://unpkg.com/three/examples/jsm/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/three/examples/jsm/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three/examples/jsm/webxr/VRButton.js"></script>
<script src="https://unpkg.com/three/examples/jsm/webxr/XRControllerModelFactory.js"></script>
<script src="https://unpkg.com/stats.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<div id="app"></div>

React

const App = (props) => {
  const width = React.useRef(window.innerWidth);
  const height = React.useRef(window.innerHeight);
  const canvasRef = React.useRef();
  const renderer = React.useRef();
  const camera = React.useRef();
  const scene = React.useRef();
  const controls = React.useRef();
  const stats = React.useRef();
  const lights = React.useRef();
  const controller1 = React.useRef();
  const controller2 = React.useRef();
  const controllerGrip1 = React.useRef();
  const controllerGrip2 = React.useRef();

  React.useEffect(() => {
    renderer.current = new THREE.WebGLRenderer({
      canvas: canvasRef.current,
      powerPreference: 'high-performance',
      antialias: true,
    });
    renderer.current.setSize(width.current, height.current);
    renderer.current.setPixelRatio(1);
    renderer.current.outputEncoding = THREE.sRGBEncoding;
    renderer.current.shadowMap.enabled = true;
    renderer.current.xr.enabled = true;
    renderer.current.xr.setFramebufferScaleFactor(2.0);

    document.body.appendChild(VRButton.createButton(renderer.current));

    camera.current = new THREE.PerspectiveCamera(50, width.current / height.current, 0.1, 500);
    camera.current.position.set(0, 1.6, 3);

    controls.current = new THREE.OrbitControls(camera.current, renderer.current.domElement);
    controls.current.target.set(0, 1.6, 0);
    controls.current.update();

    stats.current = new Stats();
    document.body.appendChild(stats.current.dom);

    scene.current = new THREE.Scene();

    controller1.current = renderer.current.xr.getController(0);
    controller1.current.name = 'left';
    scene.current.add(controller1.current);

    controller2.current = renderer.current.xr.getController(1);
    controller2.current.name = 'right';
    scene.current.add(controller2.current);

    const controllerModelFactory = new XRControllerModelFactory();

    controllerGrip1.current = renderer.current.xr.getControllerGrip(0);
   ...