74 lines
2.2 KiB
HTML
74 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>WebXR AR Sample</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
canvas {
|
||
display: block;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<script type="module">
|
||
import * as THREE from 'https://cdn.skypack.dev/three@0.152.2';
|
||
import { ARButton } from 'https://cdn.skypack.dev/three@0.152.2/examples/jsm/webxr/ARButton.js';
|
||
|
||
let camera, scene, renderer;
|
||
let controller;
|
||
|
||
init();
|
||
animate();
|
||
|
||
function init() {
|
||
// Renderer
|
||
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
||
renderer.setPixelRatio(window.devicePixelRatio);
|
||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
renderer.xr.enabled = true;
|
||
document.body.appendChild(renderer.domElement);
|
||
|
||
// ARボタンを追加（Hit-test機能必要）
|
||
document.body.appendChild(
|
||
ARButton.createButton(renderer, { requiredFeatures: ['hit-test'] })
|
||
);
|
||
|
||
// SceneとCamera
|
||
scene = new THREE.Scene();
|
||
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20);
|
||
|
||
// 光源
|
||
const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
|
||
light.position.set(0.5, 1, 0.25);
|
||
scene.add(light);
|
||
|
||
// 立方体を作成
|
||
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
|
||
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
|
||
const cube = new THREE.Mesh(geometry, material);
|
||
cube.position.set(0, 0, -0.5); // カメラの前に表示
|
||
scene.add(cube);
|
||
|
||
// コントローラ
|
||
controller = renderer.xr.getController(0);
|
||
scene.add(controller);
|
||
}
|
||
|
||
function animate() {
|
||
renderer.setAnimationLoop(render);
|
||
}
|
||
|
||
function render() {
|
||
renderer.render(scene, camera);
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |