Three-Container

---

项目介绍

随着三维模型在网页上的应用越来越广泛，用户对三维模型的交互性要求也越来越高。本项目旨在开发一个交互式3D查看器，用户可以在网页上自由旋转、缩放和移动视角查看三维模型。

目录

1. • 构建工具
2. 开始
   • 依赖
3. 标签属性
4. 许可证
5. 参考资料
6. 开发日志

构建工具

• Three.js

开始

部署前阅读

依赖

在head中添加以下依赖

• javascript

  <!-- Three.js 与 OBJ/MTL加载器 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/OBJLoader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/MTLLoader.js"></script>
  <!-- 引入 TensorFlow.js 与 handpose 模型（启用手势交互时需要） -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose@latest"></script>

标签属性

属性	类型	默认值	说明
src	String	-	模型文件路径（支持.obj格式）
mtl	String	同目录同名mtl	材质文件路径
width	Number	800	画布宽度（像素）
height	Number	600	画布高度（像素）
auto-display	Boolean	false	启用自动旋转展示
auto-display-speed	Float	0.005	自动旋转速度（弧度/帧）
light-position	String	"5,5,5"	光源坐标（支持多个，分号分隔）
camera-position	String	自动计算	相机坐标（x,y,z或单数字距离）
gesture-control	Boolean	false	集成手势控制函数实现交互新体验

许可证

根据 MIT 许可证分发。打开 LICENSE.md 查看更多内容。

参考资料

• 零基础学习Three.js CSDN
• Three.js 教程 CSDN
• Three,js项目实战 知乎
• Ovilia/ThreeExample.js
• three.js examples

开发日志

• 3d-container 标签的模拟实现-开发日志