Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
W
webgl25
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
RIFI Zaynab
webgl25
Commits
00957ca0
Commit
00957ca0
authored
2 months ago
by
DeRycke Leanne
Browse files
Options
Downloads
Patches
Plain Diff
Edit chambre.js
parent
5ff8cd0d
No related branches found
No related tags found
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
DUFOUR/chambre.js
+102
-18
102 additions, 18 deletions
DUFOUR/chambre.js
with
102 additions
and
18 deletions
DUFOUR/chambre.js
+
102
−
18
View file @
00957ca0
"
use strict
"
;
import
*
as
THREE
from
'
three
'
;
"
use strict
"
;
import
*
as
THREE
from
'
three
'
;
import
{
OrbitControls
}
from
'
three/addons/controls/OrbitControls.js
'
;
import
{
GLTFLoader
}
from
'
three/examples/jsm/loaders/GLTFLoader.js
'
;
import
{
Coordinates
}
from
'
./lib/Coordinates.js
'
;
var
camera
,
renderer
;
var
windowScale
;
window
.
scene
=
new
THREE
.
Scene
();
var
cameraControls
;
var
clock
=
new
THREE
.
Clock
();
var
transparentCube
;
// Objet autour duquel la caméra tournera
var
transparentCube
;
function
fillScene
()
{
scene
=
new
THREE
.
Scene
();
...
...
@@ -34,20 +37,102 @@ function fillScene() {
var
cubeGeometry
=
new
THREE
.
BoxGeometry
(
100
,
100
,
100
);
transparentCube
=
new
THREE
.
Mesh
(
cubeGeometry
,
transparentMaterial
);
transparentCube
.
position
.
set
(
0
,
50
,
0
);
// Position du cube
transparentCube
.
position
.
set
(
0
,
50
,
0
);
scene
.
add
(
transparentCube
);
// Sol
var
solTexture
=
new
THREE
.
TextureLoader
().
load
(
'
sol_boiserie.jpg
'
);
solTexture
.
wrapS
=
THREE
.
RepeatWrapping
;
solTexture
.
wrapT
=
THREE
.
RepeatWrapping
;
solTexture
.
repeat
.
set
(
4
,
4
);
var
solMaterial
=
new
THREE
.
MeshBasicMaterial
({
map
:
solTexture
});
var
sol
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
1000
,
1000
),
solMaterial
);
sol
.
rotation
.
x
=
-
Math
.
PI
/
2
;
sol
.
position
.
y
=
0
;
scene
.
add
(
sol
);
// Ajout du lit
var
bed
=
new
THREE
.
TextureLoader
().
load
(
'
lit.png
'
);
var
bedMaterial
=
new
THREE
.
MeshBasicMaterial
({
map
:
bed
});
var
bedSizeLength
=
400
,
bedSizeHeight
=
200
,
bedSizeWidth
=
200
;
var
bedGeometry
=
new
THREE
.
BoxGeometry
(
bedSizeLength
,
bedSizeHeight
,
bedSizeWidth
);
bed
=
new
THREE
.
Mesh
(
bedGeometry
,
bedMaterial
);
//bed = new THREE.Mesh(bedGeometry);
var
bedTexture
=
new
THREE
.
TextureLoader
().
load
(
'
lit.png
'
);
var
bedMaterial
=
new
THREE
.
MeshBasicMaterial
({
map
:
bedTexture
});
var
bedGeometry
=
new
THREE
.
BoxGeometry
(
400
,
20
,
200
);
var
bed
=
new
THREE
.
Mesh
(
bedGeometry
,
bedMaterial
);
bed
.
position
.
set
(
200
,
100
,
425
);
window
.
scene
.
add
(
bed
);
scene
.
add
(
bed
);
// Chaise
var
chaiseTexture
=
new
THREE
.
TextureLoader
().
load
(
'
chaise.jpg
'
);
var
chaiseMaterial
=
new
THREE
.
MeshBasicMaterial
({
map
:
chaiseTexture
});
var
seat
=
new
THREE
.
Mesh
(
new
THREE
.
BoxGeometry
(
100
,
10
,
100
),
chaiseMaterial
);
seat
.
position
.
set
(
-
300
,
50
,
0
);
var
backrest
=
new
THREE
.
Mesh
(
new
THREE
.
BoxGeometry
(
100
,
150
,
10
),
chaiseMaterial
);
backrest
.
position
.
set
(
-
300
,
125
,
-
45
);
scene
.
add
(
seat
,
backrest
);
// Table
var
tableTexture
=
new
THREE
.
TextureLoader
().
load
(
'
table_bois.jpg
'
);
var
tableMaterial
=
new
THREE
.
MeshBasicMaterial
({
map
:
tableTexture
});
var
table
=
new
THREE
.
Mesh
(
new
THREE
.
BoxGeometry
(
300
,
150
,
200
),
tableMaterial
);
table
.
position
.
set
(
-
100
,
75
,
200
);
scene
.
add
(
table
);
// Tableau sur le mur
var
paintingTexture
=
new
THREE
.
TextureLoader
().
load
(
'
tableau_van_gogh.jpg
'
);
var
paintingMaterial
=
new
THREE
.
MeshBasicMaterial
({
map
:
paintingTexture
});
var
painting
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
120
,
90
),
paintingMaterial
);
painting
.
position
.
set
(
250
,
350
,
-
499
);
scene
.
add
(
painting
);
// Portes
var
porteTexture
=
new
THREE
.
TextureLoader
().
load
(
'
porte.jpg
'
);
var
porteMaterial
=
new
THREE
.
MeshBasicMaterial
({
map
:
porteTexture
});
var
porte1
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
150
,
250
),
porteMaterial
);
porte1
.
position
.
set
(
-
100
,
125
,
490
);
scene
.
add
(
porte1
);
var
porte2
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
150
,
250
),
porteMaterial
);
porte2
.
position
.
set
(
-
125
,
125
,
-
499
);
scene
.
add
(
porte2
);
porte1
.
renderOrder
=
1
;
// Assure que la porte est rendue après le mur
// Murs
var
murTexture
=
new
THREE
.
TextureLoader
().
load
(
'
mur_bleu.jpg
'
);
var
murMaterial
=
new
THREE
.
MeshBasicMaterial
({
map
:
murTexture
});
var
backmur
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
1000
,
600
),
murMaterial
);
backmur
.
position
.
set
(
0
,
300
,
-
500
);
scene
.
add
(
backmur
);
var
leftmur
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
1000
,
600
),
murMaterial
);
leftmur
.
rotation
.
y
=
Math
.
PI
/
2
;
leftmur
.
position
.
set
(
-
500
,
300
,
0
);
scene
.
add
(
leftmur
);
var
rightmur
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
1000
,
600
),
murMaterial
);
rightmur
.
rotation
.
y
=
-
Math
.
PI
/
2
;
rightmur
.
position
.
set
(
500
,
300
,
0
);
scene
.
add
(
rightmur
);
var
frontmur
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
1000
,
600
),
murMaterial
);
frontmur
.
rotation
.
y
=
Math
.
PI
;
frontmur
.
position
.
set
(
0
,
300
,
500
);
scene
.
add
(
frontmur
);
}
function
loadModel
()
{
const
loader
=
new
GLTFLoader
();
loader
.
load
(
'
wooden_bed.glb
'
,
function
(
gltf
)
{
const
model
=
gltf
.
scene
;
model
.
scale
.
set
(
1
,
1
,
1
);
// Ajuste l'échelle si nécessaire
model
.
position
.
set
(
0
,
0
,
0
);
// Ajuste la position du modèle
scene
.
add
(
model
);
// Ajoute le modèle à la scène
},
undefined
,
function
(
error
)
{
console
.
error
(
'
Erreur de chargement du modèle:
'
,
error
);
});
}
function
init
()
{
...
...
@@ -67,9 +152,9 @@ function init() {
camera
.
position
.
set
(
-
500
,
125
,
-
100
);
camera
.
lookAt
(
new
THREE
.
Vector3
(
0
,
0
,
0
));
// CONTROLS
(L'utilisateur peut tourner la caméra)
// CONTROLS
cameraControls
=
new
OrbitControls
(
camera
,
renderer
.
domElement
);
cameraControls
.
enableDamping
=
true
;
// Ajoute un effet d'inertie
cameraControls
.
enableDamping
=
true
;
cameraControls
.
dampingFactor
=
0.05
;
cameraControls
.
rotateSpeed
=
1.0
;
}
...
...
@@ -90,17 +175,16 @@ function animate() {
function
render
()
{
var
delta
=
clock
.
getDelta
();
cameraControls
.
update
();
// Mise à jour des contrôles de la caméra
cameraControls
.
update
();
renderer
.
render
(
window
.
scene
,
camera
);
}
// Lancement du programme
try
{
init
();
fillScene
();
loadModel
();
animate
();
addToDOM
();
}
catch
(
e
)
{
var
errorReport
=
"
Your program encountered an unrecoverable error, cannot draw on canvas. Error was:<br/><br/>
"
;
$
(
'
#webGL
'
).
append
(
errorReport
+
e
);
console
.
error
(
"
Erreur lors du rendu:
"
,
e
);
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment