72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
|
<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>
|