Ask or search…
K

Babylon.js AR scene

  • Create a Babylon.js scene
createScene = async (
engine: Engine,
canvas: HTMLCanvasElement
): Promise<Scene> => {
// This creates a basic Babylon Scene object (non-mesh)
const scene = new Scene(engine);
  • Add camera
// This creates and positions a free camera (non-mesh)
const camera = new FreeCamera("camera1", new Vector3(0, 1, -5), scene);
// This targets the camera to scene origin
camera.setTarget(Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
  • Add light
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
  • Add Objects
// Our built-in 'sphere' shape.
const sphere = Mesh.CreateSphere(
"sphere", 32, 2,
scene
);
// Move the sphere upward 1/2 its height
sphere.position.y = 2;
sphere.position.z = 5;
  • Add Material
// Load a texture to be used as the ground material
const groundMaterial = new StandardMaterial("ground material", scene);
groundMaterial.diffuseTexture = new Texture(grassTextureUrl, scene);
// Assign it to an object like sphere.material = groundMaterial;
  • Add WebXR
const xr = await scene.createDefaultXRExperienceAsync({
// ask for an ar-session
uiOptions: {
sessionMode: "immersive-ar",
referenceSpaceType: "local-floor"
},
optionalFeatures: true,
});
const featuresManager = xr.baseExperience.featuresManager;
import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { FreeCamera, WebXRHitTest } from '@babylonjs/core';
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Quaternion, Vector3 } from "@babylonjs/core/Maths/math.vector";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { StandardMaterial } from "@babylonjs/core";
import { CreateSceneClass } from "../createScene";
import { getTokenOrRefresh } from "../utils/token_util";
import { ResultReason } from "microsoft-cognitiveservices-speech-sdk";
// If you don't need the standard material you will still need to import it since the scene requires it.
// import "@babylonjs/core/Materials/standardMaterial";
import { Texture } from "@babylonjs/core";
import grassTextureUrl from "../../assets/grass.jpg";
import { Mesh, MeshBuilder } from "@babylonjs/core/Meshes";
export class DefaultSceneWithTexture implements CreateSceneClass {
createScene = async (
engine: Engine,
canvas: HTMLCanvasElement
): Promise<Scene> => {
// This creates a basic Babylon Scene object (non-mesh)
const scene = new Scene(engine);
// This creates and positions a free camera (non-mesh)
const camera = new FreeCamera("camera1", new Vector3(0, 1, -5), scene);
// This targets the camera to scene origin
camera.setTarget(Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
// Our built-in 'sphere' shape.
const sphere = Mesh.CreateSphere(
"sphere", 32, 2,
scene
);
// Move the sphere upward 1/2 its height
sphere.position.y = 2;
sphere.position.z = 5;
// Load a texture to be used as the ground material
const groundMaterial = new StandardMaterial("ground material", scene);
groundMaterial.diffuseTexture = new Texture(grassTextureUrl, scene);
// ground.material = groundMaterial;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const xr = await scene.createDefaultXRExperienceAsync({
// ask for an ar-session
uiOptions: {
sessionMode: "immersive-ar",
referenceSpaceType: "local-floor"
},
optionalFeatures: true,
});
const featuresManager = xr.baseExperience.featuresManager;
const marker = MeshBuilder.CreateTorus("marker", { diameter: 0.1, thickness: 0.05 }, scene);
marker.rotationQuaternion = new Quaternion();
return scene;
};
}
export default new DefaultSceneWithTexture();