Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Esguerra Montana
Web AR
Commits
9435d166
Commit
9435d166
authored
Jun 16, 2024
by
Esguerra Montana
Browse files
Update index.html
parent
983986bb
Pipeline
#9432
passed with stage
in 8 seconds
Changes
1
Pipelines
1
Show whitespace changes
Inline
Side-by-side
public/index.html
View file @
9435d166
...
...
@@ -23,11 +23,18 @@ async function activateXR() {
const
scene
=
new
THREE
.
Scene
();
// Add lighting to the scene
// Add lighting to the tetrahedro scene
//const light = new THREE.DirectionalLight(0xffffff, 1);
//light.position.set(1, 1, 1).normalize();
//scene.add(light);
// Add lighting to the house scene
const
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
light
.
position
.
set
(
1
,
1
,
1
).
normalize
();
light
.
position
.
set
(
5
,
10
,
7.5
);
light
.
castShadow
=
true
;
// Enable shadow casting
scene
.
add
(
light
);
const
ambientLight
=
new
THREE
.
AmbientLight
(
0x404040
);
// soft white light
scene
.
add
(
ambientLight
);
...
...
@@ -104,6 +111,12 @@ async function activateXR() {
var
wallMesh
=
new
THREE
.
Mesh
(
wallGeometry
,
wallMaterial
);
var
roofMesh
=
new
THREE
.
Mesh
(
roofGeometry
,
roofMaterial
);
// Enable shadows for the house meshes
wallMesh
.
castShadow
=
true
;
wallMesh
.
receiveShadow
=
true
;
roofMesh
.
castShadow
=
true
;
roofMesh
.
receiveShadow
=
true
;
// Position the house
wallMesh
.
position
.
set
(
0
,
-
1.5
,
-
3
);
roofMesh
.
position
.
set
(
0
,
-
1.5
,
-
3
);
...
...
@@ -112,7 +125,14 @@ async function activateXR() {
scene
.
add
(
wallMesh
);
scene
.
add
(
roofMesh
);
// Add a ground plane to receive shadows
const
groundGeometry
=
new
THREE
.
PlaneGeometry
(
10
,
10
);
const
groundMaterial
=
new
THREE
.
ShadowMaterial
({
opacity
:
0.5
});
const
groundMesh
=
new
THREE
.
Mesh
(
groundGeometry
,
groundMaterial
);
groundMesh
.
rotation
.
x
=
-
Math
.
PI
/
2
;
// Rotate to lie flat
groundMesh
.
position
.
y
=
-
1
;
// Position it below the house
groundMesh
.
receiveShadow
=
true
;
scene
.
add
(
groundMesh
);
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const
renderer
=
new
THREE
.
WebGLRenderer
({
...
...
@@ -122,6 +142,9 @@ async function activateXR() {
context
:
gl
});
renderer
.
autoClear
=
false
;
renderer
.
shadowMap
.
enabled
=
true
;
renderer
.
shadowMap
.
type
=
THREE
.
PCFSoftShadowMap
;
// The API directly updates the camera matrices.
// Disable matrix auto updates so three.js doesn't attempt
...
...
Write
Preview
Markdown
is supported
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