Whitestorm.js入门

技术2022-07-11 131

什么是whitestorm.js？ ( What is whitestorm.js?)

Whitestorm.js is a framework for developing 3D applications or games that run in browser. This framework is basically a wrapper around Three.js library (like jQuery wraps DOM to make it easier to use). It extends Three.js with simple API and component system to make development easier and better. It uses WebGL to render 3D , so the application will run even on a smartphone or tablet.

Whitestorm.js是用于开发在浏览器中运行的3D应用程序或游戏的框架。该框架基本上是Three.js库的包装器(如jQuery包装DOM使其更易于使用)。它扩展了Three.js 带有简单的API和组件系统，从而使开发变得更轻松，更好。它使用WebGL渲染3D ，因此该应用程序甚至可以在智能手机或平板电脑上运行。

Examples : https://whs-dev.surge.sh/examples/

范例： https ： //whs-dev.surge.sh/examples/

There are also some cool projects made with Three.js already (showcase):

已经有一些用Three.js制作的很棒的项目 (展示)：

OMM Experience

OMM经验

Enough

足够

Nike zoetrope

耐克zoetrope

WhitestormJS框架的想法 ( Idea of WhitestormJS framework)

It’s main goal is to combine 3D rendering with real-time physics simulations in a simple and flexible API . There are some main features it provides:

它的主要目标是在简单灵活的API中将3D渲染与实时物理模拟相结合。它提供了一些主要功能：

Component based scene graph

基于组件的场景图

Integrated high performance physics with Worker (Multithreading)

将高性能物理与Worker (多线程)集成在一起

Automatization of rendering

渲染自动化

Enhanced softbodies

增强软体

ES2015+ based

基于ES2015 +

Webpack friendly

Webpack 友好

Integrated Three.js rendering engine

集成 Three.js渲染引擎

More features you can find in project’s README on github .

您可以在github上的项目README中找到更多功能。

安装 ( Installation)

There are multiple methods of installing whitestorm.js . Let’s describe the one using the <script> tag and the one with webpack .

有多种安装whitestorm.js的方法。让我们用<script>标签描述一个，用webpack描述。

包括到文件 ( Including to the document)

The only thing you should do is to add whitestorm.js to your document using script tag. You can download this file from the build folder .

您唯一要做的就是使用script标签将whitestorm.js添加到文档中。您可以从build文件夹下载此文件。

<script src="whitestorm.js"></script>  <script src="app.js"></script>

That’s all. Now you can write your app with whitestorm.js in app.js.

就这样。现在，你可以写在app.js. whitestorm.js您的应用程序

Webpack ( Webpack)

Run npm install whs . After that you should add the WHS namespace to your code.

运行npm install whs 。之后，您应该将WHS命名空间添加到代码中。

import * as WHS from 'whs'; // ...

Next step is configuring webpack.

下一步是配置webpack。

plugins: [ new webpack.NormalModuleReplacementPlugin(/inline\-worker/, 'webworkify-webpack') // ... ],

This should be done only if you are using the version with physics. You can find more information about variations of whitestorm.js and Usage with webpack within the documentation.

仅当您将版本与物理学一起使用时，才应这样做。你可以找到更多信息whitestorm.js的变化，并与使用的WebPack的文档中。

用法 ( Usage)

WHS.World ( WHS.World)

Now it’s time to make your first whitestorm.js app. First thing you should is do is setup the World object . When you do this, you do multiple things at once :

现在是时候制作您的第一个whitestorm.js应用程序了。您应该做的第一件事是设置World对象。执行此操作时，您会同时执行多项操作：

Setup THREE.Scene (or Physijs.Scene )

设置THREE.Scene (或Physijs.Scene )

Create perspective camera and add it scene

创建透视相机并添加场景 Set gravity (if physics is on)

设置重力(如果启用了物理) Apply background and other renderer options

应用背景和其他渲染器选项 Set autoresize/stats (in addition)

设置自动调整大小/统计信息(另外) const world = new WHS.World({ autoresize: "window", stats: 'fps', // Statistics tool for developers. rendering: { background: { color: 0x162129 } }, gravity: [0, -100, 0], // Physic gravity. camera: { position: { z: 50 } } }); WHS.World: Initialize scene, renderer and camera.

The WebGL canvas will be automatically added to the document.body node. You can change the destination by setting a DOM element to the container property of the configuration object that we pass to the WHS.World.

WebGL画布将自动添加到document.body节点。您可以通过将DOM元素设置为我们传递给WHS.World的配置对象的container属性来更改目标。

WHS.Sphere ( WHS.Sphere)

Next thing to do is to make a simple sphere that will fall down on a plane. As we already have scene, camera and renderer set up, we can start making the sphere immediately. To make a simple sphere, use the WHS.Sphere component. It is a special component that wraps THREE.SphereGeometry, mesh and physics.

接下来要做的是制作一个将落在平面上的简单sphere 。由于已经设置了场景，相机和渲染器，因此我们可以立即开始制作球体。要制作一个简单的球体，请使用WHS.Sphere组件。它是包装THREE.SphereGeometry ，网格和物理的特殊组件。

By default if you use a physics version of whitestorm.js all objects are created as physics objects. If you don’t want to have a physics object — simply add physics: false line to sphere config.

默认情况下，如果您使用whitestorm.js的物理版本，则所有对象都将创建为物理对象。如果您不想拥有物理对象，只需在球体配置中添加physics: false line。

// const world = ... const sphere = new WHS.Sphere({ // Create sphere comonent. geometry: { radius: 3, widthSegments: 32, heightSegments: 32 }, mass: 10, // Mass of physics object. material: { color: 0xF2F2F2, kind: 'basic' }, position: [0, 10, 0] }); sphere.addTo(world); // Add sphere to world.

Now if you open your document you will see the sphere that will fall down.

现在，如果您打开文档，您将看到球体掉落。

链接 (Links)

Github: https://github.com/WhitestormJS/whitestorm.js

GitHub： https : //github.com/WhitestormJS/whitestorm.js

Website: https:/whsjs.io/

网站： https：//whsjs.io/

Showcase: https://whs-dev.surge.sh/examples/

展示柜： https : //whs-dev.surge.sh/examples/

.x-secondary-small { display: none; } @media only screen and (max-width: 600px) { .x-secondary { max-height: none; } .x-secondary-large { display: none; } .x-secondary-small { display: block; } } .x-secondary-small { display: none; } @media only screen and (max-width: 600px) { .x-secondary { max-height: none; } .x-secondary-large { display: none; } .x-secondary-small { display: block; } }

翻译自: https://davidwalsh.name/started-whitestormjs