<template>
  <div class="virtual-sample" ref="virtualSampleContainer"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const virtualSampleContainer = ref(null);

onMounted(() => {
  const container = virtualSampleContainer.value;

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    container.clientWidth / container.clientHeight,
    0.1,
    1000
  );
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setClearColor(0xffffff, 1);
  container.appendChild(renderer.domElement);

  const light = new THREE.AmbientLight(0xffffff);
  scene.add(light);

  const loader = new GLTFLoader();
  loader.load(
    "/assets/3D/flacon-test.glb",
    (gltf) => {
      const model = gltf.scene;
      scene.add(model);
    },
    undefined,
    (error) => {
      console.error("Erreur lors du chargement du modèle", error);
    }
  );

  camera.position.set(3, 2, 5);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;

  const animate = () => {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
  };

  animate();

  window.addEventListener("resize", () => {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
  });
});
</script>

<style scoped>
.virtual-sample {
  width: 100%;
  height: 100vh;
}
</style>
