JSFiddle - React, Tailwind, and code Playground

by zypy333

HTML

<script src="http://threejs.org/build/three.min.js"></script>

<div id="app">
  <div id="scene-container" ref="sceneContainer"></div>
</div>

SCSS

#scene-container {
  width: 95vw;
  height: 100vh;
  background: #ffffff;
}

Vue

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import { EffectComposer } from 'https://threejs.org/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://threejs.org/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://threejs.org/examples/jsm/postprocessing/ShaderPass.js';
import { OutlinePass } from 'https://threejs.org/examples/jsm/postprocessing/OutlinePass.js';
import { FXAAShader } from 'https://threejs.org/examples/jsm/shaders/FXAAShader.js';

new Vue({
  el: "#app",
  data() {
    return {
      container: null,
      scene: null,
      camera: null,
      controls: null,
      renderer: null,
      lights: [],
      content: null,
      composer:null,
      selectedObjects:[],
      outlinePass:{}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.container = this.$refs.sceneContainer;
      const camera = new THREE.PerspectiveCamera(
        75,
        this.container.clientWidth / this.container.clientHeight,
        0.1,
        1000
      );
      camera.position.set(0, 30, 60);
      this.camera = camera;

      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xa0a0a0);

      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.shadowMap.enabled = true;
      this.renderer.gammaFactor = 2.2;
      this.renderer.gammaOutput = true;
      this.renderer.outputEncoding = THREE.sRGBEncoding; 
     // this.renderer.physicallyCorrectLights = true;
      this.container.appendChild(this.renderer.domElement);

      // add Lights
      this.scene.add(new...