Skip to content

Commit 4179415

Browse files
feiyue-zfeiyue-z
committed
Initial commit
0 parents  commit 4179415

File tree

6 files changed

+166
-0
lines changed

6 files changed

+166
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
package-lock.json
3+
.gitattributes

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# three-sim
2+

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>My first three.js app</title>
6+
<style>
7+
body { margin: 0; }
8+
</style>
9+
</head>
10+
<body>
11+
<script type="module" src="/main.js"></script>
12+
</body>
13+
</html>

‎main.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import * as THREE from 'three';
2+
import { VRButton } from 'three/addons/webxr/VRButton.js';
3+
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);
11+
12+
const renderer = new THREE.WebGLRenderer();
13+
renderer.xr.enabled = true;
14+
renderer.setSize(window.innerWidth, window.innerHeight);
15+
16+
// Append DOM elements
17+
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);
26+
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);
33+
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+
// });
47+
48+
// Animate
49+
function animate() {
50+
requestAnimationFrame(animate);
51+
renderer.render(scene, camera);
52+
}
53+
animate();
54+
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');
65+
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.");
73+
}
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);

‎package.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"dependencies": {
3+
"three": "^0.173.0"
4+
},
5+
"devDependencies": {
6+
"vite": "^6.1.0"
7+
}
8+
}

‎src/scene.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as THREE from 'three';
2+
3+
let y = 5; // Initial height
4+
let v = 0; // Initial velocity
5+
const g = -9.81; // Gravity acceleration
6+
const dt = 0.016; // Time step (~60 FPS)
7+
8+
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);
13+
14+
// Ground plane
15+
const planeGeometry = new THREE.PlaneGeometry( 10, 10 );
16+
const planeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
17+
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
18+
plane.rotation.x = -Math.PI / 2;
19+
plane.position.y = -0.5;
20+
scene.add( plane );
21+
22+
sphere.position.y = y;
23+
return sphere;
24+
}
25+
26+
// 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;
38+
}
39+
40+
export { setupSimulation, updateSimulation };

0 commit comments

Comments
 (0)