JSFiddle - React, Tailwind, and code Playground

by Erick Petrucelli

HTML

<script src="https://unpkg.com/three/build/three.js"></script>
<script src="https://unpkg.com/vue-gl/dist/vue-gl.js"></script>
<div id="app">
  <vgl-renderer class="vgl-renderer" scene="scene" camera="cam" antialias>
    <vgl-scene name="scene">
      <vgl-box-geometry name="boxGeometry" />
      <vgl-mesh-standard-material name="boxMaterial" />
      <vgl-mesh geometry="boxGeometry" material="boxMaterial" />
      <vgl-ambient-light></vgl-ambient-light>
      <vgl-directional-light position="2 1 5"></vgl-directional-light>
    </vgl-scene>
    <vgl-perspective-camera orbit-target="0 1 0" orbit-position="3 1 1" name="cam"></vgl-perspective-camera>
    <orbit-controls camera="cam"></orbit-controls>
  </vgl-renderer>
</div>

CSS

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

.vgl-renderer {
  width: 100%;
  height: 100%;
}

Vue

import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

Object.keys(VueGL).forEach((name) => {
  Vue.component(name, VueGL[name]);
});

Vue.component('OrbitControls', {
  inject: ['vglNamespace'],
  props: ['camera'],
  computed: {
    cmr () {
      return this.vglNamespace.cameras.hash[this.camera]
    }
  },
  watch: {
    cmr: {
      handler(cmr) {
      	Vue.nextTick(() => {
           const controls = new OrbitControls(cmr, this.$parent.$el)
           controls.addEventListener('change', () => {
             this.$parent.requestRender()
           })
        })
      },
      immediate: true,
    }
  },
  render(h) {
    return h('div');
  },
});

new Vue({el: '#app'});