03网页设计Interactive product page

网页设计

把设备放进浏览器:可旋转、可拆解、可剖切,客户在线上就能看懂。

橙色伺服行星减速电机的装配渲染图

FIG.02 伺服行星减速电机 · 可交互

EXP 000% SHADED
正在装配浏览器里的模型00%

拖拽旋转 · 滚轮缩放 · 点击零件

爆炸
视图
剖切
视角
1/7

整机

伺服电机 + 一级行星减速机,同轴布置。

01网页能做什么从展示到选型

不只好看,
还要把产品讲明白。

把产品的结构、参数与使用场景,变成能亲手操作的网页。

01PRODUCT IN 3D

3D 产品展示

客户拖动就能看结构,不再靠想象补全。

可拆解剖切讲解

02FIND YOUR MODEL

选型与参数页

把复杂规格整理成清楚的选择路径。

参数对比选型向导询盘入口

03SPACE IN MINIATURE

交互式厂区微缩

让一整条产线,浓缩进一个能操作的场景。

产线流程工位状态控制台

参考案例 · 版权归原作者来源:@是不才 / @像素脉动,仅用于说明可实现的网页形式。

02怎么做的从模型到网页

一套模型,
讲透一台设备。

不是一段只能看的视频,而是在浏览器里实时计算的三维场景。

  1. STEP 01

    Blender 建模

    按装配关系组织每个部件。

    30 个零件
  2. STEP 02

    glTF 导出

    压缩体积,保留结构层级。

    5.6 MB GLB
  3. STEP 03

    Three.js 渲染

    实时拆解,呈现真实传动结构。

    295,806 三角面 · 5:1
  4. STEP 04

    手机可用

    触控旋转,零件清单随手展开。

    12/18/48 太阳轮 / 行星轮 / 内齿圈齿数

YOUR PRODUCT, EXPLAINED IN 3D

想让你的设备也能
在网页里拆开讲?