Skip to content
Snippets Groups Projects
Commit f313be8f authored by loudfr's avatar loudfr
Browse files

lit + chaise

parent 18cf63b7
Branches
Tags V0
No related merge requests found
# LA CHAMBRE DE VAN GOGH A ARLES
*DUFOUR Louise et DE RYCKE Leanne, BUT2 INFO 2025*
![tableau](img.jpg)
## Lire des maillages
MeshLab
## Importer des obj
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html
# WebGL25 CONSIGNES
## A faire :
1. Mettre une image de sa peinture à la place de ``img.jpg``
2. Mettre sa page web dans ``index.html``
3. Mettre son fichier javascript avec :
- la partie modélisation (primitive + fichier 3D)
- la partie matériaux (*Phong* et *Gouraud* suivant le type d'objet)
- des boucles avec des transformations et des matrices comme vu en TP
4. Mettre les bibliothèques **THREE.JS** et autres dans un dossier ``lib`` à la racine pour que tout le monde les utilise
5. Commencer à écrire des explications dans le html
## Notation :
- Le fichier ``checklistProjet.md`` reprend les éléments notés
- Vous pouvez copier ce fichier dans votre repertoire et cocher (``[ X]``) ce que vous pensez avoir accompli
## CHECK LIST
*(ajouter X pour cocher)*
- [ ] Esthetisme
- [ ] Mise en page de la page web
- [ ] Paragraphe(s) d'explications techniques
- [ ] Légèreté du dossier (<2Mo)
- [ ] Géométrie
- [ ] Couleur
- [ ] Transparence
- [ ] Eclairage
- [ ] Ombres portées
- [ ] Position de la caméra
- [ ] Brouillard
- [ ] Effet miroir
- [ ] Texture classique
- [ ] Texture avec transparence
- [ ] Sprites
- [ ] Environment map
- [ ] Skybox
- [ ] specular maps
- [ ] normal maps
- [ ] Interaction par GUI
File added
File added
Le travail n'a pas encore commencé!!!
\ No newline at end of file
<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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment