Skip to content

Commit 8efc124

Browse files
marwiemarwie
committed
adjust react sample
1 parent a235cf8 commit 8efc124

File tree

3 files changed

+40
-60
lines changed

3 files changed

+40
-60
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" href="favicon.ico">
6-
<!-- <meta name="viewport" content="width=device-width, user-scalable=no"> -->
6+
<meta name="viewport" content="width=device-width, user-scalable=no">
77

88
<title>Made with Needle</title>
99
<meta name="description" content="🌵 Made with Needle Engine">

‎src/App.tsx‎

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
1-
import React, { useRef } from 'react'
1+
import React from 'react'
22
import { NeedleEngine } from './NeedleEngine';
3-
import { GameObject, onStart, Rigidbody } from '@needle-tools/engine';
4-
import { Vector3 } from 'three';
3+
import { NeedleXRSession, onStart, WebXR } from '@needle-tools/engine';
54

6-
function randFloat(min: number, max: number) {
7-
return Math.random() * (max - min) + min;
8-
}
95

106
const App = () => {
117

12-
// Fetch rigidbodies from needle
13-
const bodies: Rigidbody[] = [];
14-
onStart(_context => {
15-
bodies.push(...GameObject.findObjectsOfType(Rigidbody));
16-
})
17-
18-
const performJump = () => {
19-
const vec = new Vector3(0, 1, 0);
20-
bodies.forEach((body) => {
21-
vec.set(0, randFloat(0.5, 5), 0);
22-
body.applyImpulse(vec);
8+
const startWebXR = () => {
9+
return onStart(ctx => {
10+
const webxr = ctx.scene.getOrAddComponent(WebXR);
11+
webxr.autoPlace = false; // disable auto placement, we want the user to tap to place the scene
12+
webxr.usePlacementReticle = true; // show the placement reticle to help the user find surfaces to place the scene
13+
webxr.usePlacementAdjustment = true; // allow the user to adjust the position, rotation and scale of the scene with touch after placing
14+
webxr.arScale = 5; // scale of the user in AR (larger values make the scene smaller in AR)
15+
webxr.enterAR(); // start AR session
2316
})
2417
};
2518

19+
const clickButton = () => {
20+
const session = NeedleXRSession.active;
21+
if (session) {
22+
const newScale = Math.random() * 2 + 0.5;
23+
session.rig?.gameObject.scale.set(newScale, newScale, newScale);
24+
}
25+
}
26+
2627
return (
2728
<>
2829
<div className="top">
@@ -34,16 +35,12 @@ const App = () => {
3435
</div>
3536
<div id="container" className="needle-container">
3637
<NeedleEngine style={{ position: "relative", display: "flex" }} loading-style="light">
37-
<div style={{ width: "100%", heigth: "100%" }}>
38-
<button type="button" onClick={performJump} className="jump-button">Squish!</button>
39-
</div>
38+
<button className="desktop xrbutton" type="button" onClick={startWebXR} >
39+
Start WebXR
40+
</button>
41+
<h2 className="ar xrbutton" onClick={clickButton}>Hello AR</h2>
4042
</NeedleEngine>
4143
</div>
42-
<div className="bottom">
43-
The canvas can be transparent allowing for a seamless experience.
44-
<br />
45-
Visit <a href="https://needle.tools" target="_blank">needle.tools</a> for more information.
46-
</div>
4744
</>
4845
);
4946
};

‎src/styles/style.css‎

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,8 @@ body {
99
background-color: black;
1010
padding: 0;
1111
margin: 0;
12-
min-height: 100vh;
13-
min-height: -webkit-fill-available;
1412
font-family: 'Roboto', sans-serif;
15-
background: #e0eefd;
16-
background-image: linear-gradient(to right top, #6ee2ff, #88d5f6, #9cc8e8, #a8bcd6, #adb2c2, #a5a7b9, #9e9caf, #9791a5, #8c80a2, #836e9d, #7c5c97, #754990);
13+
background: #555;
1714
overflow: hidden;
1815
color: black;
1916
}
@@ -26,30 +23,18 @@ a {
2623
color: inherit;
2724
}
2825

29-
#main {
30-
background-color: black;
31-
width: 10%;
32-
height: 10%;
33-
position: absolute;
34-
top: 0;
35-
left: 0;
36-
z-index: 1;
37-
display: flex;
38-
flex-direction: column;
39-
user-select: none;
40-
}
41-
4226
.needle-container {
43-
height: calc(100vh - 6rem);
27+
position: relative;
28+
height: 100%;
4429
display: flex;
4530
justify-content: center;
4631
align-items: center;
4732
}
4833

49-
.jump-button {
34+
.xrbutton {
5035
position: absolute;
51-
bottom: 120px;
5236
left: 50%;
37+
bottom: 15%;
5338
transform: translateX(-50%);
5439

5540
box-shadow: inset 0px 0px 0px 0px #ffffff;
@@ -59,51 +44,49 @@ a {
5944
border: 1px solid rgba(255, 255, 255, .3);
6045
display: inline-block;
6146
cursor: pointer;
62-
font-size: 2rem;
47+
font-size: 1.5rem;
6348
text-decoration: none;
6449

6550
transition: all .1s ease;
6651
padding: .2em .8em;
6752
}
6853

69-
.jump-button:hover {
54+
.xrbutton:hover {
7055
background-color: #f1f1f1;
7156
font-size: 1.9em;
7257
}
7358

74-
.jump-button:active {
59+
.xrbutton:active {
7560
font-size: 1.5em;
7661
}
7762

7863
.top {
7964
position: absolute;
8065
top: 2em;
81-
font-size: 1.7rem;
66+
font-size: 1.3em;
8267
width: 100%;
8368
display: flex;
8469
flex-direction: column;
8570
justify-content: center;
8671
align-items: center;
8772
color: rgba(255, 255, 255, .8);
73+
z-index: 1000;
8874

8975
& a {
9076
text-decoration: none;
9177
}
78+
9279
& h1 {
80+
font-size: 2em;
81+
9382
display: flex;
94-
gap: .5ch;
83+
flex-direction: row;
84+
flex-wrap: wrap;
85+
justify-content: center;
86+
gap: 0 .3em;
9587
}
9688
}
9789

98-
.bottom {
99-
position: absolute;
100-
width: 100%;
101-
color: rgba(0, 0, 0, .8);
102-
text-align: center;
103-
bottom: 2rem;
104-
line-height: 1.5em;;
105-
}
106-
10790
/* #needle {
10891
background: linear-gradient(to right top, rgb(9, 19, 13), rgb(240, 247, 96));
10992
background-clip: text;

0 commit comments

Comments
 (0)