<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title></title>
</head>
<body>
  <div id="root"></div>
  <div id="container"></div>
  <script type="module">
    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js';
    import {
      OrbitControls
    } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js';
    import {
      GLTFLoader
    } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js';
    import {
      RGBELoader
    } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/RGBELoader.js';

    let container;
    let camera, scene, renderer;
    let controls;
    const clock = new THREE.Clock();
    var envMap;

    init();
    animate();

    function init() {

      container = document.getElementById('container');

      //
      scene = new THREE.Scene();
      console.log(scene)

      //
      renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      renderer.xr.enabled = true;
      renderer.localClippingEnabled = true;
      renderer.physicallyCorrectLights = true;
      renderer.outputEncoding = THREE.sRGBEncoding;
      renderer.toneMappingExposure = 0.7;
      container.appendChild(renderer.domElement);

      var pmremGenerator = new THREE.PMREMGenerator(renderer);
      pmremGenerator.compileEquirectangularShader();

      camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 20000);
      camera.position.set(0, 0, 10);

      //
      new RGBELoader()
        .setDataType(THREE.UnsignedByteType)
        .setPath('../')
        .load("resources/views/template/minimal-theme/files/photo_studio_01_1k.hdr", function (texture2) {
          envMap = pmremGenerator.fromEquirectangular(texture2).texture;
          scene.environment = envMap;
          texture2.dispose();
          pmremGenerator.dispose();
        });

      //
      const loader = new GLTFLoader();
      loader.setPath('../');
      loader.load('resources/views/template/minimal-theme/files/room5.glb', function (gltf) {

        gltf.scene.traverse(function (child) {
          if (child.material) {
            if (child.name == "Object_6") {
              child.material.map.wrapS = THREE.RepeatWrapping;
              child.material.map.wrapT = THREE.RepeatWrapping;
              child.material.map.repeat.x = 10;
              child.material.map.repeat.y = 10;
            }
          }
        });

        scene.add(gltf.scene);
      });

      //
      const loader2 = new GLTFLoader();
      loader2.setPath('../');
      loader2.load('resources/views/template/minimal-theme/files/car.glb', function (gltf) {

        gltf.scene.scale.set(30, 30, 30);
        gltf.scene.position.set(10, 0, 12);

        var bb = new THREE.Box3()
        bb.setFromObject(gltf.scene);
        bb.center(controls.target);

        scene.add(gltf.scene);
      });

      //
      controls = new OrbitControls(camera, renderer.domElement);
      controls.maxPolarAngle = Math.PI * 0.495;
      controls.target.set(11, 5, 12);
      controls.minDistance = 0.5;
      controls.maxDistance = 14;
      controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
      controls.dampingFactor = 0.05;
      controls.update();

      //
      window.addEventListener('resize', onWindowResize);
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      renderer.setAnimationLoop(render);
    }

    function render(timestamp, frame) {
      renderer.render(scene, camera);
      controls.update();
    }
  </script>
</body>
</html>