Commit cacc2cc2 authored by CHIARI Jade's avatar CHIARI Jade
Browse files

Replace tableau.js

parent f0e23bfb
Pipeline #5251 passed with stage
in 14 seconds
......@@ -9,7 +9,10 @@ var gridX = false;
var gridY = false;
var gridZ = false;
var axes = false;
var ground = true;
var textureCube;
var a, direction, position;
function init() {
......@@ -35,6 +38,7 @@ function init() {
camera.position.set( -125, 70, 150);
cameraControls.target.set(0,0,0);
fillScene();
}
......@@ -43,22 +47,18 @@ function creerAssiette(){
var assiette = new THREE.Object3D();
//
var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 0xBBBBBB} );
var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 0xBBBBBB, shininess: 100 } );
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 40, 40, 4,20), cylinderMaterial );
cylinder.position.x = 0;
cylinder.position.y = 20 + 4/2;
cylinder.position.z = 0;
new THREE.CylinderGeometry( 40, 40, 4,20), cylinderMaterial );
cylinder.position.y = 20 + 4/2;
assiette.add( cylinder );
//
cylinderMaterial.side = THREE.DoubleSide;
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 72, 40, 16, 20, 4, true ), cylinderMaterial );
cylinder.position.x = 0;
new THREE.CylinderGeometry( 72, 40, 16, 20, 4, true ), cylinderMaterial );
cylinder.position.y = 20+4 +16/2;
cylinder.position.z = 0;
assiette.add( cylinder );
......@@ -77,8 +77,12 @@ function creerPeche(){
var peche = new THREE.Object3D();
var normal = new THREE.TextureLoader().load('normal_peach.jpg');
var myTexture = new THREE.TextureLoader().load('peach5.png');
var sphereMaterial = new THREE.MeshPhongMaterial( { map:myTexture, normalMap:normal } );
//
var sphereMaterial = new THREE.MeshPhongMaterial( { color: 0xFF7E20 } );
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 20, 32, 16 ), sphereMaterial );
sphere.scale.x = 0.7;
......@@ -124,10 +128,11 @@ function creerPeche(){
function creerGrain(x, y, z){
var sphereMaterial = new THREE.MeshPhongMaterial( { color: 0x224422} );
var sphereMaterial = new THREE.MeshPhongMaterial( { color: 0xAAAA11, transparent: true, opacity: 0.9} );
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 5, 32, 16 ), sphereMaterial );
new THREE.SphereGeometry( 5, 16, 16 ), sphereMaterial );
sphere.position.x = x;
sphere.position.y = y;
sphere.position.z = z;
......@@ -270,21 +275,61 @@ function creerRaisin(){
function creerTable(){
var cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x0D0301 } );
var table= new THREE.Object3D();
var myTexture = new THREE.TextureLoader().load('wood4.png');
var tableMaterial = new THREE.MeshPhongMaterial( { color: 0x0D0301, map:myTexture } );
// plateau
var plateau = new THREE.Mesh(
new THREE.BoxGeometry( 720, 20, 400 ), tableMaterial );
table.add( plateau );
// pied 1
var cube = new THREE.Mesh(
new THREE.BoxGeometry( 450, 20, 250 ), cubeMaterial );
cube.position.x = 150;
cube.position.y = 10;
cube.position.z = -50;
new THREE.BoxGeometry( 20, 200, 20 ), tableMaterial );
cube.position.x = 720/2 - 30;
cube.position.y = -200/2 - 20/2;
cube.position.z = 400/2 - 30;
table.add( cube );
// pied 2
var cube2 = new THREE.Mesh(
new THREE.BoxGeometry( 20, 200, 20 ), tableMaterial );
cube2.position.x = 720/2 - 30;
cube2.position.y = -200/2 - 20/2;
cube2.position.z = -400/2 + 30;
table.add( cube2 );
// pied 3
var cube3 = new THREE.Mesh(
new THREE.BoxGeometry( 20, 200, 20 ), tableMaterial );
cube3.position.x = -720/2 + 30;
cube3.position.y = -200/2 - 20/2;
cube3.position.z = 400/2 - 30;
table.add( cube3 );
// pied 4
var cube4 = new THREE.Mesh(
new THREE.BoxGeometry( 20, 200, 20 ), tableMaterial );
cube4.position.x = -720/2 + 30;
cube4.position.y = -200/2 - 20/2;
cube4.position.z = -400/2 + 30;
table.add( cube4 );
table.position.x = 720/2 - 75;
table.position.y = 10;
table.position.z = -400/2 + 75;
cube.traverse( function ( object ) {
table.traverse( function ( object ) {
if ( object instanceof THREE.Mesh ) {
object.castShadow = true;
object.receiveShadow = true;
}
} );
scene.add( cube );
scene.add( table );
}
......@@ -324,7 +369,7 @@ function creerCouteau(){
couteau.add( cylinder );
// lame
var lameMaterial = new THREE.MeshPhongMaterial( { color: 0x333333, side: THREE.DoubleSide} );
var lameMaterial = new THREE.MeshPhongMaterial( { color: 0x333333, side: THREE.DoubleSide, specular:0xFFFFFF, envMap:textureCube} );
var plane = new THREE.Mesh(
new THREE.PlaneGeometry( 35, 6, 20), lameMaterial );
plane.position.x = 40/2 + 4 + 35/2;
......@@ -354,6 +399,78 @@ function creerCouteau(){
scene.add( couteau );
}
function creerTeapot(){
var teapotMaterial = new THREE.MeshPhongMaterial(
{ color: 0x666666, specular:0xFFFFFF, envMap:textureCube, reflectivity:1} );
var teapot = new THREE.Mesh(
new TeapotGeometry( 50, 8, true, true, true, true, true ),
teapotMaterial );
teapot.position.x = 300;
teapot.position.y = 20 + 48;
teapot.position.z = -200;
teapot.rotation.y = -135 *Math.PI/180;
teapot.traverse( function ( object ) {
if ( object instanceof THREE.Mesh ) {
object.castShadow = true;
object.receiveShadow = true;
}
} );
a = new THREE.Object3D();
a.animated = teapot;
a.add(teapot);
direction = 1;
position = 1;
scene.add( teapot );
}
function creerVerre(){
var verre = new THREE.Object3D();
//
var cylinderMaterial = new THREE.MeshPhongMaterial(
{ color: 0xFFFFFF,specular: 0xFFFFFF, shininess: 100, transparent: true, opacity: 0.2} );
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 15, 15, 4, 20), cylinderMaterial );
cylinder.position.y = 20 + 4/2;
verre.add( cylinder );
//
cylinderMaterial.side = THREE.DoubleSide;
var cylinder2 = new THREE.Mesh(
new THREE.CylinderGeometry( 15, 15, 30, 20, 4, true ), cylinderMaterial );
cylinder2.position.y = 20 + 4 + 30/2;
verre.add( cylinder2 );
// eau
var eauMaterial = new THREE.MeshPhongMaterial(
{ color: 0x00FFFF, transparent: true, opacity: 0.3} );
var eau = new THREE.Mesh(
new THREE.CylinderGeometry( 15, 15, 15, 20), eauMaterial );
eau.scale.set(0.9, 1, 0.9);
eau.position.y = 20 + 4 + 15/2;
verre.add( eau );
verre.position.x = 210;
verre.position.z = -110;
verre.traverse( function ( object ) {
if ( object instanceof THREE.Mesh ) {
object.castShadow = true;
object.receiveShadow = true;
}
} );
scene.add( verre );
}
function fillScene() {
......@@ -366,11 +483,12 @@ function fillScene() {
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var spotlight = new THREE.SpotLight( 0xFFFFFF, 1.0 );
spotlight.position.set( -200, 200, 0);
spotlight.angle = 20 * Math.PI / 180;
var spotlight = new THREE.SpotLight( 0xFFFFFF, 0.5 );
spotlight.position.set( -300, 300, 100);
spotlight.penumbra = 1;
spotlight.angle = 40 * Math.PI / 180;
spotlight.exponent = 1;
spotlight.target.position.set( 0, 0, 0 );
spotlight.target.position.set( 720/2, 0, -400/2 );
scene.add(ambientLight);
scene.add(light);
......@@ -384,9 +502,17 @@ function fillScene() {
spotlight.shadow.camera.far = 5000 // dimension far du Z-buffer
if (ground) {
Coordinates.drawGround({size:1000,color:0xAAAAAA});
}
// BACKGROUND
textureCube = new THREE.CubeTextureLoader()
.setPath('skybox/')
.load( ['px.png', 'nx.png',
'py.png', 'ny.png',
'pz.png', 'nz.png' ]);
scene.background = textureCube;
if (gridX) {
Coordinates.drawGrid({size:1000,scale:0.01});
}
......@@ -405,6 +531,8 @@ function fillScene() {
creerPeche();
creerRaisin()
creerCouteau();
creerTeapot();
creerVerre();
}
function addToDOM() {
......@@ -424,16 +552,29 @@ function animate() {
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newAxes !== axes)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
ground = effectController.newGround;
axes = effectController.newAxes;
fillScene();
}
a.animated.rotation.z += direction * 0.3 * Math.PI / 180;
a.animated.position.y += position;
if (a.animated.rotation.z > 0 * Math.PI / 180) {
direction = -1;
position = +1;
a.animated.rotation.z = 2 * (0 * Math.PI / 180) - a.animated.rotation.z;
} else if (a.animated.rotation.z < -45 * Math.PI
/ 180) {
direction = 1;
position = -1;
a.animated.rotation.z = 2 * (-45 * Math.PI / 180) - a.animated.rotation.z;
}
renderer.render(scene, camera);
}
......@@ -446,7 +587,6 @@ function setupGui() {
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newGround: ground,
newAxes: axes
};
......@@ -454,7 +594,6 @@ function setupGui() {
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, "newGround" ).name("Show ground");
gui.add( effectController, "newAxes" ).name("Show axes");
}
......
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