3d正方体旋转相册代码_基于Three.js的Web应用程序的超快3D框架——whs.js

介绍

whs是一个在Three.js基础上构建的Web端3D应用框架，它实现了一个具有组件系统和插件支持的核心，可以快速开发出3D场景。

---

---

如何获取

whs是开源项目，因此你可以直接到Github上获取，也同时提供了相关文档和案例演示，今后可能不会直接给出地址，原因大家都知道！

---

---

直接使用

安装：

npm install whs

---

---

const app = new WHS.App([ new WHS.ElementModule(), // Apply to DOM. new WHS.SceneModule(), // Create a new THREE.Scene and set it to app. new WHS.DefineModule('camera', new WHS.PerspectiveCamera({ // Apply a camera. position: new THREE.Vector3(0, 0, 50) })), new WHS.RenderingModule({bgColor: 0x162129}), // Apply THREE.WebGLRenderer new WHS.ResizeModule() // Make it resizable.]);app.start(); // Run app.

---

相关特性

• 使用简单
• 加速3D场景原型设计
• 基于组件的场景图
• 多线程，任何高性能物理模型的简单集成
• 渲染自动化
• ES2015+基于
• 扩展系统(模块)
• 网络友好
• 集成Three.js渲染引擎，可以同时使用whs.js和Three.js

案例展示

官网文档中展示了相当多的案例，我们通过Gif来简单感受下，动图不能太大，可能效果稍差，建议直接去文档看案例

---

• 案例一(最后的恐龙)：

---

---

• 案例二(像素火山)，此图不完整，可简单插件官方案例

---

---

• 旋转的正方体

---

---

• 类天体旋转3D效果

---

---

组件

whs将各种物理场景进行了抽象，变成一个个组件

core(核心抽象层)：

1. App
2. CameraComponent
3. Component
4. LightComponent
5. Loop
6. MeshComponent
7. ModuleManager
8. ModuleSystem

---

components/meshes(网、线、面、盒等)

1. Box
2. Circle
3. Cone
4. Cylinder
5. Dodecahedron
6. Extrude
7. Group
8. Icosahedron
9. Importer
10. Lathe
11. Line
12. Octahedron
13. Parametric
14. Plane
15. Polyhedron
16. Ring
17. Shape
18. Sphere
19. Tetrahedron
20. Text
21. Torus
22. Torusknot
23. Tube

---

components/lights(灯光)

1. AmbientLight
2. DirectionalLight
3. HemisphereLight
4. PointLight
5. SpotLight

---

components/cameras(相机)

1. CubeCamera
2. OrthographicCamera
3. PerspectiveCamera

---

还包括一些模型等

---

modules

1. DefineModule

---

modules/app

1. ControlsModule
2. ElementModule
3. FogModule
4. OrbitControlsModule
5. PostProcessorModule
6. RenderingModule
7. ResizeModule
8. SceneModule
9. StateModule
10. VirtualMouseModule

---

modules/mesh

1. AnimationModule
2. DynamicGeometryModule
3. TextureModule

---

总结

总的来说whs是一个有意思的3D框架，其结合3D动画能做出一些非常炫酷的场景出来，模拟出个各种实际物理意义上的模型出来！还是值得我们学习的！