Skip to content
GitLab
Commit d2a0c033 authored by Stoll's avatar Stoll
Browse files

Fix: Button for screenshot is positioned correctly

parent c986c42e
Hide whitespace changes
Inline Side-by-side
webxr-cube/src/components/ARBottomBar.tsx
View file @ d2a0c033
import React from "react"; import React from "react";
interface ARBottomBarProps { interface ARBottomBarProps {
objectOptions: { name: string; emoji: string }[]; objectOptions: { name: string; emoji: string }[];
onSelect: (name: string) => void; onSelect: (name: string) => void;
} }
export const ARBottomBar: React.FC<ARBottomBarProps> = ({ objectOptions, onSelect }) => { export const ARBottomBar: React.FC<ARBottomBarProps> = ({
return ( objectOptions,
<div onSelect,
style={{ }) => {
position: "absolute", return (
bottom: 0, <div
width: "100%", style={{
height: "90px", position: "absolute",
background: "rgba(0, 0, 0, 0.6)", bottom: 0,
display: "flex", width: "100%",
alignItems: "center", height: "100px",
justifyContent: "space-around", background: "rgba(0, 0, 0, 0.6)",
color: "white", display: "flex",
zIndex: 10, alignItems: "center",
pointerEvents: "auto", justifyContent: "flex-start",
backdropFilter: "blur(10px)", color: "white",
}} zIndex: 10,
> pointerEvents: "auto",
{objectOptions.map((obj) => ( backdropFilter: "blur(10px)",
<button overflowX: "auto",
key={obj.name} whiteSpace: "nowrap",
style={{ padding: "0 10px",
background: "#333", scrollbarWidth: "none", // hides scrollbar in Firefox
color: "white", msOverflowStyle: "none", // hides scrollbar in IE
border: "none", }}
borderRadius: "10px",
padding: "10px 20px",
fontSize: "16px",
}}
onClick={() => onSelect(obj.name)}
> >
{obj.emoji} {obj.name} {/* hide scrollbar for WebKit browsers */}
</button> <style>
))} {`
</div> div::-webkit-scrollbar {
); display: none;
}
`}
</style>
{objectOptions.map((obj) => (
<button
key={obj.name}
style={{
background: "#333",
color: "white",
border: "none",
borderRadius: "10px",
padding: "10px 20px",
fontSize: "16px",
marginRight: "10px",
flex: "0 0 auto",
}}
onClick={() => onSelect(obj.name)}
>
{obj.emoji} {obj.name}
</button>
))}
</div>
);
}; };
webxr-cube/src/components/XRRenderer.tsx
View file @ d2a0c033
// Import necessary tools and libraries // Import necessary tools and libraries
import React, { useEffect, useRef, useState } from "react"; import React, {useEffect, useRef, useState} from "react";
import type {WebGLRenderer} from "three";
import * as THREE from "three"; import * as THREE from "three";
import { XRButton } from "three/examples/jsm/webxr/XRButton"; import {XRButton} from "three/examples/jsm/webxr/XRButton";
import { BlockManager } from "./BlockManager"; // manages placed 3D objects in the scene import {BlockManager} from "./BlockManager"; // manages placed 3D objects in the scene
import { Cube } from "../model/Cube"; // custom class for a simple cube import {Cube} from "../model/Cube"; // custom class for a simple cube
import { GLTFModel } from "../model/GLTFModel"; // custom loader for .glb 3D models import {GLTFModel} from "../model/GLTFModel"; // custom loader for .glb 3D models
import { ARBottomBar } from "./ARBottomBar"; import {ARBottomBar} from "./ARBottomBar";
import {RoomEnvironment} from "three/examples/jsm/environments/RoomEnvironment"; import {RoomEnvironment} from "three/examples/jsm/environments/RoomEnvironment";
import {addLightToScene, createCamera, createPlacementRing, createRenderer, setSceneBackground} from "./Setup.ts"; import {addLightToScene, createCamera, createPlacementRing, createRenderer, setSceneBackground} from "./Setup.ts";
import type {WebGLRenderer} from "three"; // bottom UI for selecting objects
import {ModelType} from "../model/ModelType.ts"; // bottom UI for selecting objects
function createARButton(renderer: WebGLRenderer, overlayRef: React.RefObject<HTMLDivElement>) { function createARButton(renderer: WebGLRenderer, overlayRef: React.RefObject<HTMLDivElement>) {
...@@ -134,16 +136,21 @@ export const XRRenderer: React.FC = () => { ...@@ -134,16 +136,21 @@ export const XRRenderer: React.FC = () => {
let objectToAdd; let objectToAdd;
// Choose what object to add based on selection // Choose what object to add based on selection
if (name === "Cube") { if (name === ModelType.CUBE) {
objectToAdd = new Cube(position); objectToAdd = new Cube(position);
} else if (name === "Watermill") { } else if (name === ModelType.WATERMILL) {
objectToAdd = new GLTFModel("/watermill.glb", position, "/Textures/colormap.png"); objectToAdd = new GLTFModel("/fantasy/watermill.glb", position, "/fantasy/colormap.png");
} else if (name === "Tree") { } else if (name === ModelType.TREE) {
objectToAdd = new GLTFModel("/tree.glb", position, "/Textures/colormap.png"); objectToAdd = new GLTFModel("/fantasy/tree.glb", position, "/fantasy/colormap.png");
} else if (name === ModelType.CROISSANT) {
objectToAdd = new GLTFModel("/food/croissant.glb", position, "/food/colormap.png");
} else { } else {
objectToAdd = new Cube(position); // fallback objectToAdd = new Cube(position); // fallback
} }
const audio = new Audio('/sounds/cash.mp3');
audio.play();
// Add the object to the scene (via manager) // Add the object to the scene (via manager)
blockManager.addObject(objectToAdd); blockManager.addObject(objectToAdd);
}; };
...@@ -228,8 +235,8 @@ export const XRRenderer: React.FC = () => { ...@@ -228,8 +235,8 @@ export const XRRenderer: React.FC = () => {
aria-label="Save snapshot" aria-label="Save snapshot"
style={{ style={{
position: "absolute", position: "absolute",
top: 12, top: "4rem",
right: 12, right: "1.5rem",
zIndex: 1000, zIndex: 1000,
padding: "10px 12px", padding: "10px 12px",
borderRadius: 12, borderRadius: 12,
...@@ -247,9 +254,10 @@ export const XRRenderer: React.FC = () => { ...@@ -247,9 +254,10 @@ export const XRRenderer: React.FC = () => {
{isSessionActive && ( {isSessionActive && (
<ARBottomBar <ARBottomBar
objectOptions={[ objectOptions={[
{ name: "Cube", emoji: "🧊" }, { name: ModelType.CUBE, emoji: "🧊" },
{ name: "Watermill", emoji: "🌊" }, { name: ModelType.WATERMILL, emoji: "🌊" },
{ name: "Tree", emoji: "🌳" }, { name: ModelType.TREE ,emoji: "🌳" },
{ name: ModelType.CROISSANT, emoji: "🥐" },
]} ]}
onSelect={handleSelect} onSelect={handleSelect}
/> />
......
webxr-cube/src/model/ModelType.ts 0 → 100644
View file @ d2a0c033
export enum ModelType {
CUBE = 'Cube',
FOUNTAIN = "Fountain",
TREE = "Tree",
WATERMILL = "Watermill",
WHEEL = "Wheel",
WINDMILL = "Windmill",
BREAD = "Bread",
BURGER = "Burger",
CROISSANT = "Croissant",
PIZZA_BOX = "Pizza Box",
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal