test3-bab
<!DOCTYPE html>
<html>
<head>
<title>Babylon.js VR Sample</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
#vrButton {
position: absolute;
bottom: 20px;
left: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<button id="vrButton">Enter VR</button>
<script>
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const createScene = function () {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", 0, Math.PI / 2, 5, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox("box", {size: 1}, scene);
return scene;
};
const scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
// VR�{タンの処理
const vrButton = document.getElementById("vrButton");
vrButton.addEventListener("click", function() {
scene.createDefaultVRExperience({createDeviceOrientationCamera:false});
});
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html>
<head>
<title>Babylon.js VR Sample</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
#vrButton {
position: absolute;
bottom: 20px;
left: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<button id="vrButton">Enter VR</button>
<script>
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const createScene = function () {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", 0, Math.PI / 2, 5, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox("box", {size: 1}, scene);
return scene;
};
const scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
// VR�{タンの処理
const vrButton = document.getElementById("vrButton");
vrButton.addEventListener("click", function() {
scene.createDefaultVRExperience({createDeviceOrientationCamera:false});
});
</script>
</body>
</html>
使用変数
| -------( Function ) | |
| ) { scene.createDefaultVRExperience -------( Function ) | |
| box | |
| camera | |
| canvas | |
| createScene | |
| engine | |
| id | |
| light | |
| scene | |
| src | |
| vrButton |