An error occurred while loading the file. Please try again.
-
Esguerra Montana authored9435d166
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Basic Geometries Demo</title> <!-- three.js --> <script src="https://unpkg.com/three@0.126.0/build/three.js"></script></head><body><!-- Starting an immersive WebXR session requires user interaction. We start this one with a simple button. --><button onclick="activateXR()">Start Static Geometries</button><script>async function activateXR() { // Add a canvas element and initialize a WebGL context that is compatible with WebXR. const canvas = document.createElement("canvas"); document.body.appendChild(canvas); const gl = canvas.getContext("webgl", {xrCompatible: true}); const scene = new THREE.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(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); // Color of the tetrahedron geometry. //const material = new THREE.MeshPhysicalMaterial({ color: 0xC70039, roughness: 0.5, metalness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.1 }); // Create the tetrahedron and add it to the demo scene. //const tetrahedron = new THREE.Mesh(new THREE.TetrahedronGeometry(0.5), material); // Position the tetrahedron //tetrahedron.position.set(0, 0, -1); // Add the mesh to the scene //scene.add(tetrahedron);// Define the vertices var vertices = new Float32Array([ -1.0, 0.0, 1.0, // P0 1.0, 0.0, 1.0, // P1 1.0, 0.0, -1.0, // P2 -1.0, 0.0, -1.0, // P3 -1.0, 2.0, 1.0, // P4 1.0, 2.0, 1.0, // P5 1.0, 2.0, -1.0, // P6 -1.0, 2.0, -1.0, // P7 0.0, 3.0, 0.0 // P8 ]); // Define the indices for the walls var wallIndices = new Uint16Array([ 0, 1, 5, 0, 5, 4, // Front face 1, 2, 6, 1, 6, 5, // Right face 2, 3, 7, 2, 7, 6, // Back face
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
3, 0, 4, 3, 4, 7, // Left face
4, 5, 6, 4, 6, 7 // Top face
]);
// Define the indices for the roof
var roofIndices = new Uint16Array([
4, 5, 8, // Front roof face
5, 6, 8, // Right roof face
6, 7, 8, // Back roof face
7, 4, 8 // Left roof face
]);
// Create the wall geometry
var wallGeometry = new THREE.BufferGeometry();
wallGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
wallGeometry.setIndex(new THREE.BufferAttribute(wallIndices, 1));
// Create the roof geometry
var roofGeometry = new THREE.BufferGeometry();
roofGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
roofGeometry.setIndex(new THREE.BufferAttribute(roofIndices, 1));
// Create materials for walls and roof
var wallMaterial = new THREE.MeshPhysicalMaterial({
color: 0x8B4513,
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
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);
// Add the meshes to the scene
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({
alpha: true,
preserveDrawingBuffer: true,
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
canvas: canvas,
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
// to handle the matrices independently.
const camera = new THREE.PerspectiveCamera();
camera.matrixAutoUpdate = false;
// Initialize a WebXR session using "immersive-ar".
const session = await navigator.xr.requestSession("immersive-ar");
session.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
// A 'local' reference space has a native origin that is located
// near the viewer's position at the time the session was created.
const referenceSpace = await session.requestReferenceSpace('local');
// Create a render loop that allows us to draw on the AR view.
const onXRFrame = (time, frame) => {
// Queue up the next draw request.
session.requestAnimationFrame(onXRFrame);
// Bind the graphics framebuffer to the baseLayer's framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(referenceSpace);
if (pose) {
// In mobile AR, we only have one view.
const view = pose.views[0];
const viewport = session.renderState.baseLayer.getViewport(view);
renderer.setSize(viewport.width, viewport.height);
// Use the view's transform matrix and projection matrix to configure the THREE.camera.
camera.matrix.fromArray(view.transform.matrix);
camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true);
// Render the scene with THREE.WebGLRenderer.
renderer.render(scene, camera);
}
};
session.requestAnimationFrame(onXRFrame);
}
</script>
</body>
</html>