Hyperbeam

Take a look at how to use Hyperbeam web sdk to embed in three.js

# threejs-example

Hyperbeam virtual computers in Three.js! 🤯
- [x] Spatial audio 🎵
- [x] Handles mouse, keyboard and wheel events 🖱️
- [x] OrbitControls 🚀
- [x] Oh, and the virtual computer is multiplayer 😉

**Try it out here** 👉 https://threejs-example.hyperbeam.com

### Show me the magic! 🪄

Make sure you turn on the audio 😎

https://user-images.githubusercontent.com/18666879/185451405-729c7788-6950-493d-8264-09c7edeadd92.mp4

### Running locally 💻

```bash
npm install
npm run dev
```

### Setting custom embed URL 🤔

1. You'll need to get a Hyperbeam API key — you can generate a **free API key** by signing up at https://hyperbeam.com 🎉
2. Start a virtual computer session using `curl`:
```
curl -X POST -H 'Authorization: Bearer <your-api-key>' https://engine.hyperbeam.com/v0/vm
{
  "session_id": "85a208c0-8fc1-4b27-bcbc-941f6208480b",
  "embed_url": "https://96xljbfypmn3ibra366yqapci.hyperbeam.com/haIIwI_BSye8vJQfYghICw?token=QAWRxLz6exTKbxlFG3MTBxsoPePyDa7_WO3FCxKO73M",
  "admin_token": "OjIulaS-YO4qWHoGap2iK3KqUvAX5qEi9_fDCxESNj0"
}
```
3. Copy the value of the `"embed_url"` key and set the `embedURL` variable in [main.js](https://github.com/hyperbeam/threejs-example/blob/master/main.js#L7).


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Hyperbeam — Embed virtual computers in Three.js</title>
		<meta name="description" content="Add any application to your Metaverse using Hyperbeam. Ditch screenshare and run Chrome in 3D spaces for interactive demos. Play and synchronize media from any website like YouTube and Soundcloud. Get started for free here: https://hyperbeam.com/">
		<meta property="og:description" content="Add any application to your Metaverse using Hyperbeam. Ditch screenshare and run Chrome in 3D spaces for interactive demos. Play and synchronize media from any website like YouTube and Soundcloud. Get started for free at hyperbeam.com">
		<meta property="og:title" content="Hyperbeam — Embed virtual computers in Three.js">
		<meta property="og:image" content="https://raw.githubusercontent.com/hyperbeam/threejs-example/master/meta.png">
		<meta property="og:url" content="https://threejs-example.hyperbeam.com">
		<meta property="og:site_name" content="Hyperbeam">
		<meta property="og:type" content="website">
		<meta name="theme-color" content="#ff889b">
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:site" content="@hyperbeamapi">
		<link href="https://hyperbeam.com/images/favicon.png" rel="shortcut icon" type="image/x-icon">
	</head>
	<body>
		<a href="https://github.com/hyperbeam/threejs-example" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="z-index:100; fill:#000; color:#ff889b; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
		<div id="threejscontainer"></div>
		<div id="hbcontainer"></div>
		<script type="module" src="/main.js"></script>
	</body>
</html>

import './style.css';
import * as THREE from "three"
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
import Hyperbeam from "@hyperbeam/web"
import {Font, FontLoader} from "three/examples/jsm/loaders/FontLoader"
import {TextGeometry} from "three/examples/jsm/geometries/TextGeometry"
import { FontLoader2 } from './ignore/fontloader';


(async () => {
	let embedURL = "" // Running locally and you have an embed URL? Set it here
	if (embedURL === "") {
		const room = location.pathname.substring(1)
		const req = await fetch("https://demo-api.tutturu.workers.dev/" + room)
		if (req.status >= 400) {
			alert("We are out of demo servers! Visit hyperbeam.dev to get your own API key")
			return
		}
		const body = await req.json()
		if (body.room !== room) {
			history.replaceState(null, null, "/" + body.room)
		}
		embedURL = body.url
	}
	main(embedURL)
})()

async function main(embedURL) {
  
  const scene = new THREE.Scene()
  const pointer = new THREE.Vector2()
  const raycaster = new THREE.Raycaster()
  const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, .0001, 100)
  camera.position.set(0, 0.2, 0.5)

  const listener = new THREE.AudioListener()
  const sound = new THREE.PositionalAudio(listener)
  camera.add(listener)

  const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: !true })
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setClearColor(0xFF889B, 1)
  renderer.setSize(window.innerWidth, window.innerHeight)
  const threejscontainer = document.getElementById("threejscontainer")
  const hbcontainer = document.getElementById("hbcontainer")
  threejscontainer.appendChild(renderer.domElement)

  const controls = new OrbitControls(camera, renderer.domElement)
	controls.target.set(0, 0.2, 0)

	// The default aspect ratio of the virtual computer is 16:9
	const width = 0.62
	const height = width * 9 / 16
	const texture = new THREE.Texture()
	// force flipY to false, three.js is inconsistent with this behaviour
	texture.flipY = false
	texture.generateMipmaps = false

	const geometry = new THREE.PlaneBufferGeometry(width, height)
	const material = new THREE.MeshBasicMaterial({ map: texture })
	// Need to offset for Three.js left-handed coordinate system
	// https://stackoverflow.com/questions/1263072/changing-a-matrix-from-right-handed-to-left-handed-coordinate-system
	geometry.rotateZ(Math.PI)
	geometry.rotateY(Math.PI)
	material.side = THREE.DoubleSide

	const plane = new THREE.Mesh(geometry, material)
	plane.translateY(height / 2 + 0.04)
	scene.add(plane)
	scene.add(checkerboardMesh(1, 15))
	plane.add(sound)

	// Start - Text
	let textGroup, textMesh, textGeo, textMaterials;
	let text = `Outside the virtual computer:\n\nLeft-click to rotate\nRight-click to pan\nScroll wheel for zoom`, font = 'helvetiker'
	const textHeight = 0,
	size = 0.015,
	hover = 0.51,
	curveSegments = 4

	textMaterials = [
		new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
		new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
	];

	textGroup = new THREE.Group();
	textGroup.position.y = 0;
	textGroup.position.x = -0.16;

	scene.add( textGroup );
	loadFont();


	function loadFont() {
		const loader = new FontLoader2(); // feel free to use the normal font loader from three.js, this is a workaround for sandbox only
		const fontURL = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.json"
		loader.load( fontURL , function ( response ) {
			font = response;
			createText();
		} );
	}

	function createText() {
		textGeo = new TextGeometry( text, {
			font: font,
			size: size,
			height: textHeight,
			curveSegments: curveSegments,
		} );
		textGeo.computeBoundingBox();
		const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
		textMesh = new THREE.Mesh( textGeo, textMaterials );
		textMesh.position.x = centerOffset;
		textMesh.position.y = hover;
		textMesh.position.z = 0;
		textMesh.rotation.x = 0;
		textMesh.rotation.y = Math.PI * 2;
		textGroup.add( textMesh );
	}
	// End - Text

	const hb = await Hyperbeam(hbcontainer, embedURL, {
		frameCb: (frame) => {
			if (texture.image === null) {
				if (frame.constructor === HTMLVideoElement) {
					// hack: three.js internal methods check for .width and .height
					// need to set manually for video so that three.js handles it correctly
					frame.width = frame.videoWidth
					frame.height = frame.videoHeight
				}
				texture.image = frame
				texture.needsUpdate = true
			} else {
				renderer.copyTextureToTexture(new THREE.Vector2(0, 0), new THREE.Texture(frame), texture)
			}
		},
		audioTrackCb: tryAudio
	})

	window.addEventListener("resize", onWindowResized)
	window.addEventListener("wheel", onWheel)
	window.addEventListener("contextmenu", onContextMenu)
	window.addEventListener("pointermove", onPointerMove)
	window.addEventListener("pointerdown", onPointerDown)
	window.addEventListener("pointerup", onPointerUp)

	onWindowResized()
	animate()

	function tryAudio(track) {
		sound.setMediaStreamSource(new MediaStream([track]))
		sound.setRefDistance(0.5)
		// The audio context might be waiting on a user gesture
		// In that case, we'll call sound.play() in the pointerdown handler
		if (listener.context.state === "running") {
			sound.play()
		}
	}

	function onWindowResized() {
		const w = window.innerWidth
		const h = window.innerHeight
		renderer.setSize(w, h)
		camera.aspect = w / h
		camera.updateProjectionMatrix()
	}

	function getPlaneIntersects() {
		raycaster.setFromCamera(pointer, camera)
		return raycaster.intersectObject(plane, false)
	}

	function onWheel(e) {
		if (getPlaneIntersects().length > 0) {
			hb.sendEvent({
				type: "wheel",
				deltaY: e.deltaY,
			})
		}
	}

	function onContextMenu(e) {
		if (getPlaneIntersects().length > 0) {
			e.preventDefault()
		}
	}

	function handlePointer(e, type) {
		pointer.x = (e.clientX / window.innerWidth) * 2 - 1
		pointer.y = -(e.clientY / window.innerHeight) * 2 + 1
		const intersects = getPlaneIntersects()
		if (intersects.length > 0) {
			// We disable the OrbitControls when the user's pointer is on the virtual computer
			controls.enabled = false
			const vector = new THREE.Vector3().copy(intersects[0].point)
			plane.worldToLocal(vector)
			hb.sendEvent({
				type,
				x: vector.x / width + 0.5,
				y: -vector.y / height + 0.5,
				button: e.button
			})
		} else {
			controls.enabled = true
		}
	}

	function onPointerMove(e) {
		handlePointer(e, "mousemove")
	}

	function onPointerDown(e) {
		handlePointer(e, "mousedown")
	}

	async function onPointerUp(e) {
		handlePointer(e, "mouseup")
		// If the audio context was suspended because there were no user gestures,
		// resume the audio context now since the user interacted with the page
		if (listener.context.state === "suspended") {
			await listener.context.resume()
			await sound.play()
		}
	}

	function animate() {
		window.requestAnimationFrame(animate)
		controls.update()
		renderer.render(scene, camera)
	}
}

