From 41e22d6e7020e02f0b0234f7e0d5695ec44ad939 Mon Sep 17 00:00:00 2001
From: DeRycke Leanne <leanne.de-rycke3@etu.univ-lorraine.fr>
Date: Tue, 11 Feb 2025 16:35:03 +0000
Subject: [PATCH] Replace index.html
---
DUFOUR/index.html | 128 ++++++++++++----------------------------------
1 file changed, 33 insertions(+), 95 deletions(-)
diff --git a/DUFOUR/index.html b/DUFOUR/index.html
index 4f33134..eaa5e11 100644
--- a/DUFOUR/index.html
+++ b/DUFOUR/index.html
@@ -1,95 +1,33 @@
-<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>
--
GitLab