An error occurred while loading the file. Please try again.
-
Rafiei authoredd64d7b49
<!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>Cube 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 Cube Demo</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();// Enable shadows in the renderer.renderer.shadowMap.enabled = true;// Create the cube and add it to the demo scene.const cubeGeometry = new THREE.BoxBufferGeometry(0.5, 0.5, 0.5);const cubeMaterials = [ new THREE.MeshLambertMaterial({ color: 0xff0000 }), // Red new THREE.MeshLambertMaterial({ color: 0x0000ff }), // Blue new THREE.MeshLambertMaterial({ color: 0x00ff00 }), // Green new THREE.MeshLambertMaterial({ color: 0xff00ff }), // Magenta new THREE.MeshLambertMaterial({ color: 0x00ffff }), // Cyan new THREE.MeshLambertMaterial({ color: 0xffff00 }) // Yellow ]; const cube = new THREE.Mesh(cubeGeometry, cubeMaterials); cube.position.set(0, 0, -1); cube.castShadow = true; // Enable shadow casting scene.add(cube);// // Create a sphere geometry.const sphereGeometry = new THREE.SphereBufferGeometry(0.3, 32, 32); // Adjust the radius and other parameters as needed.// // Create a material for the sphere (you can customize the color).const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });// // Create the sphere and add it to the scene.const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);sphere.position.set(1, 0, -1); // Position the sphere next to the cube.scene.add(sphere);const scene = new THREE.Scene();const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);directionalLight.position.set(10, 15, 10);scene.add(directionalLight);const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});<!-- three.js --><script src="https://unpkg.com/three@0.126.0/build/three.js"> </script>
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
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
const loader = new THREE.GLTFLoader();
let reticle;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
reticle = gltf.scene;
reticle.visible = false;
scene.add(reticle);
})
let flower;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
flower = gltf.scene;
});
// Create a render loop that allows us to draw on the AR view.
const onXRFrame = (time, frame) => {
// 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 another XRReferenceSpace that has the viewer as the origin.
const viewerSpace = await session.requestReferenceSpace('viewer');
// Perform hit testing using the viewer as origin.
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true);
const hitTestResults = frame.getHitTestResults(hitTestSource);
if (hitTestResults.length > 0 && reticle) {
const hitPose = hitTestResults[0].getPose(referenceSpace);
reticle.visible = true;
reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
reticle.updateMatrixWorld(true);
}
let flower;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
flower = gltf.scene;
});
session.addEventListener("select", (event) => {
if (flower) {
const clone = flower.clone();
clone.position.copy(reticle.position);
scene.add(clone);
}
});
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const renderer = new THREE.WebGLRenderer({
alpha: true,
preserveDrawingBuffer: true,
canvas: canvas,
context: gl
});
renderer.autoClear = false;
// 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");
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
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