three.ws/examples/minimal.html at main · nirholas/three.ws · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Minimal embed — three.ws</title>
		<style>
			body {
				margin: 0;
				font:
					16px/1.5 system-ui,
					sans-serif;
				background: #fafafa;
				color: #111;
			}
			main {
				max-width: 720px;
				margin: 0 auto;
				padding: 64px 32px;
			}
			h1 {
				font-size: 40px;
				margin: 0 0 16px;
			}
			p {
				color: #4b5563;
			}
			.two-col {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 24px;
				margin: 48px 0;
			}
			.card {
				background: white;
				border: 1px solid #e5e7eb;
				border-radius: 16px;
				padding: 24px;
			}
			.card h2 {
				margin-top: 0;
				font-size: 18px;
			}
			pre {
				background: #0a0d12;
				color: #a7f3d0;
				padding: 16px;
				border-radius: 8px;
				overflow-x: auto;
				font-size: 13px;
			}
		</style>
	</head>
	<body>
		<main>
			<h1>Hello from the page</h1>
			<p>
				This is a plain HTML page. The floating agent in the corner was added with a single
				<code>&lt;agent-3d&gt;</code> tag — no build step, no framework.
			</p>

			<div class="two-col">
				<div class="card">
					<h2>Inline embed</h2>
					<p>
						A plain <code>&lt;agent-3d&gt;</code> is just the avatar. Add the
						<code>chat</code> attribute to give it the conversational UI.
					</p>
					<agent-3d
						chat
						body="/avatars/cz.glb"
						instructions="You are a friendly 3D guide."
						width="100%"
						height="320px"
						brain="claude-opus-4-8"
					></agent-3d>
				</div>
				<div class="card">
					<h2>The snippet</h2>
					<pre>
&lt;!-- just the avatar --&gt;
&lt;agent-3d body="/avatars/cz.glb"&gt;&lt;/agent-3d&gt;

&lt;!-- avatar + chat --&gt;
&lt;agent-3d chat body="/avatars/cz.glb"&gt;&lt;/agent-3d&gt;</pre
					>
				</div>
			</div>

			<p>Floating bubble in the corner ↘ — like a chatbot, but embodied.</p>
		</main>

		<!-- Floating bubble — bottom-right of the viewport. `chat` makes it a talkative greeter. -->
		<agent-3d
			chat
			body="/avatars/cz.glb"
			instructions="You are a cheerful 3D greeter. Wave when users say hi."
			mode="floating"
			position="bottom-right"
			width="320px"
			height="420px"
		></agent-3d>

		<script type="module" src="../src/element.js"></script>
	</body>
</html>