function checkerboardMesh(width, segments) {
	const geometry = new THREE.PlaneGeometry(width, width, segments, segments).toNonIndexed()
	const material = new THREE.MeshBasicMaterial({
		vertexColors: true,
		transparent: true,
		side: THREE.DoubleSide
	})
	const positionAttribute = geometry.getAttribute("position")
	const colors = []
	console.log(segments * segments, positionAttribute.count / 6)
	for (let i = 0; i < positionAttribute.count; i++) {
		colors.push(0, 0, 0, i % 6 === i % 12 ? 1 : 0)
	}
	geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 4))
	const mesh = new THREE.Mesh(geometry, material)
	mesh.rotateX(Math.PI / 2)
	mesh.translateY(width / 2)
	return mesh
}


threejs-example

html, body {
	overflow: hidden;
	background-color: #ff889b;
}

#threejscontainer {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ff889b;
}

#hbcontainer {
	position: fixed;
	visibility: hidden;
}


import {
	FileLoader,
	Loader,
	ShapePath
} from 'three';

class FontLoader2 extends Loader {

	constructor(manager) {

		super(manager);

	}

	load(url, onLoad, onProgress, onError) {

		const scope = this;

		const loader = new FileLoader(this.manager);
		loader.setPath(this.path);
		loader.setRequestHeader(this.requestHeader);
		loader.setWithCredentials(scope.withCredentials);
		fetch(url)
			.then(response => response.json())
			.then(text => {
				let json = text;

				try {
					console.log(text)
					console.log("parsed at least!");

				} catch (e) {

					console.warn('THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.');
					console.log(e);

				}

				const font = scope.parse(json);

				if (onLoad) onLoad(font);


			});




	}

