Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Villard PierreFrederic
WebGL21
Commits
cacc2cc2
Commit
cacc2cc2
authored
Apr 05, 2021
by
CHIARI Jade
Browse files
Replace tableau.js
parent
f0e23bfb
Pipeline
#5251
passed with stage
in 14 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
chiari/tableau.js
View file @
cacc2cc2
...
...
@@ -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
;
cub
e
.
traverse
(
function
(
object
)
{
tabl
e
.
traverse
(
function
(
object
)
{
if
(
object
instanceof
THREE
.
Mesh
)
{
object
.
castShadow
=
true
;
object
.
receiveShadow
=
true
;
}
}
);
scene
.
add
(
cub
e
);
scene
.
add
(
tabl
e
);
}
...
...
@@ -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
"
);
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment