Web3D展示框架whs.js：基于Three.js的Web3d应用程序的超快3D框架

whs.js介绍:

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

Web3D展示框架whs.js：基于 Three.js的Web应用程序的超快 web3D框架

whs.js如何获取

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

Web3D展示框架whs.j

直接使用

安装：

npm install whs

引入：

<script src="js/three.min.js"></script>
<script src="js/whs.min.js"></script>

使用：

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效果
   

  

  类天体旋转3D效果

 

组件

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

core（核心抽象层）：

 

• App
• CameraComponent
• Component
• LightComponent
• Loop
• MeshComponent
• ModuleManager
• 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.js是一个有意思的基于Three.js的web3D框架，其结合3D动画能做出一些非常炫酷的场景出来，模拟出个各种实际物理意义上的模型出来！还是值得我们学习的！

转载：www.ruanally.com