	parse(json) {

		return new Font2(json);

	}

}

//

class Font2 {

	constructor(data) {

		this.isFont = true;

		this.type = 'Font';

		this.data = data;

	}

	generateShapes(text, size = 100) {

		const shapes = [];
		const paths = createPaths(text, size, this.data);

		for (let p = 0, pl = paths.length; p < pl; p++) {

			shapes.push(...paths[p].toShapes());

		}

		return shapes;

	}

}

function createPaths(text, size, data) {

	const chars = Array.from(text);
	const scale = size / data.resolution;
	const line_height = (data.boundingBox.yMax - data.boundingBox.yMin + data.underlineThickness) * scale;

	const paths = [];

	let offsetX = 0, offsetY = 0;

	for (let i = 0; i < chars.length; i++) {

		const char = chars[i];

		if (char === '\n') {

			offsetX = 0;
			offsetY -= line_height;

		} else {

			const ret = createPath(char, scale, offsetX, offsetY, data);
			offsetX += ret.offsetX;
			paths.push(ret.path);

		}

	}

	return paths;

}

function createPath(char, scale, offsetX, offsetY, data) {

	const glyph = data.glyphs[char] || data.glyphs['?'];

	if (!glyph) {

		console.error('THREE.Font2: character "' + char + '" does not exists in font family ' + data.familyName + '.');

		return;

	}

	const path = new ShapePath();

	let x, y, cpx, cpy, cpx1, cpy1, cpx2, cpy2;

	if (glyph.o) {

		const outline = glyph._cachedOutline || (glyph._cachedOutline = glyph.o.split(' '));

		for (let i = 0, l = outline.length; i < l;) {

			const action = outline[i++];

			switch (action) {

				case 'm': // moveTo

					x = outline[i++] * scale + offsetX;
					y = outline[i++] * scale + offsetY;

					path.moveTo(x, y);

					break;

				case 'l': // lineTo

					x = outline[i++] * scale + offsetX;
					y = outline[i++] * scale + offsetY;

					path.lineTo(x, y);

					break;

				case 'q': // quadraticCurveTo

					cpx = outline[i++] * scale + offsetX;
					cpy = outline[i++] * scale + offsetY;
					cpx1 = outline[i++] * scale + offsetX;
					cpy1 = outline[i++] * scale + offsetY;

					path.quadraticCurveTo(cpx1, cpy1, cpx, cpy);

					break;

				case 'b': // bezierCurveTo

					cpx = outline[i++] * scale + offsetX;
					cpy = outline[i++] * scale + offsetY;
					cpx1 = outline[i++] * scale + offsetX;
					cpy1 = outline[i++] * scale + offsetY;
					cpx2 = outline[i++] * scale + offsetX;
					cpy2 = outline[i++] * scale + offsetY;

					path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, cpx, cpy);

					break;

			}

		}

	}

	return { offsetX: glyph.ha * scale, path: path };

}

export { FontLoader2, Font2 };

•••