3D in WebXR
& Camera Automation
By Silvio Nocilla
Learning Objectives
By the end of this session, students will:
- Understand A-Frame scene structure (<a-scene>, <a-assets>, <a-entity>)
- Load 3D models and textures
- Use the animation component to move the camera automatically
- Build a simple VR tour that starts on load — no JavaScript required
What You Need
- VS Code (or any text editor)
- Live Server extension (to avoid CORS errors)
- Folder structure:
project/
│
├── index.html
├── assets/
│ ├── skytexture.jpeg
│ ├── victorian_house.glb
│ └── striga.glb
│
├── index.html
├── assets/
│ ├── skytexture.jpeg
│ ├── victorian_house.glb
│ └── striga.glb
1Create the Base Scene
- Open VS Code → create a new file named index.html
- Paste the following starter code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A-Frame Auto Walk-Through</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="sky" src="assets/skytexture.jpeg">
<a-asset-item id="house" src="victorian_house.glb"></a-asset-item>
<a-asset-item id="striga" src="striga.glb"></a-asset-item>
</a-assets>
<a-sky src="#sky"></a-sky>
<a-plane rotation="-90 0 0" width="100" height="100" color="#222"></a-plane>
<a-entity light="type: ambient; intensity: 0.5"></a-entity>
<a-entity light="type: directional; color: #fff; intensity: 1"
position="2 10 -10"></a-entity>
<a-gltf-model src="#house" position="0 0 -20" scale="2 2 2"></a-gltf-model>
<a-gltf-model src="#striga" position="0 0 -27" scale="90 90 90"
animation-mixer></a-gltf-model>
<a-entity id="cameraRig" position="0 1.6 10"
animation="property: position; to: 0 1.6 -20; dur: 10000;
easing: easeInOutSine; autoplay: true;">
<a-camera look-controls wasd-controls-enabled="false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
What happens: When you open it via Live Server, the camera moves automatically from z=10 to z=-20. Duration: 10 seconds.
2Component Explanation
| Component | Purpose |
|---|---|
| <a-scene> | Main 3D environment container |
| <a-assets> | Preloads textures and models before rendering |
| <a-sky> | Adds a 360° sky texture |
| <a-plane> | Creates a flat floor |
| <a-gltf-model> | Loads 3D .glb models |
| <a-entity light="..."> | Adds lighting to see models clearly |
| <a-camera> | Where the viewer sees from |
| animation="property: position; ..." | Moves the entity (the camera rig) automatically |
3How the Auto Walk Works
We apply the animation directly to the camera rig:
animation="property: position;
to: 0 1.6 -20;
dur: 10000;
easing: easeInOutSine;
autoplay: true;"
Animation Properties Explained:
- property: position → we're moving the position
- to: 0 1.6 -20 → end position
- dur: 10000 → duration in milliseconds (10 seconds)
- autoplay: true → starts automatically
- easing: easeInOutSine → smooth start and stop
Key Concept: The camera inside the rig moves with it, creating the walk-through effect.
4Test and Adjust
- Save the file
- Right-click → Open with Live Server
- The view should automatically glide forward
Try Adjusting:
- dur: 20000 → slower walk (20 seconds)
- to: 0 1.6 -40 → longer path
- Change easing to linear → constant speed
5Optional Enhancements
(Still No JavaScript!)
Continuous Loop
Make the camera go back and forth forever:
animation="property: position;
dir: alternate;
loop: true;
to: 0 1.6 -20;
dur: 15000;
easing: easeInOutSine;"
One-Time Tour
Keep loop: false (default) if you want the camera to stop at the destination.
Add More Models
Insert more <a-gltf-model>s along the path:
<a-gltf-model src="#house" position="5 0 -10" scale="1 1 1"></a-gltf-model>
<a-gltf-model src="#striga" position="-5 0 -15" scale="40 40 40"
animation-mixer></a-gltf-model>
Thank You!
Start building your VR tours today
No JavaScript Required ✨