Skip to content

Commit 0549ed6

Browse files
willeastcottwilleastcott
authored
Add hotspots/annotations example (#92)
* Add hotspots/annotations example * Lint fixes * Lint fixes
1 parent f397d47 commit 0549ed6

File tree

6 files changed

+473
-0
lines changed

6 files changed

+473
-0
lines changed

‎examples/annotations.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
6+
<title>PlayCanvas Web Components - Annotations</title>
7+
<script type="importmap">
8+
{
9+
"imports": {
10+
"playcanvas": "../node_modules/playcanvas/build/playcanvas.mjs"
11+
}
12+
}
13+
</script>
14+
<script type="module" src="../dist/pwc.mjs"></script>
15+
<link rel="stylesheet" href="css/example.css">
16+
</head>
17+
<body>
18+
<pc-app>
19+
<!-- Modules -->
20+
<pc-module name="Basis" glue="modules/basis/basis.wasm.js" wasm="modules/basis/basis.wasm.wasm" fallback="modules/basis/basis.js"></pc-module>
21+
<pc-module name="DracoDecoderModule" glue="modules/draco/draco.wasm.js" wasm="modules/draco/draco.wasm.wasm" fallback="modules/draco/draco.js"></pc-module>
22+
<!-- Assets -->
23+
<pc-asset src="../node_modules/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
24+
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-controllers.mjs"></pc-asset>
25+
<pc-asset src="../node_modules/playcanvas/scripts/esm/xr-navigation.mjs"></pc-asset>
26+
<pc-asset src="assets/scripts/annotation.mjs"></pc-asset>
27+
<pc-asset src="assets/scripts/shadow-catcher.mjs"></pc-asset>
28+
<pc-asset src="assets/skies/shanghai-riverside-4k.hdr" id="shanghai"></pc-asset>
29+
<pc-asset src="assets/models/jet-fighter.glb" id="jet-fighter"></pc-asset>
30+
<!-- Scene -->
31+
<pc-scene>
32+
<!-- Sky -->
33+
<pc-sky asset="shanghai" type="dome" center="0 0.1 0" scale="50 50 50" lighting></pc-sky>
34+
<!-- Camera (with XR support) -->
35+
<pc-entity name="camera root">
36+
<pc-entity name="camera" position="0 1.75 8">
37+
<pc-camera clear-color="black"></pc-camera>
38+
<pc-scripts>
39+
<pc-script name="cameraControls" attributes='{
40+
"focusPoint": [0, 1.75, 0],
41+
"pitchRange": [-90, 0],
42+
"sceneSize": 2
43+
}'></pc-script>
44+
</pc-scripts>
45+
</pc-entity>
46+
<pc-scripts>
47+
<pc-script name="xrControllers"></pc-script>
48+
<pc-script name="xrNavigation"></pc-script>
49+
</pc-scripts>
50+
</pc-entity>
51+
<!-- Light -->
52+
<pc-entity name="light" rotation="45 0 0">
53+
<pc-light></pc-light>
54+
</pc-entity>
55+
<!-- Jet Fighter -->
56+
<pc-entity name="jet-fighter" position="-2 1.6 0" rotation="0 0 3">
57+
<pc-model asset="jet-fighter"></pc-model>
58+
<pc-scripts>
59+
<pc-script name="shadowCatcher" attributes='{
60+
"size": [14, 14]
61+
}'></pc-script>
62+
</pc-scripts>
63+
<pc-entity name="annotation1" position="5.5 1.2 0">
64+
<pc-scripts>
65+
<pc-script name="annotation" attributes='{
66+
"title": "Cockpit Canopy",
67+
"text": "Transparent canopy offering visibility and housing the pilot\u0027s controls."
68+
}'></pc-script>
69+
</pc-scripts>
70+
</pc-entity>
71+
<pc-entity name="annotation2" position="8 0.25 0">
72+
<pc-scripts>
73+
<pc-script name="annotation" attributes='{
74+
"title": "Nose Cone & Radar",
75+
"text": "Houses the advanced radar system for targeting and navigation."
76+
}'></pc-script>
77+
</pc-scripts>
78+
</pc-entity>
79+
<pc-entity name="annotation3" position="5 -0.5 0">
80+
<pc-scripts>
81+
<pc-script name="annotation" attributes='{
82+
"title": "Inlet Ducts",
83+
"text": "Provides airflow to the engines, crucial for maintaining thrust."
84+
}'></pc-script>
85+
</pc-scripts>
86+
</pc-entity>
87+
<pc-entity name="annotation4" position="0.5 0 5.1">
88+
<pc-scripts>
89+
<pc-script name="annotation" attributes='{
90+
"title": "Wingtip Missile Rails",
91+
"text": "Can be equipped with AIM-9 Sidewinder missiles for air-to-air combat."
92+
}'></pc-script>
93+
</pc-scripts>
94+
</pc-entity>
95+
<pc-entity name="annotation5" position="-4 0 0">
96+
<pc-scripts>
97+
<pc-script name="annotation" attributes='{
98+
"title": "Jet Engine Nozzles",
99+
"text": "Dual afterburning turbofan engines for high-speed performance."
100+
}'></pc-script>
101+
</pc-scripts>
102+
</pc-entity>
103+
<pc-entity name="annotation6" position="1 -1 -1">
104+
<pc-scripts>
105+
<pc-script name="annotation" attributes='{
106+
"title": "Main Landing Gear",
107+
"text": "Retractable gear for safe takeoff and landing on runways."
108+
}'></pc-script>
109+
</pc-scripts>
110+
</pc-entity>
111+
<pc-entity name="annotation7" position="2 0 -3.1">
112+
<pc-scripts>
113+
<pc-script name="annotation" attributes='{
114+
"title": "Forward Leading-Edge Flaps",
115+
"text": "Enhance maneuverability during high-speed or low-speed flight."
116+
}'></pc-script>
117+
</pc-scripts>
118+
</pc-entity>
119+
</pc-entity>
120+
</pc-scene>
121+
</pc-app>
122+
<script type="module" src="js/example-ui.mjs"></script>
123+
</body>
124+
</html>

‎examples/assets/models/jet-fighter.glb‎

3.4 MB
Binary file not shown.

‎examples/assets/models/jet-fighter.txt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Mitsubishi F-2 - Fighter Jet - Free by bohmerang on Sketchfab:
2+
3+
https://sketchfab.com/3d-models/mitsubishi-f-2-fighter-jet-free-d3d7244554974f499b106e6c11fe3aaf
4+
5+
CC BY 4.0 https://creativecommons.org/licenses/by/4.0/

0 commit comments

Comments
 (0)