Skip to content

Commit a913306

Browse files
feiyue-zfeiyue-z
committed
Add AR Passthrough
1 parent 4179415 commit a913306

File tree

6 files changed

+86
-105
lines changed

6 files changed

+86
-105
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules/
22
package-lock.json
3-
.gitattributes
3+
.gitattributes
4+
dist/

‎main.js

+29-84
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,45 @@
11
import * as THREE from 'three';
2-
import { VRButton } from 'three/addons/webxr/VRButton.js';
2+
// import { VRButton } from 'three/addons/webxr/VRButton.js';
3+
import { ARButton } from 'three/examples/jsm/webxr/ARButton.js';
4+
import { setupSimulation, updateSimulation } from './src/scene';
35

4-
// Scene Setup
5-
const scene = new THREE.Scene();
6-
scene.background = new THREE.Color(0x111111);
7-
scene.fog = new THREE.FogExp2(0xffffff, 0.02);
8-
9-
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
10-
camera.position.set(0, 3, 10);
6+
// Set up camera
7+
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 5000 );
8+
camera.position.set( 0, 2, 5 );
119

10+
// Set up renderer
1211
const renderer = new THREE.WebGLRenderer();
1312
renderer.xr.enabled = true;
14-
renderer.setSize(window.innerWidth, window.innerHeight);
13+
renderer.setSize( window.innerWidth, window.innerHeight );
14+
renderer.setAnimationLoop( animate ); // Start running animation loop
1515

1616
// Append DOM elements
1717
document.body.appendChild( renderer.domElement );
18-
document.body.appendChild( VRButton.createButton( renderer ) );
19-
20-
// Add Light
21-
const spotLight = new THREE.SpotLight(0xffffff, 10, 50, Math.PI / 4, 0.3);
22-
spotLight.position.set(0, 10, 5);
23-
spotLight.target.position.set(0, 0, 0);
24-
scene.add(spotLight);
25-
scene.add(spotLight.target);
18+
// document.body.appendChild( VRButton.createButton( renderer ) );
19+
document.body.appendChild( ARButton.createButton( renderer ) );
2620

27-
// Add Visible Object
28-
const geometry = new THREE.SphereGeometry(1, 32, 32);
29-
const material = new THREE.MeshStandardMaterial({ color: 0xffaa00 });
30-
const sphere = new THREE.Mesh(geometry, material);
31-
sphere.position.set(0, 1, 0);
32-
scene.add(sphere);
3321

34-
// if (navigator.xr) {
35-
// const session = await navigator.xr.requestSession( "immersive-ar", {
36-
// requiredFeatures: [ "plane-detection" ]
37-
// } ).then( (session) => {
38-
// console.log( 'Depth sensing enabled:', session );
39-
// } );
40-
// }
41-
42-
// const session = await navigator.xr.requestSession('immersive-ar', {
43-
// requiredFeatures: ['mesh-detection']
44-
// }).then((session) => {
45-
// console.log('Scene Understanding Enabled!', session);
46-
// });
22+
//
23+
const scene = new THREE.Scene();
24+
scene.background = null;
25+
// const sphere = setupSimulation( scene );
26+
const particles = setupSimulation( scene );
4727

48-
// Animate
4928
function animate() {
50-
requestAnimationFrame(animate);
51-
renderer.render(scene, camera);
29+
// requestAnimationFrame( animate ); // ??
30+
// updateSimulation( sphere );
31+
updateSimulation( particles );
32+
renderer.render( scene, camera );
5233
}
53-
animate();
5434

