Commit fdb4a8c7 authored by MARTIN Tanguy's avatar MARTIN Tanguy
Browse files

Update index.js

parent 6f18615a
Pipeline #5199 passed with stage
in 13 seconds
"use strict";
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = false;
var gridY = false;
var gridZ = false;
var axes = false;
function loadShader(shadertype) {
return document.getElementById(shadertype).textContent;
}
function init() {
initLights();
initMaterials();
initScene();
}
function initLights() {
ambientLight = new THREE.AmbientLight( 0x333333, 1.0 );
fireLight = new THREE.PointLight(0xffffff, fireIntensity, 400, 2);
fireLight.color.setRGB(fireRed/255.,fireGreen/255.,fireBlue/255.);
fireLight.castShadow = true;
spotLight = new THREE.SpotLight(0xffffff, 0.3333 );
spotLight.castShadow = true;
}
function initMaterials() {
var fragment = loadShader("fire_fragment");
fireMaterial = new THREE.ShaderMaterial({
name : "FireMaterial",
uniforms: {
uMaterialColor: {
type: 'c',
value: new THREE.Color(0xffffff)
},
uFireIntensity: {
type:'f',
value: fireIntensity
}
},
vertexShader: vShader,
fragmentShader: fragment
});
var materialColor = new THREE.Color();
materialColor.setRGB(fireRed/255.,fireGreen/255.,fireBlue/255.);
fireMaterial.uniforms.uMaterialColor.value.copy(materialColor);
fragment = loadShader("character_fragment");
CharacterMaterialBase = new THREE.ShaderMaterial({
name: "CharacterMaterial",
side: THREE.DoubleSide,
transparent: true,
defines: {
TEXTURES_NUM: 1,
TEXTURE_INDICE: 0,
MAIN_CHARACTER: 3
},
uniforms: {
uTextures: {
type: 'tv',
value: null
},
uTextureIndice: {
type:'i',
value: 0
},
uBool: {
type: 'b',
value: true
},
uFireIntensity: {
type:'f',
value: fireIntensity
},
uFireLightColor: {
type:'c',
value: materialColor
},
uFireLightPos: {
value: fireLight.position
},
uAmbientLightColor: {
type:'c',
value: ambientLight.color
},
uFireLightRadius: {
type: 'f',
value: fireLight.distance
},
uSpotLightPos: {
value: spotLight.position
},
uSpotLightColor: {
type:'c',
value: spotLight.color
},
uSpotLightIntensity: {
type:'f',
value: spotLight.intensity
},
uCharacterType: {
type: 'i',
value: 0
}
},
vertexShader: vShader,
fragmentShader: fragment
});
}
function initScene() {
initPicture();
var canvasWidth = 667;
var canvasHeight = 920;
// 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( {
antialias: true
} );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColor( 0xAAAAAA, 1.0 );
renderer.setClearColor( 0x000000, 1.0 );
// CAMERA
camera = new THREE.PerspectiveCamera( 60, canvasRatio, 1, 40000 );
camera = new THREE.PerspectiveCamera( 70, canvasRatio, 1, 40000 );
// CONTROLS
cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.set( 0, 300, -570 );
cameraControls.target.set(0,100,0);
camera.position.set( 0, 180, -600 );
cameraControls.target.set(0,200,0);
spotLight.position.copy(camera.position);
spotLight.position.y += 500;
fillScene();
}
......@@ -38,38 +139,28 @@ function fillScene() {
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 3000, 6000 );
// 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( -400, 200, -300 );
scene.add(ambientLight);
//scene.add(light);
//scene.add(light2);
if (gridX) {
Coordinates.drawGrid({size:1000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:300,axisRadius:2,axisTess:50});
}
drawPicture(scene);
scene.add(spotLight);
scene.add(drawGround());
picture = drawPicture();
scene.add(picture);
drawHelpers();
}
function drawGround() {
const ground_box = new THREE.PlaneGeometry(10000,10000);
ground_box.rotateX(-Math.PI/2);
const ground_material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
shininess: 0,
} );
var mesh = new THREE.Mesh(ground_box,ground_material);
mesh.receiveShadow = true;
return mesh;
}
//
function addToDOM() {
var container = document.getElementById('webGL');
var canvas = container.getElementsByTagName('canvas');
......@@ -87,41 +178,177 @@ function animate() {
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newAxes !== axes)
if( effectController.newFireIntensity !== fireIntensity
|| effectController.newFireRed !== fireRed
|| effectController.newFireGreen !== fireGreen
|| effectController.newFireBlue !== fireBlue
) {
fireIntensity = effectController.newFireIntensity;
fireRed = effectController.newFireRed;
fireGreen = effectController.newFireGreen;
fireBlue = effectController.newFireBlue;
var materialColor = new THREE.Color();
materialColor.setRGB(fireRed/255.,fireGreen/255.,fireBlue/255.);
fireMaterial.uniforms.uMaterialColor.value.copy(materialColor);
fireLight.intensity = fireIntensity;
fireLight.color.copy(materialColor);
fireMaterial.uniforms.uFireIntensity.value = fireIntensity;
}
if ( effectController.newOpenBook !== interactiveStates.openBook
|| effectController.newLittleBernie !== littleBerniesValues[interactiveStates.littleBernie]
|| effectController.newFourchetteAngleX !== fourchetteAngleX
|| effectController.newFourchetteAngleY !== fourchetteAngleY
|| effectController.newFourchetteAngleZ !== fourchetteAngleZ
|| effectController.newCouteauAngleX !== couteauAngleX
|| effectController.newCouteauAngleY !== couteauAngleY
|| effectController.newCouteauAngleZ !== couteauAngleZ
) {
interactiveStates.openBook = effectController.newOpenBook;
interactiveStates.littleBernie = littleBerniesValues.indexOf(effectController.newLittleBernie);
fourchetteAngleX = effectController.newFourchetteAngleX;
fourchetteAngleY = effectController.newFourchetteAngleY;
fourchetteAngleZ = effectController.newFourchetteAngleZ;
fourchette.rotation.x = fourchetteAngleX*THREE.MathUtils.DEG2RAD;
fourchette.rotation.y = fourchetteAngleY*THREE.MathUtils.DEG2RAD;
fourchette.rotation.z = fourchetteAngleZ*THREE.MathUtils.DEG2RAD;
couteauAngleX = effectController.newCouteauAngleX;
couteauAngleY = effectController.newCouteauAngleY;
couteauAngleZ = effectController.newCouteauAngleZ;
couteau.rotation.x = couteauAngleX*THREE.MathUtils.DEG2RAD;
couteau.rotation.y = couteauAngleY*THREE.MathUtils.DEG2RAD;
couteau.rotation.z = couteauAngleZ*THREE.MathUtils.DEG2RAD;
}
if(effectController.newAssiettesAngle !== assiettesAngle) {
assiettesAngle = effectController.newAssiettesAngle;
for(var i = 0; i < assiettes.length; i++) {
assiettes[i].rotation.y = assiettesAngle*THREE.MathUtils.DEG2RAD;
}
}
if ( effectController.newGridX !== gridX
|| effectController.newGridY !== gridY
|| effectController.newGridZ !== gridZ
|| effectController.newAxes !== axes
|| effectController.newFireLightHelper !== fireLightHelper
|| effectController.newSpotLightHelper !== spotLightHelper
)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
axes = effectController.newAxes;
fireLightHelper = effectController.newFireLightHelper;
spotLightHelper = effectController.newSpotLightHelper;
fillScene();
}
for(var i = 0; i < characters.length; i++) {
characters[i].updateSprite();
}
renderer.render(scene, camera);
}
function setupGui() {
function drawHelpers() {
if (gridX) {
Coordinates.drawGrid({size:1000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:300,axisRadius:2,axisTess:50});
}
if(fireLightHelper) {
var firehelper = new THREE.CameraHelper( fireLight.shadow.camera );
scene.add( firehelper );
}
if(spotLightHelper) {
var spothelper = new THREE.CameraHelper( spotLight.shadow.camera);
scene.add(spothelper);
}
}
function setupGui() {
effectController = {
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newAxes: axes
newAxes: axes,
newFireLightHelper: fireLightHelper,
newSpotLightHelper: spotLightHelper,
newOpenBook: interactiveStates.openBook,
newLittleBernie: interactiveStates.littleBernie,
newFireIntensity: fireIntensity,
newFireRed: fireRed,
newFireGreen: fireGreen,
newFireBlue: fireBlue,
newReverberIntensity: reverberIntensity,
newReverberRed: reverberRed,
newReverberGreen: reverberGreen,
newReverberBlue: reverberBlue,
newAssiettesAngle: assiettesAngle,
newFourchetteAngleX: fourchetteAngleX,
newFourchetteAngleY: fourchetteAngleY,
newFourchetteAngleZ: fourchetteAngleZ,
newCouteauAngleX: couteauAngleX,
newCouteauAngleY: couteauAngleY,
newCouteauAngleZ: couteauAngleZ
};
var gui = new dat.GUI();
gui.add(effectController, "newGridX").name("Show XZ grid");
gui.add( effectController, "newGridY" ).name("Show YZ grid");
gui.add( effectController, "newGridZ" ).name("Show XY grid");
gui.add( effectController, "newAxes" ).name("Show axes");
var folder = gui.addFolder("Dev Help");
folder.add(effectController, "newGridX").name("Show XZ grid");
folder.add( effectController, "newGridY" ).name("Show YZ grid");
folder.add( effectController, "newGridZ" ).name("Show XY grid");
folder.add( effectController, "newAxes" ).name("Show axes");
folder.add( effectController, "newSpotLightHelper").name("Show Spot Light Helper");
gui.add(effectController, "newOpenBook").name("Open Book");
gui.add(effectController, "newLittleBernie", littleBerniesValues).name("Conny' Plush").setValue(littleBerniesValues[0]);
folder = gui.addFolder("Fire Light");
folder.add( effectController, "newFireLightHelper").name("Show Helper");
folder.add(effectController, "newFireIntensity", 0, 1, 0.01).name("Intensity");
folder.add(effectController, "newFireRed", 0, 255, 1).name("Red");
folder.add(effectController, "newFireGreen", 0, 255, 1).name("Green");
folder.add(effectController, "newFireBlue", 0, 255, 1).name("Blue");
gui.add(effectController, "newAssiettesAngle", 0, 360, 0.1).name("Rotation Assiettes");
var Couvfolder = gui.addFolder("Couverts");
folder = Couvfolder.addFolder("Fourchette");
folder.add(effectController, "newFourchetteAngleX", -90, 90, 0.1).name("Rotation X");
folder.add(effectController, "newFourchetteAngleY", 0, 360, 0.1).name("Rotation Y");
folder.add(effectController, "newFourchetteAngleZ", 0, 360, 0.1).name("Rotation Z");
folder.open();
folder = Couvfolder.addFolder("Couteau");
folder.add(effectController, "newCouteauAngleX", -90, 90, 0.1).name("Rotation X");
folder.add(effectController, "newCouteauAngleY", 0, 360, 0.1).name("Rotation Y");
folder.add(effectController, "newCouteauAngleZ", 0, 360, 0.1).name("Rotation Z");
folder.open();
}
try {
init();
setupGui();
addToDOM();
animate();
} catch(e) {
var errorReport = "Your program encountered an unrecoverable error, can not draw on canvas. Error was:<br/><br/>";
$('#container').append(errorReport+e);
function add() {
try {
init();
setupGui();
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+'<br/><br/><br/>'+e.stack);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment