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

Merge branch 'main' of https://gitlab.univ-lorraine.fr/villard5/webgl25

parents f313be8f 70b816c6
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 193773 additions and 3 deletions
ALGUL/index.html
+ 46
− 1
View file @ 1fb05093
Le travail n'a pas encore commencé!!!
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Projet WebGL</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
.centre {
text-align: center;
}
</style>
</head>
<body>
<!-- Chargement du polyfill pour les import maps -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.138.0/build/three.module.js",
"three/addons/controls/OrbitControls.js": "https://cdn.jsdelivr.net/npm/three@0.138.0/examples/jsm/controls/OrbitControls.js",
"three/addons/loaders/OBJLoader.js": "https://cdn.jsdelivr.net/npm/three@0.138.0/examples/jsm/loaders/OBJLoader.js",
"Coordinates": "./lib/Coordinates.js",
"dat.gui": "https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.module.js"
}
}
</script>
<!-- JQuery pour afficher les erreurs -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<h1 class="centre">Projet WebGL</h1>
<div id="webGL" class="centre"></div>
<!-- Votre script principal -->
<script type="module" src="index.js"></script>
<p class="centre">Projet réalisée par Sefer, Louis et Mehdi</p>
</body>
</html>
ALGUL/index.js 0 → 100644
+ 103
− 0
View file @ 1fb05093
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.maxDistance = 1000;
controls.minDistance = 50;
controls.target.set(0, 0, 0);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);
const ambientLight = new THREE.AmbientLight(0x404040, 1);
scene.add(ambientLight);
camera.position.set(200, 150, 300);
const loader = new GLTFLoader();
loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge = gltf.scene;
scene.add(bridge);
bridge.position.set(0, 100, 0);
bridge.scale.set(0.5, 0.5, 0.5);
bridge.rotation.y = Math.PI / 2;
controls.target.copy(bridge.position);
controls.update();
renderer.render(scene, camera);
}, undefined, function (error) {
console.error("Erreur de chargement du pont :", error);
});
loader.load('modeles/bateau.glb', function (gltf) {
const boat1 = gltf.scene.clone();
const boat2 = gltf.scene.clone();
boat1.position.set(-300, 1, - 500);
boat1.scale.set(0.3, 0.3, 0.3);
boat2.position.set(-200, 1, -600);
boat2.scale.set(0.3, 0.3, 0.3);
boat2.rotation.y = Math.PI / 4;
scene.add(boat1);
scene.add(boat2);
renderer.render(scene, camera);
}, undefined, function (error) {
console.error("Erreur de chargement des bateaux :", error);
});
const sunGeometry = new THREE.SphereGeometry(20, 32, 32);
const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 });
const sun = new THREE.Mesh(sunGeometry, sunMaterial);
sun.position.set(50, 300, -200);
scene.add(sun);
const sunLight = new THREE.DirectionalLight(0xffddaa, 2);
sun.add(sunLight);
scene.add(sunLight);
const textureLoader = new THREE.TextureLoader();
const groundTexture = textureLoader.load('textures/water.jpg');
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set(10, 10);
groundTexture.offset.set(0, 0);
const groundMaterial = new THREE.MeshLambertMaterial({ map: groundTexture });
const solidGround = new THREE.Mesh(
new THREE.PlaneGeometry(10000, 10000, 100, 100),
groundMaterial
);
solidGround.rotation.x = -Math.PI / 2;
solidGround.position.y = -2;
scene.add(solidGround);
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
ALGUL/modeles/.gitkeep 0 → 100644
+ 0
− 0
View file @ 1fb05093
ALGUL/textures/.gitkeep 0 → 100644
+ 0
− 0
View file @ 1fb05093
ALGUL/textures/water.jpg 0 → 100644
+ 0
− 0
View file @ 1fb05093
ALGUL/textures/water.jpg

227 KiB

COGNET/textures/crane/Skull_OBJ.OBJ 0 → 100644
+ 17527
− 0
View file @ 1fb05093
This diff is collapsed.
COGNET/textures/pile de livres/Medieval_Bookstack_OBJ.obj 0 → 100644
+ 10812
− 0
View file @ 1fb05093
This diff is collapsed.
COGNET/textures/verre/mug.obj 0 → 100644
+ 123532
− 0
View file @ 1fb05093
This diff is collapsed.
NGUYEN/Models/.gitkeep 0 → 100644
+ 0
− 0
View file @ 1fb05093
NGUYEN/checklistProjet.md
+ 1
− 1
View file @ 1fb05093
......@@ -15,6 +15,6 @@
- [ ] Sprites
- [ ] Environment map
- [ ] Skybox
- [ ] specular maps
- [ ] Animations
- [ ] normal maps
- [ ] Interaction par GUI
\ No newline at end of file
NGUYEN/img.jpg
+ 0
− 0
View replaced file @ f313be8f View file @ 1fb05093
NGUYEN/img.jpg

12.1 KiB | W: | H:

NGUYEN/img.jpg

52.1 KiB | W: | H:

NGUYEN/img.jpg
NGUYEN/img.jpg
NGUYEN/img.jpg
NGUYEN/img.jpg
  • 2-up
  • Swipe
  • Onion skin
NGUYEN/lib/.gitkeep 0 → 100644
+ 0
− 0
View file @ 1fb05093
NGUYEN/lib/three.js 0 → 100644
+ 35996
− 0
View file @ 1fb05093
This diff is collapsed.
NGUYEN/lib/three.min.js 0 → 100644
+ 706
− 0
View file @ 1fb05093
Source diff could not be displayed: it is too large. Options to address this: view the blob.
RIFI/OBJET3D/.gitkeep 0 → 100644
+ 0
− 0
View file @ 1fb05093
RIFI/OBJET3D/skull_lowPoly.obj 0 → 100644
+ 4860
− 0
View file @ 1fb05093
This diff is collapsed.
checklistProjet.md
+ 1
− 1
View file @ 1fb05093
......@@ -15,6 +15,6 @@
- [ ] Sprites
- [ ] Environment map
- [ ] Skybox
- [ ] specular maps
- [ ] Animations
- [ ] normal maps
- [ ] Interaction par GUI
\ No newline at end of file
lib/.gitkeep 0 → 100644
+ 0
− 0
View file @ 1fb05093
lib/Coordinates.js 0 → 100644
+ 149
− 0
View file @ 1fb05093
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
/*global THREE, scene*/
var Coordinates = {
drawGrid:function(params) {
params = params || {};
var size = params.size !== undefined ? params.size:100;
var scale = params.scale !== undefined ? params.scale:0.1;
var orientation = params.orientation !== undefined ? params.orientation:"x";
var grid = new THREE.Mesh(
new THREE.PlaneGeometry(size, size, size * scale, size * scale),
new THREE.MeshBasicMaterial({ color: 0x555555, wireframe: true })
);
// Yes, these are poorly labeled! It would be a mess to fix.
// What's really going on here:
// "x" means "rotate 90 degrees around x", etc.
// So "x" really means "show a grid with a normal of Y"
// "y" means "show a grid with a normal of X"
// "z" means (logically enough) "show a grid with a normal of Z"
if (orientation === "x") {
grid.rotation.x = - Math.PI / 2;
} else if (orientation === "y") {
grid.rotation.y = - Math.PI / 2;
} else if (orientation === "z") {
grid.rotation.z = - Math.PI / 2;
}
scene.add(grid);
},
drawGround:function(params) {
params = params || {};
var size = params.size !== undefined ? params.size:100;
var color = params.color !== undefined ? params.color:0xFFFFFF;
var ground = new THREE.Mesh(
new THREE.PlaneGeometry(size, size),
// When we use a ground plane we use directional lights, so illuminating
// just the corners is sufficient.
// Use MeshPhongMaterial if you want to capture per-pixel lighting:
// new THREE.MeshPhongMaterial({ color: color, specular: 0x000000,
new THREE.MeshLambertMaterial({ color: color,
// polygonOffset moves the plane back from the eye a bit, so that the lines on top of
// the grid do not have z-fighting with the grid:
// Factor == 1 moves it back relative to the slope (more on-edge means move back farther)
// Units == 4 is a fixed amount to move back, and 4 is usually a good value
polygonOffset: true, polygonOffsetFactor: 1.0, polygonOffsetUnits: 4.0
}));
ground.rotation.x = - Math.PI / 2;
scene.add(ground);
},
drawAxes:function(params) {
// x = red, y = green, z = blue (RGB = xyz)
params = params || {};
var axisRadius = params.axisRadius !== undefined ? params.axisRadius:0.04;
var axisLength = params.axisLength !== undefined ? params.axisLength:11;
var axisTess = params.axisTess !== undefined ? params.axisTess:48;
var axisOrientation = params.axisOrientation !== undefined ? params.axisOrientation:"x";
var axisMaterial = new THREE.MeshLambertMaterial({ color: 0x000000, side: THREE.DoubleSide });
var axis = new THREE.Mesh(
new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, axisTess, 1, true),
axisMaterial
);
if (axisOrientation === "x") {
axis.rotation.z = - Math.PI / 2;
axis.position.x = axisLength/2-1;
} else if (axisOrientation === "y") {
axis.position.y = axisLength/2-1;
}
scene.add( axis );
var arrow = new THREE.Mesh(
new THREE.CylinderGeometry(0, 4*axisRadius, 8*axisRadius, axisTess, 1, true),
axisMaterial
);
if (axisOrientation === "x") {
arrow.rotation.z = - Math.PI / 2;
arrow.position.x = axisLength - 1 + axisRadius*4/2;
} else if (axisOrientation === "y") {
arrow.position.y = axisLength - 1 + axisRadius*4/2;
}
scene.add( arrow );
},
drawAllAxes:function(params) {
params = params || {};
var axisRadius = params.axisRadius !== undefined ? params.axisRadius:0.04;
var axisLength = params.axisLength !== undefined ? params.axisLength:11;
var axisTess = params.axisTess !== undefined ? params.axisTess:48;
var axisXMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
var axisYMaterial = new THREE.MeshLambertMaterial({ color: 0x00FF00 });
var axisZMaterial = new THREE.MeshLambertMaterial({ color: 0x0000FF });
axisXMaterial.side = THREE.DoubleSide;
axisYMaterial.side = THREE.DoubleSide;
axisZMaterial.side = THREE.DoubleSide;
var axisX = new THREE.Mesh(
new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, axisTess, 1, true),
axisXMaterial
);
var axisY = new THREE.Mesh(
new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, axisTess, 1, true),
axisYMaterial
);
var axisZ = new THREE.Mesh(
new THREE.CylinderGeometry(axisRadius, axisRadius, axisLength, axisTess, 1, true),
axisZMaterial
);
axisX.rotation.z = - Math.PI / 2;
axisX.position.x = axisLength/2-1;
axisY.position.y = axisLength/2-1;
axisZ.rotation.y = - Math.PI / 2;
axisZ.rotation.z = - Math.PI / 2;
axisZ.position.z = axisLength/2-1;
scene.add( axisX );
scene.add( axisY );
scene.add( axisZ );
var arrowX = new THREE.Mesh(
new THREE.CylinderGeometry(0, 4*axisRadius, 4*axisRadius, axisTess, 1, true),
axisXMaterial
);
var arrowY = new THREE.Mesh(
new THREE.CylinderGeometry(0, 4*axisRadius, 4*axisRadius, axisTess, 1, true),
axisYMaterial
);
var arrowZ = new THREE.Mesh(
new THREE.CylinderGeometry(0, 4*axisRadius, 4*axisRadius, axisTess, 1, true),
axisZMaterial
);
arrowX.rotation.z = - Math.PI / 2;
arrowX.position.x = axisLength - 1 + axisRadius*4/2;
arrowY.position.y = axisLength - 1 + axisRadius*4/2;
arrowZ.rotation.z = - Math.PI / 2;
arrowZ.rotation.y = - Math.PI / 2;
arrowZ.position.z = axisLength - 1 + axisRadius*4/2;
scene.add( arrowX );
scene.add( arrowY );
scene.add( arrowZ );
}
};
\ No newline at end of file
lib/Detector.js 0 → 100644
+ 40
− 0
View file @ 1fb05093
// TODO: This should be replaced with the checking code from http://get.webgl.org
// they have better supprot messages for different browsers
var Detector={
canvas:!!window.CanvasRenderingContext2D,
webgl:(function(){
try{
return!!window.WebGLRenderingContext&&!!document.createElement('canvas').getContext('experimental-webgl');
}
catch(e){
return false;
}
})(),
workers:!!window.Worker,
fileapi:window.File&&window.FileReader&&window.FileList&&window.Blob,
getWebGLErrorMessage:function(){
var element=document.createElement('div');
element.id='webgl-error-message';
element.style.fontFamily='monospace';element.style.fontSize='13px';
element.style.fontWeight='normal';
element.style.textAlign='center';
element.style.background='#fff';
element.style.color='#000';
element.style.padding='1.5em';
element.style.width='400px';
element.style.margin='5em auto 0';
if(!this.webgl){
element.innerHTML=window.WebGLRenderingContext?['Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />','Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'].join('\n'):['Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>','Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'].join('\n');
}
return element;
},
addGetWebGLMessage:function(parameters){
var parent,id,element;
parameters=parameters||{};
parent=parameters.parent!==undefined?parameters.parent:document.body;
id=parameters.id!==undefined?parameters.id:'unsupported';
element=Detector.getWebGLErrorMessage();
element.id=id;
document.body.insertBefore(element, document.body.childNodes[0]);
}
};
\ 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