Skip to content
Snippets Groups Projects
Commit 31fdbd11 authored by RIFI Zaynab's avatar RIFI Zaynab
Browse files

Update 2 files 

- /RIFI/index.html
- /RIFI/script.js
parent a5adde25
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
RIFI/index.html
+ 32
− 1
View file @ 31fdbd11
Le travail n'a pas encore commencé!!! <!DOCTYPE html>
\ No newline at end of file <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>
<!-- 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"> Projet webGL</h1>
<div id="webGL" class="centre"></div>
<!-- Mon script avec un chemin relatif -->
<script type="module" src="particle-grid.js"></script>
</body>
</html>
\ No newline at end of file
RIFI/script.js 0 → 100644
+ 98
− 0
View file @ 31fdbd11
"use strict";
import * as THREE from "three";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
var camera, scene, renderer;
var cameraControls;
var clock = new THREE.Clock();
var skull;
function fillScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a1a);
// Éclairage dramatique
var mainLight = new THREE.DirectionalLight(0xFFAA55, 0.7);
mainLight.position.set(-200, 200, 100);
scene.add(mainLight);
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
// Table
createTable();
loadSkull();
}
function createTable() {
var tableGeometry = new THREE.BoxGeometry(600, 20, 300);
var tableMaterial = new THREE.MeshPhongMaterial({
color: 0x332211,
shininess: 30
});
var table = new THREE.Mesh(tableGeometry, tableMaterial);
table.position.y = 0;
scene.add(table);
}
function loadSkull() {
var loader = new OBJLoader();
loader.load(
'skul.obj',
function(object) {
skull = object;
skull.scale.set(3, 3, 3);
skull.position.set(40, 20, 50); // Place-le juste au-dessus de la table
// Y=50 pour placer au-dessus de la table
skull.rotation.x = Math.PI / 8;
skull.rotation.y = Math.PI / 200;
skull.rotation.set(-Math.PI / 2.5, 0, 0);
// Tourne le crâne pour qu'il regarde vers l'avant
skull.traverse(function(child) {
if (child.isMesh) {
child.material = new THREE.MeshPhongMaterial({
color: 0xE0D0B0,
shininess: 9
});
}
});
scene.add(skull);
}
);
}
function init() {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(846, 494);
renderer.setClearColor(0x1a1a1a, 1.0);
var container = document.getElementById('webGL');
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(35, 846/494, 1, 8000);
camera.position.set(0, 200, 600);
cameraControls = new OrbitControls(camera, renderer.domElement);
cameraControls.target.set(0, 50, 0);
}
function animate() {
requestAnimationFrame(animate);
var delta = clock.getDelta();
cameraControls.update(delta);
renderer.render(scene, camera);
}
try {
init();
fillScene();
animate();
} catch(e) {
console.error(e);
}
\ 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