Creation d'une scène avec un mur, une table, un bol

MEHIAOUI/projet.js

+"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
+////////////////////////////////////////////////////////////////////////////////
+// Particle System
+////////////////////////////////////////////////////////////////////////////////
+/*global THREE, document, window, $*/
+import * as THREE from 'three';
+import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import {dat} from '../../lib/dat.gui.min.js';
+
+
+var camera, scene, renderer;
+
+var windowScale;
+window.scene = new THREE.Scene();
+
+import {Coordinates} from '../../lib/Coordinates.js';
+
+var cameraControls;
+
+var clock = new THREE.Clock();
+
+function fillScene() {
+    window.scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
+
+    // LIGHTS
+    var ambientLight = new THREE.AmbientLight( 0x222222 );
+    var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
+    light.position.set( 200, 400, 500 );
+
+    var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
+    light2.position.set( -500, 250, -200 );
+
+    window.scene.add(ambientLight);
+    window.scene.add(light);
+    window.scene.add(light2);
+
+    //Chargement textures
+    var texture_bowl = new THREE.TextureLoader().load('textures/bowl_texture.jpg');
+
+    // table
+    var table = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 1, 32), new THREE.MeshPhongMaterial({color: 0xE3963E}));
+    table.position.set(-10, 0, 5); 
+
+    // bol de fruits
+    var bolGeometry = new THREE.SphereGeometry(5, 32, 32, 0, Math.PI * 2, 0, Math.PI / 2);
+    var bolMaterial = new THREE.MeshPhongMaterial({side: THREE.DoubleSide, map: texture_bowl });
+    var bol = new THREE.Mesh(bolGeometry, bolMaterial);
+    bol.position.set(-15, 5, 5);
+    bol.rotation.x = Math.PI;
+
+
+
+    // pomme sur la table
+    //var apple = new THREE.Mesh(new THREE.SphereGeometry(1, 22, 22), new THREE.MeshPhongMaterial({color: 0x00ff00}));
+    //apple.position.set(-15, 1.5, 10); 
+    // tige de la pomme
+    //var tige = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.1, 1, 32), new THREE.MeshPhongMaterial({color: 0x8B4513}));
+    //tige.position.set(-15, 2.5, 10); 
+
+    // texture de la pomme
+    /*var texture = new THREE.TextureLoader().load('textures_Pommes/texture_pomme_rouge.jpg');
+    var material = new THREE.MeshPhongMaterial({map: texture});
+    apple.material = material;*/
+
+    // mur derrière la table
+    var mur = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 1), new THREE.MeshPhongMaterial({color: 0x8B413}));
+    mur.position.set(0, 25, -5.5); 
+
+    // ajout des objets à la scène
+    //window.scene.add(tige);
+    //window.scene.add(apple);
+    window.scene.add(table);
+    window.scene.add(mur);
+    window.scene.add(bol);
+    
+
+    Coordinates.drawGround({size:10000}); // width and height of ground plane
+    //Coordinates.drawGrid({size:10000,scale:0.01});
+    //Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
+}
+
+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 = new THREE.WebGLRenderer( { clearAlpha: 1 } );
+	renderer.gammaInput = true;
+	renderer.gammaOutput = true;
+	renderer.setSize(canvasWidth, canvasHeight);
+	renderer.setClearColor( 0xAAAAAA, 1.0 );
+
+	// CAMERA
+	camera = new THREE.PerspectiveCamera( 35, canvasRatio, 2, 8000 );
+	camera.position.set(0, 5, 50 );
+    camera.lookAt(new THREE.Vector3(0,5,50));
+	// CONTROLS
+	cameraControls = new OrbitControls(camera, renderer.domElement);
+	cameraControls.target.set(0,5,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(window.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