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>
<div ref="container" style="width: 100%; height: 100vh;"></div>
</template>
<script>
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
name: "Model",
data() {
return {
scene: null,
camera: null,
renderer: null,
control: null,
model: null,
};
},
methods: {
initScene() {
this.scene = new THREE.Scene();
},
initCamera() {
this.camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
0.01,
1000
);
this.camera.position.set(0.02, 5, 10);
},
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>La Chambre de Van Gogh</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
.centre{text-align: center;}
</style>
</head>
<body>
<!-- API importe du site de Three.js -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims
.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<!-- JQuery pour afficher les erreurs -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js
"></script>
<!-- Un titre centre -->
<h1 class="centre"> La Chambre de Van Gogh</h1>
<div id="webGL" class="centre"></div>
<!-- Mon script avec un chemin relatif -->
<script type="module" src="chambre.js"></script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment