44 lines
1.6 KiB
Markdown
44 lines
1.6 KiB
Markdown
## 空間コンピューティング / AR / XRの技術選定
|
|
|
|
|
|
```html
|
|
<!-- index.html -->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Simple WebXR AR</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/examples/jsm/webxr/ARButton.js"></script>
|
|
</head>
|
|
<body style="margin: 0; overflow: hidden;">
|
|
<script type="module">
|
|
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.module.js';
|
|
import { ARButton } from 'https://cdn.jsdelivr.net/npm/three@0.152.2/examples/jsm/webxr/ARButton.js';
|
|
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.xr.enabled = true;
|
|
document.body.appendChild(renderer.domElement);
|
|
document.body.appendChild(ARButton.createButton(renderer));
|
|
|
|
const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
|
|
const material = new THREE.MeshNormalMaterial();
|
|
const cube = new THREE.Mesh(geometry, material);
|
|
cube.position.set(0, 0, -0.5);
|
|
scene.add(cube);
|
|
|
|
function animate() {
|
|
renderer.setAnimationLoop(() => {
|
|
cube.rotation.y += 0.01;
|
|
renderer.render(scene, camera);
|
|
});
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
``` |