Skip to content
Snippets Groups Projects
Commit 792ca6f3 authored by Thomas KANY's avatar Thomas KANY
Browse files

test

parent 9aea4fe0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ALVARIZA-BILLAR_DESERT_KANY/index.html
+ 43
− 1
View file @ 792ca6f3
Le travail n'a pas encore commencé!!!
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>projet</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</h1>
<div id="webGL" class="centre"></div>
<!-- Mon script avec un chemin relatif -->
<script type="module" src="projet.js"></script>
<p class="centre"> projet </p>
</body>
</html>
\ No newline at end of file
ALVARIZA-BILLAR_DESERT_KANY/projet.js 0 → 100644
+ 327
− 0
View file @ 792ca6f3
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Add a grassy plain underneath the drinking bird
////////////////////////////////////////////////////////////////////////////////
/*global THREE, $ */
import * as THREE from 'three';
import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import {dat} from '../webgl25/lib/dat.gui.min.js';
import {Coordinates} from '../webgl25/lib/Coordinates.js';
window.scene = new THREE.Scene();
var camera, renderer;
var cameraControls;
var bevelRadius = 1.9;
var clock = new THREE.Clock();
var cylinder,sphere,cube;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xAAAAAA, 3000, 5000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 0.7 );
light.position.set( 200, 500, 500 );
scene.add( light );
light = new THREE.DirectionalLight( 0xFFFFFF, 0.9 );
light.position.set( -200, -100, -400 );
scene.add( light );
// GROUND
// Student: texture is located at URL textures/grass512x512.jpg
var solidGround = new THREE.Mesh(
new THREE.PlaneGeometry( 10000, 10000, 100, 100 ),
new THREE.MeshLambertMaterial( { color: 0xFFFFFF } ) );
solidGround.rotation.x = - Math.PI / 2;
scene.add( solidGround );
// uncomment to see grid on ground
/*
// put grid lines every 10000/100 = 100 units
var ground = new THREE.Mesh(
new THREE.PlaneGeometry( 10000, 10000, 100, 100 ),
new THREE.MeshBasicMaterial( { color: 0x0, wireframe: true } ) );
ground.rotation.x = - Math.PI / 2;
// cheat: offset by a small amount so grid is on top
ground.position.y = 0.2;
scene.add( ground );
*/
// Bird
var bird = new THREE.Object3D();
createDrinkingBird( bird );
scene.add( bird );
}
function createSupport( bsupport ) {
var legMaterial = new THREE.MeshPhongMaterial( { shininess: 4 } );
legMaterial.color.setHex( 0xAdA79b );
legMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
var footMaterial = new THREE.MeshPhongMaterial( { color: 0x960f0b, shininess: 30 } );
footMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
// base
cube = new THREE.Mesh(
new THREE.BoxGeometry( 20+64+110, 4, 2*77+12 ), footMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 4/2; // half of height
cube.position.z = 0; // centered at origin
bsupport.add( cube );
// feet
cube = new THREE.Mesh(
new THREE.BoxGeometry( 20+64+110, 52, 6 ), footMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 52/2; // half of height
cube.position.z = 77 + 6/2; // offset 77 + half of depth 6/2
bsupport.add( cube );
cube = new THREE.Mesh(
new THREE.BoxGeometry( 20+64+110, 52, 6 ), footMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 52/2; // half of height
cube.position.z = -(77 + 6/2); // negative offset 77 + half of depth 6/2
bsupport.add( cube );
cube = new THREE.Mesh(
new THREE.BoxGeometry( 64, 104, 6 ), footMaterial );
cube.position.x = 0; // centered on origin along X
cube.position.y = 104/2;
cube.position.z = 77 + 6/2; // negative offset 77 + half of depth 6/2
bsupport.add( cube );
cube = new THREE.Mesh(
new THREE.BoxGeometry( 64, 104, 6 ), footMaterial );
cube.position.x = 0; // centered on origin along X
cube.position.y = 104/2;
cube.position.z = -(77 + 6/2); // negative offset 77 + half of depth 6/2
bsupport.add( cube );
// legs
cube = new THREE.Mesh(
new THREE.BoxGeometry( 60, 282+4, 4 ), legMaterial );
cube.position.x = 0; // centered on origin along X
cube.position.y = 104 + 282/2 - 2;
cube.position.z = 77 + 6/2; // negative offset 77 + half of depth 6/2
bsupport.add( cube );
cube = new THREE.Mesh(
new THREE.BoxGeometry( 60, 282+4, 4 ), legMaterial );
cube.position.x = 0; // centered on origin along X
cube.position.y = 104 + 282/2 - 2;
cube.position.z = -(77 + 6/2); // negative offset 77 + half of depth 6/2
bsupport.add( cube );
}
// Body of the bird - body and the connector of body and head
function createBody(bbody) {
var bodyMaterial = new THREE.MeshPhongMaterial( { shininess: 100 } );
bodyMaterial.color.setRGB( 31/255, 86/255, 169/255 );
bodyMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
var glassMaterial = new THREE.MeshPhongMaterial( { color: 0x0, specular: 0xFFFFFF, shininess: 100, opacity: 0.3, transparent: true } );
var crossbarMaterial = new THREE.MeshPhongMaterial( { color: 0x808080, specular: 0xFFFFFF, shininess: 400 } );
// body
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 104/2, 32, 16, 0, Math.PI * 2, Math.PI/2, Math.PI ), bodyMaterial );
sphere.position.x = 0;
sphere.position.y = 160;
sphere.position.z = 0;
bbody.add( sphere );
// cap for top of hemisphere
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 104/2, 104/2, 0, 32 ), bodyMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160;
cylinder.position.z = 0;
bbody.add( cylinder );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 12/2, 12/2, 390 - 100, 32 ), bodyMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390/2 - 100;
cylinder.position.z = 0;
bbody.add( cylinder );
// glass stem
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 116/2, 32, 16 ), glassMaterial );
sphere.position.x = 0;
sphere.position.y = 160;
sphere.position.z = 0;
bbody.add( sphere );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 24/2, 24/2, 390, 32 ), glassMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390/2;
cylinder.position.z = 0;
bbody.add( cylinder );
// crossbar
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 5, 5, 200, 32 ), crossbarMaterial );
cylinder.position.set( 0, 360, 0 );
cylinder.rotation.x = 90 * Math.PI / 180.0;
bbody.add( cylinder );
}
// Head of the bird - head + hat
function createHead(bhead) {
var headMaterial = new THREE.MeshLambertMaterial( );
headMaterial.color.r = 104/255;
headMaterial.color.g = 1/255;
headMaterial.color.b = 5/255;
var hatMaterial = new THREE.MeshPhongMaterial( { shininess: 100 } );
hatMaterial.color.r = 24/255;
hatMaterial.color.g = 38/255;
hatMaterial.color.b = 77/255;
hatMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
var eyeMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x303030, shininess: 4 } );
// head
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 104/2, 32, 16 ), headMaterial );
sphere.position.x = 0;
sphere.position.y = 160 + 390;
sphere.position.z = 0;
bhead.add( sphere );
// hat
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 142/2, 142/2, 10, 32 ), hatMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390 + 40 + 10/2;
cylinder.position.z = 0;
bhead.add( cylinder );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 80/2, 80/2, 70, 32 ), hatMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390 + 40 + 10 + 70/2;
cylinder.position.z = 0;
bhead.add( cylinder );
// nose
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 6, 14, 70, 32 ), headMaterial );
cylinder.position.set( -70, 530, 0 );
cylinder.rotation.z = 90 * Math.PI / 180.0;
bhead.add( cylinder );
// eyes
var sphGeom = new THREE.SphereGeometry( 10, 32, 16 );
// left eye
sphere = new THREE.Mesh( sphGeom, eyeMaterial );
sphere.position.set( -48, 560, 0 );
var eye = new THREE.Object3D();
eye.add( sphere );
eye.rotation.y = 20 * Math.PI / 180.0;
bhead.add( eye );
// right eye
sphere = new THREE.Mesh( sphGeom, eyeMaterial );
sphere.position.set( -48, 560, 0 );
eye = new THREE.Object3D();
eye.add( sphere );
eye.rotation.y = -20 * Math.PI / 180.0;
bhead.add( eye );
}
function createDrinkingBird(bbird) {
var support = new THREE.Object3D();
var body = new THREE.Object3D();
var head = new THREE.Object3D();
// MODELS
// base + legs + feet
createSupport(support);
// body + body/head connector
createBody(body);
// head + hat
createHead(head);
// make moving piece
var bodyhead = new THREE.Object3D();
bodyhead.add(body);
bodyhead.add(head);
bbird.add(support);
bbird.add(bodyhead);
}
function init() {
var canvasWidth = 846;
var canvasHeight = 494;
// For grading the window is fixed in size; here's general code:
//var canvasWidth = window.innerWidth;
//var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColor( 0xAAAAAA, 1.0 );
var container = document.getElementById( 'webGL');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 35, canvasRatio, 1, 8000 );
camera.position.set( -1230, 920, -670 );
// CONTROLS
cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
cameraControls.target.set(0,270,0);
}
function addToDOM() {
var container = document.getElementById( 'webGL');
var canvas = container.getElementsByTagName('canvas');
if (canvas.length>0) {
container.removeChild(canvas[0]);
}
container.appendChild( renderer.domElement );
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
renderer.render(scene, camera);
}
try {
init();
fillScene();
addToDOM();
animate();
} catch(e) {
var errorReport = "Your program encountered an unrecoverable error, can not draw on canvas. Error was:<br/><br/>";
$('#webGL').append(errorReport+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