whs.js介绍:

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

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

whs.js如何获取

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

直接使用

安装：

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.WebGLRenderernew WHS.ResizeModule() // Make it resizable.
]);
app.start(); // Run app.

案例展示

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

案例一（最后的恐龙）：

最后的恐龙
案例二（像素火山），此图不完整，可简单插件官方案例
像素火山 - 拓客

旋转的正方体

旋转的正方体 - 微信好友提取
类天体旋转3D效果

类天体旋转3D效果

组件

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

core（核心抽象层）：

App
CameraComponent
Component
LightComponent
Loop
MeshComponent
ModuleManager
ModuleSystem

components/meshes（网、线、面、盒等）

Box
Circle
Cone
Cylinder
Dodecahedron
Extrude
Group
Icosahedron
Importer
Lathe
Line
Octahedron
Parametric
Plane
Polyhedron
Ring
Shape
Sphere
Tetrahedron
Text
Torus
Torusknot
Tube

components/lights（灯光）

AmbientLight
DirectionalLight
HemisphereLight
PointLight
SpotLight

components/cameras（相机）

CubeCamera
OrthographicCamera
PerspectiveCamera

还包括一些模型等

modules

DefineModule

modules/app

ControlsModule
ElementModule
FogModule
OrbitControlsModule
PostProcessorModule
RenderingModule
ResizeModule
SceneModule
StateModule
VirtualMouseModule

modules/mesh

AnimationModule
DynamicGeometryModule
TextureModule

总结

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

转载：www.ruanally.com

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

pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
html 实时曲线 js,基于d3.js实现实时刷新的折线图
先来看看效果图下面直接上源代码,html文件实时刷新折线图 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: ...
强烈推荐：小程序常用的6款框架总结
随着前端的知识不断更新,小程序也成为了我们开发中的日常.微信小程序.百度小程序.支付宝小程序.头条小程序等等不断涌入我们的生活,随着小程序的火爆,各种小程序框架不断出现,也在不断更新.路漫漫,学不完呀 ...
[开源] Gio.js -- 一个基于 Three.js 的 Web3D 地球数据可视化库
在这里和大家分享一个和小伙伴们一起开发的开源库 Gio.js .Gio.js 是一个基于 Three.js 的 web 3D 地球数据可视化的开源组件库.使用 Gio.js 的网页应用开发者,可以快速 ...
Gio.js -- 一个基于 Three.js 的 Web3D 地球数据可视化库（一）
Gio.js 开始使用安装使用基础元素简介表面国家连接线背景光晕海洋性能监控配置通过构造函数配置通过API配置配置参数表功能设计型API 设置初始国家高亮被提及国家 ...
Gio.js -- 一个基于 Three.js 的 Web3D 地球数据可视化库（二）
Gio,js 颜色风格类API 设置输出颜色设置输入颜色设置光晕颜色设置背景颜色设置海洋亮度设置相关国家亮度设置被提到国家亮度数据添加数据清除数据切换数据集输入数据到洲异步添加 ...
基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
转载需经本人同意且标注本文原始地址:https://zhaomenghuan.github.io/blog/nodejs-eggjs-usersytem.html 前言近来公司需要构建一套 EMM( ...
分享一个基于jQuery，backbone.js和underscore.js的消息提示框架 - Backbone.Notifier
在线演示本地下载我们曾今在以前的文章中介绍过jQuery的警告和提示框插件,今天这里我们介绍一个开源的消息提示框架 Backbone.Notifier,目前版本为version0.1.使用这个框 ...
Pomelo：网易开源基于 Node.js 的游戏服务端框架
Pomelo 是基于 Node.js 的高性能.分布式游戏服务器框架.它包括基础的开发框架和相关的扩展组件(库和工具包),可以帮助你省去游戏开发枯燥中的重复劳动和底层逻辑的开发.Pomelo 不但适用 ...

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

whs.js介绍:

whs.js如何获取

直接使用

相关特性

案例展示

组件

总结

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

最新文章

热门文章