Skip to content

Commit 8875ae7

Browse files
philipjscottphilipjscott
committed
add some vaporwave 😎
1 parent 2b72aa3 commit 8875ae7

File tree

3 files changed

+117
-23
lines changed

3 files changed

+117
-23
lines changed

‎index.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Hyperbeam - Three.js example</title>
7-
</head>
8-
<body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Hyperbeam - Three.js example</title>
7+
</head>
8+
<body>
99
<div id="threejscontainer"></div>
1010
<div id="hbcontainer"></div>
11-
<script type="module" src="/main.js"></script>
12-
</body>
11+
<script type="module" src="/main.js"></script>
12+
</body>
1313
</html>

‎main.js

Lines changed: 104 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,17 @@ import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
44
import Hyperbeam from "@hyperbeam/web"
55

66
const scene = new THREE.Scene()
7+
const pointer = new THREE.Vector2()
8+
const raycaster = new THREE.Raycaster()
79
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, .0001, 100)
810
camera.target = new THREE.Vector3(0, 0, 0)
911
camera.position.set(0, 0, 1)
1012
camera.lookAt(camera.target)
1113

14+
const listener = new THREE.AudioListener()
15+
const sound = new THREE.PositionalAudio(listener)
16+
camera.add(listener)
17+
1218
const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: !true })
1319
renderer.setPixelRatio(window.devicePixelRatio)
1420
renderer.setClearColor(0x000000, 1)
@@ -17,37 +23,120 @@ threejscontainer.appendChild(renderer.domElement)
1723

1824
const controls = new OrbitControls(camera, renderer.domElement)
1925

26+
// The default aspect ratio of the virtual computer is 16:9
27+
const width = 1
28+
const height = width * 9 / 16
2029
const texture = new THREE.Texture()
21-
const geometry = new THREE.PlaneBufferGeometry(1, 9 / 16)
22-
// geometry.rotateZ(Math.PI*1)
23-
const plane = new THREE.Mesh(
24-
geometry,
25-
new THREE.MeshBasicMaterial({ map: texture })
26-
)
30+
const geometry = new THREE.PlaneBufferGeometry(width, height)
31+
const material = new THREE.MeshBasicMaterial({ map: texture })
32+
// Need to offset for Three.js left-handed coordinate system
33+
// https://stackoverflow.com/questions/1263072/changing-a-matrix-from-right-handed-to-left-handed-coordinate-system
34+
geometry.rotateZ(Math.PI)
35+
geometry.rotateY(Math.PI)
36+
material.side = THREE.DoubleSide
37+
38+
const plane = new THREE.Mesh(geometry, material)
2739
scene.add(plane)
40+
plane.add(sound)
41+
42+
const embedURL = "https://1aa2bnwfuuv7hod22dmbiqxql.hyperbeam.com/62lhP-IYR_ya0Fxb0474rg?token=NTbSjoEtqSfJJ0iZhzZKWzOwaznvT4MygJA-2Yr1tMk"
43+
const hb = await Hyperbeam(hbcontainer, embedURL, {
44+
frameCb: (frame) => {
45+
plane.material.map.image = frame
46+
plane.material.map.needsUpdate = true
47+
},
48+
audioTrackCb: tryAudio
49+
})
2850

2951
window.addEventListener("resize", onWindowResized)
52+
window.addEventListener("wheel", onWheel)
53+
window.addEventListener("contextmenu", onContextMenu)
54+
window.addEventListener("pointermove", onPointerMove)
55+
window.addEventListener("pointerdown", onPointerDown)
56+
window.addEventListener("pointerup", onPointerUp)
57+
3058
onWindowResized()
3159
animate()
3260

61+
function tryAudio(track) {
62+
sound.setMediaStreamSource(new MediaStream([track]))
63+
sound.setRefDistance(0.5)
64+
// The audio context might be waiting on a user gesture
65+
// In that case, we'll call sound.play() in the pointerdown handler
66+
if (listener.context.state === "running") {
67+
sound.play()
68+
}
69+
}
70+
71+
3372
function onWindowResized() {
3473
const w = window.innerWidth
3574
const h = window.innerHeight
36-
renderer.setSize( w, h )
75+
renderer.setSize(w, h)
3776
camera.aspect = w / h
3877
camera.updateProjectionMatrix()
3978
}
4079

80+
function getPlaneIntersects() {
81+
raycaster.setFromCamera(pointer, camera)
82+
return raycaster.intersectObject(plane, false)
83+
}
84+
85+
function onWheel(e) {
86+
if (getPlaneIntersects().length > 0) {
87+
hb.sendEvent({
88+
type: "wheel",
89+
deltaY: e.deltaY
90+
})
91+
}
92+
}
93+
94+
function onContextMenu(e) {
95+
if (getPlaneIntersects().length > 0) {
96+
e.preventDefault()
97+
}
98+
}
99+
100+
function handlePointer(e, type) {
101+
pointer.x = (e.clientX / window.innerWidth) * 2 - 1
102+
pointer.y = -(e.clientY / window.innerHeight) * 2 + 1
103+
const intersects = getPlaneIntersects()
104+
if (intersects.length > 0) {
105+
// We disable the OrbitControls when the user's pointer is on the virtual computer
106+
controls.enabled = false
107+
const vector = new THREE.Vector3().copy(intersects[0].point)
108+
plane.worldToLocal(vector)
109+
hb.sendEvent({
110+
type,
111+
x: vector.x / width + 0.5,
112+
y: -vector.y / height + 0.5,
113+
button: e.button
114+
})
115+
} else {
116+
controls.enabled = true
117+
}
118+
}
119+
120+
function onPointerMove(e) {
121+
handlePointer(e, "mousemove")
122+
}
123+
124+
function onPointerDown(e) {
125+
handlePointer(e, "mousedown")
126+
}
127+
128+
async function onPointerUp(e) {
129+
handlePointer(e, "mouseup")
130+
// If the audio context was suspended because there were no user gestures,
131+
// resume the audio context now since the user interacted with the page
132+
if (listener.context.state === "suspended") {
133+
await listener.context.resume()
134+
await sound.play()
135+
}
136+
}
137+
41138
function animate() {
42139
window.requestAnimationFrame(animate)
43140
controls.update()
44141
renderer.render(scene, camera)
45142
}
46-
47-
const embedURL = "https://1aa2bnwfuuv7hod22dmbiqxql.hyperbeam.com/fY0wxooSQ_yQxBQmD3jYHg?token=XOvtBJel4_RvA66MGF8qiyxxMH1LL3e8kdvB48C9pU8"
48-
const hb = await Hyperbeam(hbcontainer, embedURL, {
49-
frameCb: (frame) => {
50-
plane.material.map.image = frame
51-
plane.material.map.needsUpdate = true
52-
}
53-
})

‎style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,8 @@ html, body {
77
top: 0;
88
left: 0;
99
}
10+
11+
#hbcontainer {
12+
position: fixed;
13+
visibility: hidden;
14+
}

0 commit comments

Comments
 (0)