Three.js · WebGL · Vue.js

Building a Clickable, Auto-Rotating PCB Viewer with Vue and Three.js

By Tony费 · Jul 27, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Interactive 3D product viewers are increasingly common in manufacturing, repair documentation, and hardware configurators. This walkthrough addresses two real pain points that break those experiences: material-sharing bugs that corrupt highlight states, and jarring auto-rotation that feels bolted-on rather than designed.

Summary

A complete Vue 3 component wraps a Three.js scene to load and interact with a GLB-format PCB model. Clicking any chip or component triggers a Raycaster-based pick that highlights the part in semi-transparent blue while automatically restoring the previous selection's original material. A material-cloning cache prevents the common beginner mistake of mutating shared materials across multiple meshes.

Two UI buttons toggle the main PCB substrate on and off, letting a user inspect internal components in isolation. A separate auto-rotate control uses Tween.js to smoothly animate the camera into an orbiting viewpoint before enabling OrbitControls.autoRotate, and reverses the transition when stopping, with all animation frames, tweens, and timers cleaned up on each state change to prevent jitter.

The component also handles full resource disposal on destroy: canceling requestAnimationFrame loops, disposing geometries and materials, and calling forceContextLoss on the WebGL renderer to avoid memory leaks.

Takeaways

— Raycaster.setFromCamera converts a click event into a normalized ray for intersection testing against all scene children.

— Filtering out the PCB substrate by name ('Mesh') prevents the board itself from triggering the highlight logic.

— Cloning and caching every mesh's original material on load avoids the shared-material mutation trap that makes highlights irreversible.

— Highlighting a component clones its material, sets transparent=true, opacity=0.7, and applies an RGB(78,110,242) blue color.

— Toggling board visibility uses getObjectByName('Mesh') and sets group.visible to show or hide the entire PCB substrate.

— Auto-rotation is preceded by a 1.5-second Tween that moves the camera to a better orbiting angle, then a 2-second setTimeout enables controls.autoRotate.

— Stopping rotation reverses the sequence: cancel all tweens and timers, tween the camera back to its initial position, then disable autoRotate after 2 seconds.

— Component destruction disposes every geometry and material, calls renderer.forceContextLoss, and nulls all window-scoped references to prevent memory leaks.

Conclusions

Attaching scene, camera, renderer, and controls to the window object is a pragmatic shortcut for a demo but would cause collisions in a multi-instance or micro-frontend setup.

The 2-second delay between camera arrival and autoRotate activation is a UX detail that avoids the disorienting effect of rotation starting mid-transition.

Force-cleaning all tweens, timers, and animation frames before every state change is defensive but necessary; OrbitControls and Tween.js have no built-in conflict resolution when both try to control the camera.

Concepts & terms

Raycaster

A Three.js utility that casts a ray from a given origin and direction (here, from the camera through the mouse position) and returns an array of intersected objects, enabling click-to-select in 3D scenes.

Material cloning cache

A pattern where each mesh's original material is cloned and stored at load time. When a temporary visual change like highlighting is applied, a fresh clone is used, and the cached original is reassigned to revert the change without affecting other meshes that share the same material reference.

Tween.js camera easing

Using the TWEEN library to interpolate camera position and OrbitControls target over time, creating a smooth transition between static viewing and auto-rotation states instead of an abrupt jump.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