55-
if ("xr" in window.navigator) {
56-
/* WebXR can be used! */
57-
console.log("a");
58-
} else {
59-
/* WebXR isn't available */
60-
console.log("b");
61-
}
62-
63-
try {
64-
const supported = await navigator.xr.isSessionSupported('immersive-ar');
35+
navigator.xr.isSessionSupported('immersive-ar').then(supported => {
6536
if (supported) {
66-
const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['plane-detection'] })
67-
.catch(() => console.warn("Plane detection not supported on this device."));
68-
if (session) {
69-
console.log("XR session with plane detection started.");
70-
}
71-
} else {
72-
console.warn("XR immersive AR not supported on this device.");
37+
navigator.xr.requestSession('immersive-ar', {
38+
requiredFeatures: ['plane-detection']
39+
}).then(session => {
40+
renderer.xr.setSession(session);
41+
}).catch(err => {
42+
console.warn("Feature not supported:", err);
43+
});
7344
}
74-
} catch (err) {
75-
console.error("Error checking XR support:", err);
76-
}
77-
78-
// async function checkXRSupport() {
79-
// if (navigator.xr) {
80-
// try {
81-
// const supported = await navigator.xr.isSessionSupported('immersive-ar');
82-
// if (supported) {
83-
// const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['plane-detection'] })
84-
// .catch(() => console.warn("Plane detection not supported on this device."));
85-
// if (session) {
86-
// console.log("XR session with plane detection started.");
87-
// }
88-
// } else {
89-
// console.warn("XR immersive AR not supported on this device.");
90-
// }
91-
// } catch (err) {
92-
// console.error("Error checking XR support:", err);
93-
// }
94-
// } else {
95-
// console.warn("WebXR not supported in this browser.");
96-
// }
97-
// }
98-
99-
// // Call this function in response to a user action (e.g., button click)
100-
// document.getElementById("startXR").addEventListener("click", checkXRSupport);
45+
});

‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
"three": "^0.173.0"
44
},
55
"devDependencies": {
6+
"gh-pages": "^6.3.0",
67
"vite": "^6.1.0"
8+
},
9+
"scripts": {
10+
"dev": "vite",
11+
"build": "vite build"
712
}
813
}

‎src/Particle.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as THREE from 'three';
2+
3+
export default class Particle extends THREE.Mesh {
4+
constructor( options = {} ) {
5+
// Default options that can be overridden
6+
const {
7+
position = [0, 0, 0],
8+
radius = 0.05,
9+
color = 0xff0000,
10+
velocity = 0,
11+
} = options;
12+
13+
const geometry = new THREE.SphereGeometry( radius );
14+
const material = new THREE.MeshBasicMaterial( { color } );
15+
16+
super( geometry, material );
17+
this.position.set( ...position );
18+
this.velocity = velocity;
19+
}
20+
}

‎src/scene.js

+25-20
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,45 @@
11
import * as THREE from 'three';
2+
import Particle from './Particle';
23

3-
let y = 5; // Initial height
4-
let v = 0; // Initial velocity
54
const g = -9.81; // Gravity acceleration
65
const dt = 0.016; // Time step (~60 FPS)
76

7+
let particles = [];
8+
89
function setupSimulation( scene ) {
9-
const geometry = new THREE.SphereGeometry( 0.5, 32, 32 );
10-
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
11-
const sphere = new THREE.Mesh( geometry, material );
12-
scene.add( sphere);
10+
for (let i = 0; i < 10; i++) {
11+
let p = new Particle( {position: [ i * 0.5, 0, 1 ] } );
12+
scene.add( p );
13+
particles.push( p );
14+
}
1315

1416
// Ground plane
1517
const planeGeometry = new THREE.PlaneGeometry( 10, 10 );
1618
const planeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
1719
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
1820
plane.rotation.x = -Math.PI / 2;
19-
plane.position.y = -0.5;
21+
plane.position.y = -1;
2022
scene.add( plane );
2123

22-
sphere.position.y = y;
23-
return sphere;
24+
particles.forEach( ( p ) => {
25+
p.position.y = 5; // Initial height
26+
} )
27+
28+
return particles;
2429
}
2530

2631
// Update physics simulation
27-
function updateSimulation( sphere ) {
28-
v += g * dt;
29-
y += v * dt;
30-
31-
// Collision detection
32-
if ( y <= 0.5 ) { // Adjust for sphere radius
33-
y = 0.5;
34-
v = 0; // Stop falling
35-
}
36-
37-
sphere.position.y = y;
32+
function updateSimulation( particles ) {
33+
particles.forEach( ( p ) => {
34+
p.velocity += g * dt;
35+
p.position.y += p.velocity * dt;
36+
37+
// Collision detection
38+
if ( p.position.y <= -0.95 ) {
39+
p.position.y = -0.95;
40+
p.velocity = 0;
41+
}
42+
} );
3843
}
3944

4045
export { setupSimulation, updateSimulation };

‎vite.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { defineConfig } from 'vite';
2+
3+
export default defineConfig({
4+
base: '/three-sim.github.io/'
5+
});

0 commit comments

Comments
 (0)