<div id="container"></div>

<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
		<script type="importmap">
			{
				"imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.164.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.0/examples/jsm/",
					"three/nodes": "https://cdn.jsdelivr.net/npm/three@0.164.0/examples/jsm/nodes/Nodes.js"
				}
			}
		</script>

* {
  margin: 0;
  border:0;
  padding: 0;
}

import * as THREE from "three";

import Stats from "three/addons/libs/stats.module.js";

import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { RGBELoader } from "three/addons/loaders/RGBELoader.js";

let container, stats;
let camera, scene, renderer, clock, mixer;
let controls, mesh, logomesh;

init();
animate();

function init() {
  clock = new THREE.Clock();

  container = document.getElementById("container");

  //

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1.5;
  renderer.setClearColor( 0xffffff, 0);
  container.appendChild(renderer.domElement);

  //

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(
    55,
    window.innerWidth / window.innerHeight,
    1,
    20000
  );
  camera.position.set(-100, 30, 100);
  
  new RGBELoader().load(
    "https://raw.githack.com/mrdoob/three.js/master/examples/textures/equirectangular/venice_sunset_1k.hdr",
    function (texture) {
      texture.mapping = THREE.EquirectangularReflectionMapping;
      //scene.background = texture;
      scene.environment = texture;
      
      
      var loader = new GLTFLoader();
      loader.load(
        "https://res.cloudinary.com/defxmhvsd/image/upload/v1714480308/WebAudit-test_gw7rld.glb",
        function (gltf) {
          var model = gltf.scene;
          
          gltf.scene.traverse(child => {
              if (child.material) {
                console.log(child.material);
                child.material.roughness = 0.2;
                
                //child.material = new THREE.MeshPhongMaterial({ color: 0x888888 + Math.random() * 0x888888 });
              }
            });

          scene.add(model);

          model.scale.set(30, 30, 30);
          model.rotation.y = 60;
        }
      );

    }
  );

  stats = new Stats();
  container.appendChild(stats.dom);

  // GUI
  //

  controls = new OrbitControls(camera, renderer.domElement);
  controls.maxPolarAngle = Math.PI * 0.495;
  controls.target.set(0, 10, 0);
  controls.minDistance = 40.0;
  controls.maxDistance = 200.0;
  controls.update();



  window.addEventListener("resize", onWindowResize);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  var delta = clock.getDelta();

  if (mixer) mixer.update(delta);
  render();
  stats.update();
}

function render() {
  const time = performance.now() * 0.001;
  renderer.render(scene, camera);
}