Je eigen coding agents. Zonder externe tokenkosten.

1import * as THREE from "three";
2import { OrbitControls } from "three/addons/controls/OrbitControls.js";
3import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
4 
5// A complete procedural product scene. Every visible part is real geometry.
6const stage = document.querySelector("#stage");
7const scene = new THREE.Scene();
8scene.background = new THREE.Color("#e8e9df");
9const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 60);
10camera.position.set(4.3, 2.9, 5.8);
11const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
12renderer.setPixelRatio(Math.min(devicePixelRatio, 1.7));
13renderer.shadowMap.enabled = true;
14renderer.shadowMap.type = THREE.PCFSoftShadowMap;
15renderer.toneMapping = THREE.ACESFilmicToneMapping;
16renderer.toneMappingExposure = 1.35;
17renderer.domElement.setAttribute(
18  "aria-label",
19  "Draaibaar kinetisch object met drie metalen ringen",
20);
21renderer.domElement.dataset.ready = "true";
22renderer.domElement.tabIndex = 0;
23stage.append(renderer.domElement);
24 
25const pmrem = new THREE.PMREMGenerator(renderer);
26const environment = new RoomEnvironment();
27const environmentMap = pmrem.fromScene(environment, 0.04);
28scene.environment = environmentMap.texture;
29environment.dispose();
30pmrem.dispose();
31 
32const controls = new OrbitControls(camera, renderer.domElement);
33controls.target.set(0, 1.65, 0);
34controls.enablePan = false;
35controls.enableZoom = false;
36controls.enableDamping = true;
37controls.minPolarAngle = Math.PI * 0.14;
38controls.maxPolarAngle = Math.PI * 0.59;
39 
40const gold = new THREE.MeshPhysicalMaterial({
41  color: "#b99043",
42  metalness: 1,
43  roughness: 0.24,
44  clearcoat: 0.4,
45});
46const graphite = new THREE.MeshPhysicalMaterial({
47  color: "#242d28",
48  metalness: 0.72,
49  roughness: 0.31,
50  clearcoat: 0.35,
51});
52const glass = new THREE.MeshPhysicalMaterial({
53  color: "#b4d1c2",
54  metalness: 0.05,
55  roughness: 0.04,
56  transmission: 0.97,
57  thickness: 0.5,
58  ior: 1.45,
59});
60const warm = new THREE.MeshStandardMaterial({
61  color: "#e2ad47",
62  emissive: "#d89b25",
63  emissiveIntensity: 0.2,
64  metalness: 0.6,
65  roughness: 0.25,
66});
67const model = new THREE.Group();
68scene.add(model);
69renderer.domElement.addEventListener("keydown", (event) => {
70  if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key))
71    return;
72  event.preventDefault();
73  if (event.key === "ArrowLeft") model.rotation.y -= 0.15;
74  if (event.key === "ArrowRight") model.rotation.y += 0.15;
75  if (event.key === "ArrowUp")
76    camera.position.y = Math.min(camera.position.y + 0.2, 5);
77  if (event.key === "ArrowDown")
78    camera.position.y = Math.max(camera.position.y - 0.2, 1.5);
79});
80function part(geometry, material, parent = model) {
81  const mesh = new THREE.Mesh(geometry, material);
82  mesh.castShadow = true;
83  mesh.receiveShadow = true;
84  parent.add(mesh);
85  return mesh;
86}
87 
88// Stepped pedestal, accent bands and a slender central support.
89part(new THREE.CylinderGeometry(0.82, 0.9, 0.17, 96), graphite).position.y =
90  0.1;
91part(new THREE.CylinderGeometry(0.815, 0.815, 0.018, 96), gold).position.y =
92  0.195;
93part(new THREE.CylinderGeometry(0.69, 0.78, 0.11, 96), graphite).position.y =
94  0.25;
95part(new THREE.CylinderGeometry(0.105, 0.19, 0.48, 48), gold).position.y = 0.52;
96const assembly = new THREE.Group();
97assembly.position.y = 1.86;
98model.add(assembly);
99 
100const rings = [];
101for (let index = 0; index < 3; index++) {
102  const pivot = new THREE.Group();
103  assembly.add(pivot);
104  const radius = 1.19 - index * 0.22;
105  const ring = part(
106    new THREE.TorusGeometry(radius, 0.045, 16, 144),
107    gold,
108    pivot,
109  );
110  ring.rotation.x = index === 1 ? Math.PI / 2 : 0;
111  // Visible precision marks around the outer gimbal.
112  for (let mark = 0; mark < 48; mark++) {
113    const angle = (mark / 48) * Math.PI * 2;
114    const tick = part(
115      new THREE.BoxGeometry(0.009, mark % 4 === 0 ? 0.048 : 0.022, 0.007),
116      graphite,
117      ring,
118    );
119    tick.position.set(
120      Math.sin(angle) * radius,
121      Math.cos(angle) * radius,
122      0.045,
123    );
124    tick.rotation.z = -angle;
125  }
126  for (const direction of [-1, 1]) {
127    const pin = part(
128      new THREE.CylinderGeometry(0.078, 0.078, 0.105, 32),
129      graphite,
130      pivot,
131    );
132    pin.rotation.z = Math.PI / 2;
133    pin.position.x = radius * direction;
134    part(new THREE.SphereGeometry(0.046, 20, 16), gold, pivot).position.x =
135      (radius + 0.065) * direction;
136  }
137  rings.push(pivot);
138}
139 
140part(new THREE.IcosahedronGeometry(0.43, 4), glass, assembly);
141part(new THREE.IcosahedronGeometry(0.21, 1), warm, assembly);
142const meridian = part(
143  new THREE.TorusGeometry(0.46, 0.012, 12, 96),
144  gold,
145  assembly,
146);
147meridian.rotation.x = Math.PI / 2;
148 
149// A restrained floor and real soft contact shadows anchor the object.
150const ground = part(
151  new THREE.PlaneGeometry(200, 200),
152  new THREE.ShadowMaterial({ color: "#526047", opacity: 0.17 }),
153  scene,
154);
155ground.rotation.x = -Math.PI / 2;
156ground.position.y = -0.005;
157ground.castShadow = false;
158scene.add(new THREE.HemisphereLight("#ffffff", "#777f66", 2.4));
159const key = new THREE.DirectionalLight("#fff5dd", 4.5);
160key.position.set(-3, 7, 5);
161key.castShadow = true;
162key.shadow.mapSize.set(1536, 1536);
163key.shadow.camera.left = -4;
164key.shadow.camera.right = 4;
165key.shadow.camera.top = 5;
166key.shadow.camera.bottom = -3;
167key.shadow.normalBias = 0.025;
168key.shadow.blurSamples = 12;
169scene.add(key);
170const rim = new THREE.DirectionalLight("#e4edf6", 2.5);
171rim.position.set(4, 3, -4);
172scene.add(rim);
173 
174const motion = matchMedia("(prefers-reduced-motion: reduce)");
175let playing = !motion.matches;
176let exploded = 0;
177let visible = true;
178let lastTime = 0;
179let elapsed = 0;
180const toggle = document.querySelector("#motion");
181function updateToggle() {
182  toggle.textContent = playing ? "Pauzeren" : "Draaien";
183  toggle.setAttribute("aria-pressed", String(playing));
184}
185toggle.addEventListener("click", () => {
186  playing = !playing;
187  updateToggle();
188});
189motion.addEventListener("change", () => {
190  playing = !motion.matches;
191  updateToggle();
192});
193updateToggle();
194document.querySelector("#explode").addEventListener("input", (event) => {
195  exploded = Number(event.target.value) / 100;
196  document.querySelector("#explode-value").textContent =
197    `${event.target.value}%`;
198});
199for (const button of document.querySelectorAll("[data-finish]")) {
200  button.addEventListener("click", () => {
201    gold.color.set(button.dataset.finish);
202    document
203      .querySelectorAll("[data-finish]")
204      .forEach((item) =>
205        item.setAttribute("aria-pressed", String(item === button)),
206      );
207  });
208}
209document.querySelector("#reset").addEventListener("click", () => {
210  model.rotation.y = 0;
211  camera.position.set(4.3, 2.9, 5.8);
212  controls.target.set(0, 1.65, 0);
213});
214const resize = new ResizeObserver(() => {
215  const { width, height } = stage.getBoundingClientRect();
216  if (!width || !height) return;
217  renderer.setSize(width, height, false);
218  camera.aspect = width / height;
219  camera.updateProjectionMatrix();
220});
221resize.observe(stage);
222new IntersectionObserver(([entry]) => {
223  visible = entry.isIntersecting;
224}).observe(stage);
225document.addEventListener("visibilitychange", () => {
226  lastTime = 0;
227});
228function frame(time) {
229  const delta = lastTime ? Math.min((time - lastTime) / 1000, 0.05) : 0;
230  lastTime = time;
231  if (visible && !document.hidden) {
232    if (playing) elapsed += delta;
233    rings.forEach((ring, index) => {
234      ring.rotation.set(
235        0.22 + Math.sin(elapsed * 0.32 + index * 1.4) * 0.52,
236        elapsed * (0.1 + index * 0.075) + index * 0.65,
237        index * 0.18,
238      );
239      ring.position.x = exploded * (index - 1) * 0.7;
240      ring.position.y = exploded * index * 0.12;
241    });
242    controls.update();
243    renderer.render(scene, camera);
244  }
245  requestAnimationFrame(frame);
246}
247requestAnimationFrame(frame);