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
396471da
Commit
396471da
authored
Jun 16, 2024
by
Esguerra Montana
Browse files
Update index.html
parent
5ccea5c9
Pipeline
#9434
passed with stage
in 8 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/index.html
View file @
396471da
...
@@ -23,18 +23,16 @@ async function activateXR() {
...
@@ -23,18 +23,16 @@ async function activateXR() {
const
scene
=
new
THREE
.
Scene
();
const
scene
=
new
THREE
.
Scene
();
// Add lighting to the
tetrahedro
scene
// Add lighting to the scene
//
const light = new THREE.DirectionalLight(0xffffff, 1);
const
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
//
light.position.set(1, 1, 1).normalize();
light
.
position
.
set
(
1
,
1
,
1
).
normalize
();
//
scene.add(light);
scene
.
add
(
light
);
// Add lighting to the house scene
// Add lighting to the house scene
const
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
const
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
light
.
position
.
set
(
5
,
10
,
7.5
);
light
.
position
.
set
(
1
,
1
,
1
).
normalize
();
light
.
castShadow
=
true
;
// Enable shadow casting
scene
.
add
(
light
);
scene
.
add
(
light
);
const
ambientLight
=
new
THREE
.
AmbientLight
(
0x404040
);
// soft white light
const
ambientLight
=
new
THREE
.
AmbientLight
(
0x404040
);
// soft white light
scene
.
add
(
ambientLight
);
scene
.
add
(
ambientLight
);
...
@@ -91,32 +89,14 @@ async function activateXR() {
...
@@ -91,32 +89,14 @@ async function activateXR() {
roofGeometry
.
setIndex
(
new
THREE
.
BufferAttribute
(
roofIndices
,
1
));
roofGeometry
.
setIndex
(
new
THREE
.
BufferAttribute
(
roofIndices
,
1
));
// Create materials for walls and roof
// Create materials for walls and roof
var
wallMaterial
=
new
THREE
.
MeshPhysicalMaterial
({
var
wallMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0x8B4513
,
side
:
THREE
.
DoubleSide
});
color
:
0x8B4513
,
var
roofMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0xFF0000
,
side
:
THREE
.
DoubleSide
});
metalness
:
0.7
,
// Make it metallic
roughness
:
0.4
,
// Adjust for shininess
clearcoat
:
0.3
,
// Add clear coat for a polished effect
clearcoatRoughness
:
0.1
});
var
roofMaterial
=
new
THREE
.
MeshPhysicalMaterial
({
color
:
0xFF0000
,
metalness
:
0.9
,
// Make it more metallic
roughness
:
0.2
,
// Adjust for more shininess
clearcoat
:
0.3
,
clearcoatRoughness
:
0.1
});
// Create the wall and roof meshes
// Create the wall and roof meshes
var
wallMesh
=
new
THREE
.
Mesh
(
wallGeometry
,
wallMaterial
);
var
wallMesh
=
new
THREE
.
Mesh
(
wallGeometry
,
wallMaterial
);
var
roofMesh
=
new
THREE
.
Mesh
(
roofGeometry
,
roofMaterial
);
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
// Position the house
wallMesh
.
position
.
set
(
0
,
-
1.5
,
-
3
);
wallMesh
.
position
.
set
(
0
,
-
1.5
,
-
3
);
roofMesh
.
position
.
set
(
0
,
-
1.5
,
-
3
);
roofMesh
.
position
.
set
(
0
,
-
1.5
,
-
3
);
...
@@ -125,15 +105,6 @@ async function activateXR() {
...
@@ -125,15 +105,6 @@ async function activateXR() {
scene
.
add
(
wallMesh
);
scene
.
add
(
wallMesh
);
scene
.
add
(
roofMesh
);
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.
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const
renderer
=
new
THREE
.
WebGLRenderer
({
const
renderer
=
new
THREE
.
WebGLRenderer
({
alpha
:
true
,
alpha
:
true
,
...
@@ -142,9 +113,6 @@ async function activateXR() {
...
@@ -142,9 +113,6 @@ async function activateXR() {
context
:
gl
context
:
gl
});
});
renderer
.
autoClear
=
false
;
renderer
.
autoClear
=
false
;
renderer
.
shadowMap
.
enabled
=
true
;
renderer
.
shadowMap
.
type
=
THREE
.
PCFSoftShadowMap
;
// The API directly updates the camera matrices.
// The API directly updates the camera matrices.
// Disable matrix auto updates so three.js doesn't attempt
// 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