Skip to content
Snippets Groups Projects
Commit 41e22d6e authored by DeRycke Leanne's avatar DeRycke Leanne
Browse files

Replace index.html

parent db7ce626
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 33 additions and 95 deletions
DUFOUR/index.html
+ 33
− 95
View file @ 41e22d6e
<template> <!DOCTYPE html>
<div ref="container" style="width: 100%; height: 100vh;"></div> <html>
</template> <head>
<meta charset="UTF-8">
<script> <title>La Chambre de Van Gogh</title>
import * as THREE from "three"; <style>
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; body { margin: 0; }
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; canvas { width: 100%; height: 100% }
.centre{text-align: center;}
export default { </style>
name: "Model", </head>
data() { <body>
return { <!-- API importe du site de Three.js -->
scene: null, <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims
camera: null, .js"></script>
renderer: null, <script type="importmap">
control: null, {
model: null, "imports": {
}; "three": "https://threejs.org/build/three.module.js",
}, "three/addons/": "https://threejs.org/examples/jsm/"
methods: { }
initScene() { }
this.scene = new THREE.Scene(); </script>
}, <!-- JQuery pour afficher les erreurs -->
initCamera() { <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js
this.camera = new THREE.PerspectiveCamera( "></script>
50, <!-- Un titre centre -->
window.innerWidth / window.innerHeight, <h1 class="centre"> La Chambre de Van Gogh</h1>
0.01, <div id="webGL" class="centre"></div>
1000 <!-- Mon script avec un chemin relatif -->
); <script type="module" src="chambre.js"></script>
this.camera.position.set(0.02, 5, 10); </body>
}, </html>
initRenderer() {
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.$refs.container.appendChild(this.renderer.domElement);
},
initLight() {
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
this.scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(5, 5, 5);
this.scene.add(directionalLight);
},
initControl() {
this.control = new OrbitControls(this.camera, this.renderer.domElement);
this.control.enableDamping = true;
this.control.dampingFactor = 0.05;
this.control.autoRotate = true;
this.control.autoRotateSpeed = 2.0;
},
initModel() {
const loader = new GLTFLoader();
loader.load(
"elements/wooden_chair.glb",
(glb) => {
this.model = glb.scene;
this.scene.add(this.model);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(error) => {
console.log("An error happened:", error);
}
);
},
init() {
this.initScene();
this.initCamera();
this.initRenderer();
this.initLight();
this.initControl();
this.initModel();
},
animate() {
requestAnimationFrame(this.animate);
this.control.update();
this.renderer.render(this.scene, this.camera);
},
},
mounted() {
this.init();
this.animate();
window.addEventListener("resize", () => {
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
});
},
};
</script>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment