archive-gh-me/whs.js
1
0
Fork 0
mirror of https://github.com/WhitestormJS/whs.js.git synced 2026-02-01 16:57:32 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #259 from WhitestormJS/patch#2

Browse Source 
Patch#2: DefineModule, StateModule
This commit is contained in:
Alexander Buzin 2017-06-30 21:20:36 +03:00 committed by GitHub
commit a40e5d8318
141 changed files with 2783 additions and 1983 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
.github/WHY.md vendored Normal file
View File

@ -0,0 +1,72 @@
### Why?
* 🤔 Because making of even **a basic Three.js application requires at least ~20 lines of code** (see [this tutorial](https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene))
- **Three.js:** you will need to setup: _scene, renderer, camera_, make an `animate()` function before making the actual app.
- **Whitestorm.js:** There are modules that helps you easily setup them:
```javascript
const app = new WHS.App([
new WHS.ElementModule(), // attach to DOM
new WHS.SceneModule(), // creates THREE.Scene instance
new WHS.DefineModule('camera', new WHS.PerspectiveCamera()), // creates PerspectiveCamera instance
new WHS.RenderingModule() // creates WebGLRenderer instance
]);
app.start(); // run animation
```
See [more about modules](https://medium.com/whitestormjs-framework/migrating-to-whitestormjs-v2-beta-module-system-2eeaeda08a80#.qqdn2mhct)
* 💣 **Adding physics is hard.**
- **Three.js:** To make your app run with physics you need to make a second world with same 3d objects and apply their transform (position & rotation) to your rendered scene objects (`THREE.Scene` for example) in every frame.
- **Whitestorm.js:** Can be done with modules in a few lines:
```javascript
const app = new WHS.App([
// Other modules...
new PHYSICS.WorldModule()
]);
const sphere = new WHS.Sphere({
geometry: {
radius: 3
},
modules: [
new PHYSICS.SphereModule({
mass: 10
})
],
material: new THREE.MeshBasicMaterial({color: 0xff0000}) // red material
});
app.start(); // run animation
```
Use [physics-module-ammonext](https://github.com/WhitestormJS/physics-module-ammonext) as your physics module.
Try with **physics** on [**Codepen**](http://codepen.io/sasha240100/pen/wgEXwN):
<a href="http://codepen.io/sasha240100/pen/wgEXwN"><img src="http://i.imgur.com/AcsnqTs.png" height="50" /></a>
* 🔌 **Components & plugins**
- **Three.js:** You can create meshes with geometry and material.
- **Whitestorm.js:** You can create components with advanced custom functionality.
```javascript
export class BasicComponent extends WHS.MeshComponent {
build() {
return new THREE.Mesh(
new THREE.IcosahedronGeometry(3, 5),
new THREE.MeshBasicMaterial({color: 0xffffff})
)
}
randomize() { // Additional function
this.position.set(Math.random() * 10, Math.random() * 10, Math.random() * 10);
}
}
```
- See [Component system in interactive 3D of web](https://medium.com/@_alex_buzin/component-system-in-interactive-3d-of-web-18348eecf270#.lynivy4ut) article for more info.

460
README.md
View File

@ -1,160 +1,94 @@
<img src="http://i.imgur.com/EgdbmwO.png" width="40%"></img>
<a href="https://discord.gg/frNetGE"><img width="100%" src="http://i.imgur.com/Dr9m7Xj.jpg"></a>
[![XO code style][xo]][xo-url]
[![](https://img.shields.io/github/release/WhitestormJS/whitestorm.js.svg?style=flat-square)](https://github.com/WhitestormJS/whitestorm.js/releases)
[![Three][three]][three-url]
[![NPM Version][npm]][npm-url]
[![Build Status][travis]][travis-url]
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Coverage Status][coverage]][coverage-url]
[![Known Vulnerabilities][snyk]][snyk-url]
- [Documentation](http://whsjs.io/)
- [Examples](https://whs-dev.surge.sh/examples/)
Community chat. [Join us!][discord-url]
[![Discord][discord]][discord-url]
### Table of content
[![OpenCollective Backers][backer-badge]][backer-url]
[![OpenCollective Sponsors][sponsor-badge]][sponsor-url]
- [Basic setup](#basic-setup)
- [npm](#npm)
- [Featured projects](#featured-projects)
- [Features](#features)
- [Why?](/.github/WHY.md)
[xo]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square
[xo-url]: https://github.com/sindresorhus/xo
[three]: https://img.shields.io/badge/three-r85-blue.svg?style=flat-square
[three-url]: https://github.com/mrdoob/three.js/
[npm]: https://img.shields.io/npm/v/whs.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/whs
[travis]: https://travis-ci.org/WhitestormJS/whitestorm.js.svg?branch=beta&style=flat-square
[travis-url]: https://travis-ci.org/WhitestormJS/whitestorm.js?branch=beta
[coverage]: https://img.shields.io/coveralls/WhitestormJS/whitestorm.js/beta.svg?style=flat-square
[coverage-url]: https://coveralls.io/github/WhitestormJS/whitestorm.js?branch=beta
[snyk]: https://snyk.io/test/npm/whs/badge.svg?style=flat-square
[snyk-url]: https://snyk.io/test/npm/whs
[discord]: https://discordapp.com/api/guilds/238405369859145729/widget.png
[discord-url]: https://discord.gg/frNetGE
> **Framework for developing 3D web apps**
### Contributors welcome! :P [How to start contributing](https://github.com/WhitestormJS/whitestorm.js/blob/beta/.github/CONTRIBUTING.md)
### [Development chat](https://discord.gg/frNetGE) - opens in discord app. Ask for help here;)
### [Support the project](https://opencollective.com/whitestormjs#support) - [Donate] buy developers a ☕
### Basic setup
```bash
$ npm install --save whs
# Install npm version
$ npm install whs --save-dev
```
## [Showcases](https://whs-dev.surge.sh/examples/)
Download the [minified library](https://whs-dev.surge.sh/build/whitestorm.js) or link the one from [CDN](https://cdnjs.com/libraries/whitestorm.js)
You can find lots of examples at [showcases](https://whs-dev.surge.sh/examples/).
```html
<script src="js/three.min.js"></script>
<script src="js/whs.min.js"></script>
```
<a href="https://whs-dev.surge.sh/examples/?basic/helloworld">
<img alt="basic/helloworld" target="_blank" src="http://i.imgur.com/IRq5Hp4.gif" width="32%" />
</a>
<a href="https://whs-dev.surge.sh/examples/?basic/model">
<img alt="basic/model" target="_blank" src="http://i.imgur.com/RmTjjiA.gif" width="32%" />
</a>
<a href="https://whs-dev.surge.sh/examples/?softbody/cloth3">
<img alt="softbody/cloth3" target="_blank" src="http://i.imgur.com/BgHdX56.gif" width="32%" />
</a>
<a href="https://whs-dev.surge.sh/examples/?post-processing/basic-glitch">
<img alt="postprocessing/basic-glitch" target="_blank" src="http://i.imgur.com/ASUN7tR.gif" width="32%" />
</a>
<a href="https://whs-dev.surge.sh/examples/?softbody/ropes">
<img alt="softbody/ropes" target="_blank" src="http://i.imgur.com/wRFKfTM.gif" width="32%" />
</a>
<a href="https://whs-dev.surge.sh/examples/?design/saturn">
<img alt="design/saturn" target="_blank" src="http://i.imgur.com/JZ5HryS.gif" width="32%" />
The code below makes a `WHS.App` instance which handles all your [modules]() and components for better work with `WebGL`. This one creates a _scene_, _camera_ and _renderer_ - we add the following modules to the App.
```js
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 Vector3(0, 0, 50)
})),
new WHS.RenderingModule({bgColor: 0x162129}), // Apply THREE.WebGLRenderer
new WHS.ResizeModule() // Make it resizable.
]);
app.start(); // Run app.
```
<a href="http://codepen.io/sasha240100/pen/JELBGX"><img src="http://blog.codepen.io/wp-content/uploads/2012/06/TryItOn-CodePen.png" height="50" /></a>
#### NPM
```bash
# Install npm version
$ npm install whs
```
[![NPM Version][npm]][npm-url]
### Featured projects
<a href="http://theroguepixel.com/">
<img src="http://whsjs.io/images/showcase/roguepixel.jpg" alt="http://theroguepixel.com/" width="30%" />
</a>
### Why?
* 🤔 Because making of even **a basic Three.js application requires at least ~20 lines of code** (see [this tutorial](https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene))
- **Three.js:** you will need to setup: _scene, renderer, camera_, make an `animate()` function before making the actual app.
- **Whitestorm.js:** There are modules that helps you easily setup them:
<a href="http://supertiny.agency/">
<img src="http://whsjs.io/images/showcase/supertiny.jpg" alt="http://supertiny.agency/" width="30%" />
</a>
```javascript
const app = new WHS.App([
new WHS.ElementModule(), // attach to DOM
new WHS.SceneModule(), // creates THREE.Scene instance
new WHS.CameraModule(), // creates PerspectiveCamera instance
new WHS.RenderingModule() // creates WebGLRenderer instance
]);
<a href="https://alexbuzin.me/">
<img src="http://whsjs.io/images/showcase/alexbuzinme.jpg" alt="https://alexbuzin.me/" width="30%" />
</a>
app.start(); // run animation
```
<a href="https://spatial.100shapes.com/">
<img src="http://whsjs.io/images/showcase/spatial.jpg" alt="https://spatial.100shapes.com/" width="30%" />
</a>
See [more about modules](https://medium.com/whitestormjs-framework/migrating-to-whitestormjs-v2-beta-module-system-2eeaeda08a80#.qqdn2mhct)
* 💣 **Adding physics is hard.**
- **Three.js:** To make your app run with physics you need to make a second world with same 3d objects and apply their transform (position & rotation) to your rendered scene objects (`THREE.Scene` for example) in every frame.
- **Whitestorm.js:** Can be done with modules in a few lines:
```javascript
const app = new WHS.App([
// Other modules...
new PHYSICS.WorldModule()
]);
const sphere = new WHS.Sphere({
geometry: {
radius: 3
},
modules: [
new PHYSICS.SphereModule({
mass: 10
})
],
material: new THREE.MeshBasicMaterial({color: 0xff0000}) // red material
});
app.start(); // run animation
```
Use [physics-module-ammonext](https://github.com/WhitestormJS/physics-module-ammonext) as your physics module.
Try with **physics** on [**Codepen**](http://codepen.io/sasha240100/pen/wgEXwN):
<a href="http://codepen.io/sasha240100/pen/wgEXwN"><img src="http://i.imgur.com/AcsnqTs.png" height="50" /></a>
<a href="http://plateux.space/">
<img src="http://whsjs.io/images/showcase/plateux.jpg" alt="http://plateux.space/" width="30%" />
</a>
* 🔌 **Components & plugins**
- **Three.js:** You can create meshes with geometry and material.
- **Whitestorm.js:** You can create components with advanced custom functionality.
```javascript
export class BasicComponent extends WHS.MeshComponent {
build() {
return new THREE.Mesh(
new THREE.IcosahedronGeometry(3, 5),
new THREE.MeshBasicMaterial({color: 0xffffff})
)
}
randomize() { // Additional function
this.position.set(Math.random() * 10, Math.random() * 10, Math.random() * 10);
}
}
```
- See [Component system in interactive 3D of web](https://medium.com/@_alex_buzin/component-system-in-interactive-3d-of-web-18348eecf270#.lynivy4ut) article for more info.
-----
## Download
<a href="https://raw.githubusercontent.com/WhitestormJS/whitestorm.js/beta/build/whitestorm.js"><img src="http://i.imgur.com/qKJEb5t.png" height="40" /></a>
<a href="https://raw.githubusercontent.com/WhitestormJS/whitestorm.js/beta/build/whitestorm.compact.js"><img src="http://i.imgur.com/RY9kDFD.png" height="40" /></a>
## CDN
Proudly hosted by [cdnjs](https://cdnjs.com/libraries/whitestorm.js)
## Features
### Features
* 💎 **Simple in usage**
* :rocket: Speeds up 3D scene prototyping
@ -167,254 +101,18 @@ Proudly hosted by [cdnjs](https://cdnjs.com/libraries/whitestorm.js)
* ✔️ **Integrated [Three.js](https://threejs.org/) rendering engine**
* :revolving_hearts: Work with Whitestorm.js and Three.js at the same time
### WEBPACK
Use [whitestorm-app-boilerplate](https://github.com/WhitestormJS/whitestorm-app-boilerplate)
[xo]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square
[xo-url]: https://github.com/sindresorhus/xo
## Documentation
[three]: https://img.shields.io/badge/three-r86-blue.svg?style=flat-square
[three-url]: https://github.com/mrdoob/three.js/
Documentation for beta is currently in progress. [Contact developers in discord chat](https://discord.gg/frNetGE)
[npm]: https://img.shields.io/npm/v/whs.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/whs
## Basic application
[travis]: https://img.shields.io/travis/WhitestormJS/whitestorm.js.svg?style=flat-square
[travis-url]: https://travis-ci.org/WhitestormJS/whitestorm.js?branch=beta
Try on [**Codepen**](http://codepen.io/sasha240100/pen/JELBGX):
<a href="http://codepen.io/sasha240100/pen/JELBGX"><img src="http://i.imgur.com/AcsnqTs.png" height="50" /></a>
```javascript
const app = new WHS.App([
new WHS.ElementModule(), // attach to DOM
new WHS.SceneModule(), // creates THREE.Scene instance
new WHS.CameraModule({
position: new THREE.Vector3(0, 0, -10)
}), // creates PerspectiveCamera instance
new WHS.RenderingModule(), // creates WebGLRenderer instance
new WHS.OrbitControlsModule() // orbit controls
]);
const sphere = new WHS.Sphere({ // Create sphere comonent.
geometry: {
radius: 3
},
material: new THREE.MeshBasicMaterial({
color: 0xffffff, // White color.
}),
position: new THREE.Vector3(0, 1, 0) // x: 0, y: 1, z: 0
});
sphere.addTo(app);
console.log(sphere.native); // Logs THREE.Mesh of this component
app.start(); // run animation
```
# [React integration](https://github.com/WhitestormJS/react-whs)
You can easily integrate Whitestorm.js with React using [react-whs](https://github.com/WhitestormJS/react-whs) tool!
```bash
$ npm install react react-whs --save
```
Try with **React** on [**Codepen**](http://codepen.io/sasha240100/pen/dNqKMd?editors=1010):
<a href="http://codepen.io/sasha240100/pen/dNqKMd?editors=1010"><img src="http://i.imgur.com/AcsnqTs.png" height="50" /></a>
**Example:**
```javascript
import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';
export class Application extends Component {
render() {
return (
<App modules={[
new WHS.SceneModule(),
new WHS.CameraModule({
position: {
z: 20
}
}),
new WHS.RenderingModule(),
new WHS.OrbitControlsModule()
]}>
<Sphere
geometry={[3, 32, 32]}
material={new THREE.MeshBasicMaterial({color: 0xffffff})}
key="1"
/>
</App>
)
}
}
```
## Modules
### Devtools
|Name|Status|Description|
|:--:|:----:|:----------|
|[whs-module-statsjs][statsjs]|![statsjs-npm]|WhitestormJS module for JavaScript Performance Monitor ⚡⌛|
|[whs-module-dat.gui][datgui]|![datgui-npm]|User Interface for runtime editing properties 🔑🛠🔩|
### Physics
|Name|Status|Description|
|:--:|:----:|:----------|
|[physics-module-ammonext][physics-ammonext]|![physics-ammonext-npm]|Physics module based on [Ammo.js](https://github.com/kripken/ammo.js/)|
### Audio
|Name|Status|Description|
|:--:|:----:|:----------|
|[whs-module-audio][audio]| WIP |Audio module for 3D positional sound 🔉|
### Integrations
|Name|Status|Description|
|:--:|:----:|:----------|
|[react-whs][react-whs]|![react-whs-npm]|Integration with [ReactJS](https://facebook.github.io/react/)|
## Backers
Support us with a monthly donation and help us continue framework development🎉 and adding new features💡🎁.
<a href="https://opencollective.com/whitestormjs/backer/0/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/1/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/2/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/3/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/4/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/5/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/6/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/7/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/8/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/9/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/10/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/10/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/11/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/11/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/12/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/12/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/13/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/13/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/14/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/14/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/15/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/15/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/16/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/16/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/17/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/17/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/18/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/18/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/19/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/19/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/20/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/20/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/21/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/21/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/22/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/22/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/23/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/23/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/24/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/24/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/25/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/25/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/26/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/26/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/27/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/27/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/28/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/28/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/29/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/29/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/30/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/30/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/31/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/31/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/32/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/32/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/33/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/33/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/34/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/34/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/35/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/35/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/36/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/36/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/37/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/37/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/38/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/38/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/39/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/39/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/40/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/40/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/41/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/41/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/42/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/42/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/43/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/43/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/44/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/44/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/45/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/45/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/46/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/46/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/47/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/47/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/48/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/48/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/49/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/49/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/50/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/50/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/51/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/51/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/52/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/52/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/53/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/53/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/54/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/54/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/55/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/55/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/56/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/56/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/57/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/57/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/58/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/58/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/59/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/59/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/60/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/60/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/61/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/61/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/62/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/62/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/63/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/63/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/64/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/64/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/65/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/65/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/66/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/66/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/67/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/67/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/68/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/68/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/69/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/69/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/70/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/70/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/71/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/71/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/72/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/72/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/73/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/73/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/74/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/74/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/75/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/75/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/76/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/76/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/77/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/77/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/78/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/78/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/79/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/79/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/80/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/80/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/81/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/81/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/82/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/82/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/83/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/83/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/84/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/84/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/85/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/85/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/86/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/86/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/87/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/87/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/88/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/88/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/89/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/89/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/90/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/90/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/91/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/91/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/92/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/92/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/93/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/93/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/94/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/94/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/95/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/95/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/96/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/96/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/97/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/97/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/98/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/98/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/99/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/99/avatar.svg"></a>
<a href="https://opencollective.com/whitestormjs/backer/100/website" target="_blank"><img src="https://opencollective.com/whitestormjs/backer/100/avatar.svg"></a>
## Sponsors
Become a sponsor and get your logo on on our README on Github with a link to your website🔭.
[![Sponsors][sponsors-image]][support-url]
[statsjs]: https://github.com/WhitestormJS/whitestorm.js/tree/beta/modules/whs-module-statsjs
[statsjs-npm]: https://img.shields.io/npm/v/whs-module-statsjs.svg?style=flat-square
[datgui]: https://github.com/WhitestormJS/whitestorm.js/tree/beta/modules/whs-module-dat.gui
[datgui-npm]: https://img.shields.io/npm/v/whs-module-dat.gui.svg?style=flat-square
[physics-ammonext]: https://github.com/WhitestormJS/physics-module-ammonext
[physics-ammonext-npm]: https://img.shields.io/npm/v/physics-module-ammonext.svg?style=flat-square
[audio]: https://github.com/WhitestormJS/whitestorm.js/tree/beta/modules/whs-module-audio
[react-whs]: https://github.com/WhitestormJS/react-whs
[react-whs-npm]: https://img.shields.io/npm/v/react-whs.svg?style=flat-square
[backer-url]: #backers
[backer-badge]: https://opencollective.com/whitestormjs/backers/badge.svg?color=blue
[support-url]: https://opencollective.com/whitestormjs#support
[sponsor-url]: #sponsors
[sponsor-badge]: https://opencollective.com/whitestormjs/sponsors/badge.svg?color=blue
[backers-image]: https://opencollective.com/whitestormjs/backers.svg
[sponsors-image]: https://opencollective.com/whitestormjs/sponsors.svg
[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](https://alexbuzin.me/)
[discord]: https://discordapp.com/api/guilds/238405369859145729/widget.png
[discord-url]: https://discord.gg/frNetGE

2
docs/data/3D Transforms.md
View File

@ -95,3 +95,5 @@ Commonly used:
- `ball.scale= new THREE.Vector3( x, y, z )`
See [list of THREE.Vector3 methods](https://threejs.org/docs/index.html#Reference/Math/Vector3.set) at Three.js documentation.
[> Usage with webpack](Usage with webpack.html)

2
docs/data/Groups.md
View File

@ -25,3 +25,5 @@ const group = new WHS.Group(box, sphere);
```
> You can list elements in sequence or pass an array. (see es6 rest/spread).
[> 3D Transforms](3D Transforms.html)

12
docs/data/Hello World!.md
View File

@ -22,23 +22,19 @@ const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 0, 50)
}),
})),
new WHS.RenderingModule({bgColor: 0x162129}),
new WHS.ResizeModule()
]);
```
[> Loops & 3D Animation](Loops & 3D Animation.html)
## FAQ
> Q: Can I use presets of modules in App?
>
> A: `App` has it's own preset for simple apps quickstart.
>
> ---
>
> Q: Why is the color in Hexadecimal format?
>
> A: Simply following Three.js' [best practice](https://threejs.org/docs/api/math/Color.html).

2
docs/data/Loops & 3D Animation.md
View File

@ -31,3 +31,5 @@ loop.start(app);
```
This loop will be destroyed after 5 seconds.
[> Groups](Groups.html)

7
docs/data/Modules.md
View File

@ -2,6 +2,10 @@
Modules provide easy integration with components. They can make a lot of complex things much simpler to other developers (such as adding 3D physics).
### Articles:
- [Migrating to WhitestormJS v2 beta. Module system](https://hackernoon.com/migrating-to-whitestormjs-v2-beta-module-system-2eeaeda08a80)
## Simple module
Let's create a simple module that will add `.alertRandom()` method to component, in which this module is used.
@ -130,3 +134,6 @@ Module methods are executed in this order:
| `geometry` | `THREE.Geometry` instance |
| `material` | `THREE.Material` instance |
| `mesh` | `THREE.Mesh` instance |
[> Animation Clips](Animation Clips.html)

27
docs/data/Showcase.md Normal file
View File

@ -0,0 +1,27 @@
# featured projects
<div class="featured">
<a href="http://theroguepixel.com/">
<img src="images/showcase/roguepixel.jpg" alt="http://theroguepixel.com/" width="300" />
</a>
<a href="http://supertiny.agency/">
<img src="images/showcase/supertiny.jpg" alt="http://supertiny.agency/" width="300" />
</a>
<a href="https://alexbuzin.me/">
<img src="images/showcase/alexbuzinme.jpg" alt="https://alexbuzin.me/" width="300" />
</a>
<a href="https://spatial.100shapes.com/">
<img src="images/showcase/spatial.jpg" alt="https://spatial.100shapes.com/" width="300" />
</a>
<a href="http://plateux.space/">
<img src="images/showcase/plateux.jpg" alt="http://plateux.space/" width="300" />
</a>
</div>
[> "Hello world" \ Basic scene](Hello World!.html)

3
docs/data/Usage with webpack.md
View File

@ -29,3 +29,6 @@ With just a few lines of setup - you can use our shorteners for src/ files:
- `@whs+meshes/Box`, `@whs+meshes/Sphere`, and so on....
- `@whs+lights` - Light components
- `@whs+lights/AmbientLight`, `@whs+lights/DirectionalLight`, ...
[> Modules](Modules.html)

8
docs/data/Welcome.md
View File

@ -5,7 +5,7 @@
```bash
# Install npm version
$ npm install whs --save-dev
$ npm install whs
```
It implements a core with component system and plugin support for fast development of 3D scene with physics.
@ -17,9 +17,9 @@ 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.CameraModule({ // Apply a camera.
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({ // Apply a camera.
position: new Vector3(0, 0, 50)
}),
})),
new WHS.RenderingModule({bgColor: 0x162129}), // Apply THREE.WebGLRenderer
new WHS.ResizeModule() // Make it resizable.
@ -27,3 +27,5 @@ const app = new WHS.App([
app.start(); // Run app.
```
[> featured projects](Showcase.html)

11
docs/data/data.yml
View File

@ -2,9 +2,20 @@ markdown:
default: Welcome
order:
- Welcome
- Showcase
- Hello World!
- Loops & 3D Animation
- Groups
- 3D Transforms
- Usage with webpack
- Modules
Classes:
order:
- core
- components/meshes
- components/lights
- components/cameras
- modules
- modules/app
- modules/mesh

29
docs/template/publish.js vendored
View File

@ -296,13 +296,13 @@ function generateSourceFiles(sourceFiles, encoding) {
logger.error("Error while generating source file %s: %s", file, e.message)
}
generate(
"Source",
sourceFiles[file].shortened,
[source],
helper.getUniqueFilename(sourceFiles[file].shortened),
false
)
// generate(
// "Source",
// sourceFiles[file].shortened,
// [source],
// helper.getUniqueFilename(sourceFiles[file].shortened),
// false
// )
})
}
@ -407,6 +407,7 @@ function buildMemberNav(items, itemHeading, itemsSeen, linktoFn) {
var itemsNav = ""
var categories = {none: []};
var categoryLinks = {};
var categoriesOrder = config.Classes.order || [];
nav.push(buildNavHeading(itemHeading, false, true))
@ -417,6 +418,9 @@ function buildMemberNav(items, itemHeading, itemsSeen, linktoFn) {
if (!categories[name]) {
categories[name] = [item];
categoryLinks[name] = linktoFn(item.memberof, name);
// console.log(name);
// console.log(categoriesOrder);
if (categoriesOrder.indexOf(name) == -1) categoriesOrder.push(name);
} else categories[name].push(item);
} else {
categories.none.push(item);
@ -472,12 +476,11 @@ function buildMemberNav(items, itemHeading, itemsSeen, linktoFn) {
categories.none.forEach(processItemEach);
for (let key in categories) {
if (key !== 'none') {
nav.push(buildNavHeading(categoryLinks[key], true));
categories[key].forEach(processItemEach);
}
}
categoriesOrder.forEach(function (key) {
if (!categories[key]) return;
nav.push(buildNavHeading(categoryLinks[key], true));
categories[key].forEach(processItemEach);
});
}
return nav

BIN
docs/template/static/images/showcase/alexbuzinme.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
docs/template/static/images/showcase/plateux.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
docs/template/static/images/showcase/roguepixel.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
docs/template/static/images/showcase/spatial.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
docs/template/static/images/showcase/supertiny.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

31
docs/template/static/less/jsdoc-default.less vendored
View File

@ -188,6 +188,12 @@ samp {
&:empty {
margin: 0;
}
iframe {
width: 100%;
height: 400px;
border: none;
}
}
#main {
@ -865,7 +871,7 @@ dl.param-type {
.sidebar {
position: fixed;
right: 6%;
top: 80px;
top: 100px;
h5 {
margin: 20px 0;
@ -1042,7 +1048,7 @@ dl.param-type {
padding-left: 20px;
}
&.section-members h4 {
&.section-members h4:not(.no-dec) {
border-left: 4px solid #efefef;
padding: 0;
padding-left: 20px;
@ -1060,7 +1066,7 @@ dl.param-type {
}
}
&.section-method h4 {
&.section-method h4:not(.no-dec) {
border-left: 4px solid #efefef;
padding: 0;
padding-left: 20px;
@ -1132,3 +1138,22 @@ hr {
}
}
}
.featured {
display: inline-block;
a {
display: block;
height: 174.38px;
float: left;
position: relative;
&:hover img {
opacity: 0.75;
}
}
}
.no-u:hover {
text-decoration: none;
}

6
docs/template/tmpl/augments.tmpl vendored
View File

@ -4,7 +4,7 @@
?>
<?js if (data.augments && data.augments.length) { ?>
<ul><?js data.augments.forEach(function(a) { ?>
<li><?js= self.linkto(a, a) ?></li>
<?js }) ?></ul>
<?js data.augments.forEach(function(a) { ?>
<?js= self.linkto(a, a) ?>
<?js }) ?>
<?js } ?>

4
docs/template/tmpl/container.tmpl vendored
View File

@ -98,11 +98,7 @@
<?js } ?>
</div>
<?js if (doc.augments && doc.augments.length) { ?>
<h3 class="subsection-title">Extends <span class="gline"></span></h3>
<?js= self.partial('augments.tmpl', doc) ?>
<?js } ?>
<?js if (doc.kind === 'module' && doc.requires && doc.requires.length) { ?>
<h3 class="subsection-title">Requires <span class="gline"></span></h3>

21
docs/template/tmpl/layout.tmpl vendored
View File

@ -25,10 +25,17 @@
<label for="nav-trigger" class="overlay"></label>
<nav>
<span class="logo">whs<span class="gl">.js</span>&nbsp;<span class="gline"></span></span>
<a class="no-u" href="index.html"><span class="logo">whs<span class="gl">.js</span>&nbsp;<span class="gline"></span></span></a>
<li>
<a href="https://github.com/WhitestormJS/whitestorm.js/releases"><img src="https://img.shields.io/github/release/WhitestormJS/whitestorm.js.svg?style=flat-square" alt="GitHub release"></a>
</li>
<li><a href="https://discord.gg/5yNCvC4">chat</a> <span style="color: #777; font-size: 12px; margin-left: 5px;">(discord)</span></li>
<li><a href="https://github.com/WhitestormJS/whitestorm.js">github</a> <span style="color: #777; font-size: 12px; margin-left: 5px;">(source code)</span></li>
<li><a href="https://twitter.com/_alex_buzin">twitter</a></li>
<li><a href="https://whs-dev.surge.sh/examples/">examples</a></li>
<li><span>&nbsp;</span></li>
<li><a href="https://threejs.org/">three.js</a></li>
<li><a href="https://twitter.com/_alex_buzin">twitter</a> <span style="color: #777; font-size: 12px; margin-left: 5px;">(me)</span></li>
<li><span>&nbsp;</span></li>
<?js= this.nav ?>
<!-- <div class="nav-footer">
<a href="https://discord.gg/5yNCvC4" class="icon"><img src="./discord.png" width="32" /></a>
@ -62,6 +69,16 @@ const links = document.querySelectorAll('.sidebar a[href]');
[].slice.call(links).forEach(link => {
link.classList.add('scroll');
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-83696871-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

3
docs/template/tmpl/method.tmpl vendored
View File

@ -114,4 +114,7 @@ var self = this;
<?js= this.partial('examples.tmpl', examples) ?>
</div>
<?js } ?>
<?js if (data.augments && data.augments.length) { ?>
<h4 class="no-dec" style="padding-left: 20px;">Extends <?js= self.partial('augments.tmpl', data) ?></h4>
<?js } ?>
</div>

12
examples/VRKit/basic/script.js
View File

@ -2,10 +2,10 @@ import * as UTILS from '../../globals';
const postprocessor = new WHS.PostProcessorModule();
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule(UTILS.appDefaults.camera),
new WHS.DefineModule('camera', new WHS.PerspectiveCamera(UTILS.appDefaults.camera)),
new WHS.RenderingModule(UTILS.appDefaults.rendering, {
shadow: true
}),
@ -37,9 +37,9 @@ const sphere = new WHS.Sphere({ // Create sphere comonent.
position: new THREE.Vector3(0, 20, 0)
});
sphere.addTo(world);
sphere.addTo(app);
UTILS.addBoxPlane(world);
UTILS.addBasicLights(world);
UTILS.addBoxPlane(app);
UTILS.addBasicLights(app);
world.start();
app.start();

2
examples/VRKit/controls/script.js
View File

@ -5,7 +5,7 @@ const postprocessor = new WHS.PostProcessorModule();
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule(UTILS.appDefaults.camera),
new WHS.DefineModule('camera', new WHS.PerspectiveCamera(UTILS.appDefaults.camera)),
new WHS.RenderingModule(UTILS.appDefaults.rendering, {
shadow: true
}),

12
examples/VRKit/post-processing/script.js
View File

@ -2,10 +2,10 @@ import * as UTILS from '../../globals';
const postprocessor = new WHS.PostProcessorModule();
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule(UTILS.appDefaults.camera),
new WHS.DefineModule('camera', new WHS.PerspectiveCamera(UTILS.appDefaults.camera)),
new WHS.RenderingModule(UTILS.appDefaults.rendering, {
shadow: true
}),
@ -75,9 +75,9 @@ const sphere = new WHS.Sphere({
position: new THREE.Vector3(0, 20, 0)
});
sphere.addTo(world);
sphere.addTo(app);
UTILS.addBoxPlane(world);
UTILS.addBasicLights(world);
UTILS.addBoxPlane(app);
UTILS.addBasicLights(app);
world.start();
app.start();

61
examples/animation/alien/script.js
View File

@ -1,8 +1,10 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(5, 5, 10),
near: true
}, {
renderer: {
shadowMap: {
type: THREE.PCFSoftShadowMap,
@ -16,26 +18,39 @@ const world = new WHS.App([
new WHS.ResizeModule()
]);
const animationModule = new WHS.AnimationModule(world, false, {
const animationModule = new WHS.AnimationModule(app, false, {
speed: 1.2
});
const fix = texture => {
texture.anisotropy = 2;
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
return texture;
};
const characterTexturePath = `${process.assetsPath}/textures/space-alien/`;
const textureModule = new WHS.TextureModule({
url: `${characterTexturePath}diffuse.png`,
type: 'map'
type: 'map',
fix
}, {
url: `${characterTexturePath}emissive.png`,
type: 'emissiveMap'
type: 'emissiveMap',
fix
}, {
url: `${characterTexturePath}normal.png`,
type: 'normalMap'
type: 'normalMap',
fix
}, {
url: `${characterTexturePath}metalness.png`,
type: 'metalnessMap'
type: 'metalnessMap',
fix
}, {
url: `${characterTexturePath}ao.png`,
type: 'aoMap'
type: 'aoMap',
fix
});
new WHS.Importer({
@ -60,16 +75,14 @@ new WHS.Importer({
position: [0, -5, 0]
}).addTo(world).then(() => {
}).addTo(app).then(() => {
animationModule.play('observe');
});
new WHS.PointLight({
light: {
color: 0xffffff,
intensity: 2,
distance: 20
},
color: 0xffffff,
intensity: 2,
distance: 20,
shadow: {
far: 30,
@ -78,7 +91,7 @@ new WHS.PointLight({
position: [-1, 3, 5]
}).addTo(world);
}).addTo(app);
const floorTextureRepeat = new THREE.Vector2(15, 15);
@ -119,15 +132,13 @@ new WHS.Box({
position: [0, -5, 0]
}).addTo(world);
}).addTo(app);
new WHS.SpotLight({
light: {
color: 0xffffff,
intensity: 1,
distance: 100,
angle: 90
},
color: 0xffffff,
intensity: 1,
distance: 100,
angle: 90,
shadow: {
cast: false
@ -138,11 +149,11 @@ new WHS.SpotLight({
y: 30,
z: 10
}
}).addTo(world);
}).addTo(app);
UTILS.addAmbient(world, 0.1);
UTILS.addAmbient(app, 0.1);
new WHS.Loop(() => {
}).start(world);
}).start(app);
world.start();
app.start();

26
examples/assets/css/layout.css
View File

@ -16,3 +16,29 @@ body {
z-index: 999;
background: rgba(255, 237, 222, 0.9);
}
.note {
position: fixed;
right: 20px;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
z-index: 3;
color: white;
top: 20px;
min-width: 400px;
max-width: 500px;
}
.note h4 {
margin: 0;
}
.note p {
line-height: 1.8;
letter-spacing: 0.3px;
color: #eee;
}
.note code {
padding: 2px 10px;
background: rgba(255, 255, 255, 0.1);
margin: 10px 5px;
display: inline-block;
border-radius: 5px;
}

30
examples/assets/less/layout.less
View File

@ -17,3 +17,33 @@ body {
z-index: 999;
background: rgba(255, 237, 222, 0.9);
}
.note {
position: fixed;
right: 20px;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
z-index: 3;
color: white;
top: 20px;
min-width: 400px;
max-width: 500px;
h4 {
margin: 0;
}
p {
line-height: 1.8;
letter-spacing: 0.3px;
color: #eee;
}
code {
padding: 2px 10px;
background: rgba(255, 255, 255, 0.1);
margin: 10px 5px;
display: inline-block;
border-radius: 5px;
}
}

12
examples/basic/cube/script.js
View File

@ -4,7 +4,7 @@ const ad = UTILS.appDefaults;
const controlsModule = new WHS.OrbitControlsModule();
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200)
}, ad.rendering, ad.physics, false),
@ -113,19 +113,19 @@ new WHS.Box({
position: [-50, 0, 0]
}).addTo(box);
box.addTo(world).then(() => {
box.addTo(app).then(() => {
const v = new THREE.Vector3(0, 0, 1);
box.setLinearFactor(new THREE.Vector3(0, 0, 0));
new WHS.Loop(() => {
box.setAngularVelocity(v);
}).start(world);
}).start(app);
});
});
ball.addTo(world);
ball.addTo(app);
UTILS.addBasicLights(world);
UTILS.addBasicLights(app);
world.start();
app.start();

10
examples/basic/cylinder/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules()
]);
@ -27,9 +27,9 @@ const sphere = new WHS.Cylinder({ // Create sphere comonent.
position: new THREE.Vector3(0, 20, 0)
});
sphere.addTo(world);
sphere.addTo(app);
UTILS.addBoxPlane(world);
UTILS.addBasicLights(world);
UTILS.addBoxPlane(app);
UTILS.addBasicLights(app);
world.start(); // Start animations and physics simulation.
app.start(); // Start animations and physics simulation.

14
examples/basic/embeded/script.js
View File

@ -3,14 +3,14 @@ import * as UTILS from '../../globals';
const resizer = new WHS.ResizeModule();
const mouse = new WHS.VirtualMouseModule();
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule({
container: document.getElementById('embed')
}),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 10, 50)
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -52,7 +52,7 @@ const sphere = new WHS.Sphere({ // Create sphere component.
position: [0, 100, 0]
});
sphere.addTo(world);
sphere.addTo(app);
mouse.track(sphere);
sphere.on('mouseover', () => {
@ -73,10 +73,10 @@ sphere.on('click', () => {
alert('click!');
});
UTILS.addPlane(world);
UTILS.addBasicLights(world);
UTILS.addPlane(app);
UTILS.addBasicLights(app);
world.start(); // Start animations and physics simulation.
app.start(); // Start animations and physics simulation.
// DOM

28
examples/basic/fogexp/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const cameraModule = new WHS.CameraModule({
const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: {
z: -30,
y: 20,
@ -8,12 +8,12 @@ const cameraModule = new WHS.CameraModule({
},
far: 20000,
near: 1
});
}));
const controlsModule = new WHS.OrbitControlsModule();
const fogModule = new WHS.FogModule({color: 0xaaaaaa, near: 10, far: 200});
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
cameraModule,
@ -57,7 +57,7 @@ new WHS.Box({
)],
position: [0, 4, 0]
}).addTo(world);
}).addTo(app);
new WHS.Box({
geometry: {
@ -85,7 +85,7 @@ new WHS.Box({
material: new THREE.MeshPhongMaterial({
})
}).addTo(world);
}).addTo(app);
new WHS.Box({
geometry: {
@ -109,7 +109,7 @@ new WHS.Box({
material: new THREE.MeshPhongMaterial({
})
}).addTo(world);
}).addTo(app);
new WHS.Box({
geometry: {
@ -133,7 +133,7 @@ new WHS.Box({
material: new THREE.MeshPhongMaterial({
})
}).addTo(world);
}).addTo(app);
// z wall
new WHS.Box({
@ -163,7 +163,7 @@ new WHS.Box({
material: new THREE.MeshPhongMaterial({
})
}).addTo(world);
}).addTo(app);
new WHS.Sphere({
geometry: {
@ -187,13 +187,11 @@ new WHS.Sphere({
material: new THREE.MeshPhongMaterial({
})
}).addTo(world);
}).addTo(app);
new WHS.AmbientLight({
light: {
color: 0xffffff,
intensity: 0.3
}
}).addTo(world);
color: 0xffffff,
intensity: 0.3
}).addTo(app);
world.start();
app.start();

12
examples/basic/helloworld/script.js
View File

@ -1,9 +1,9 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule(UTILS.appDefaults.camera),
new WHS.DefineModule('camera', new WHS.PerspectiveCamera(UTILS.appDefaults.camera)),
new WHS.RenderingModule(UTILS.appDefaults.rendering, {
shadow: true
}),
@ -34,9 +34,9 @@ const sphere = new WHS.Sphere({ // Create sphere comonent.
position: new THREE.Vector3(0, 20, 0)
});
sphere.addTo(world);
sphere.addTo(app);
UTILS.addBoxPlane(world);
UTILS.addBasicLights(world);
UTILS.addBoxPlane(app);
UTILS.addBasicLights(app);
world.start(); // Start animations and physics simulation.
app.start(); // Start animations and physics simulation.

18
examples/basic/line/script.js
View File

@ -2,7 +2,7 @@ import * as UTILS from '../../globals';
const controlsModule = new WHS.OrbitControlsModule();
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200)
}),
@ -46,7 +46,7 @@ function drawRectangle(points, color) {
})
});
line.addTo(world);
line.addTo(app);
}
// top square
@ -62,7 +62,7 @@ function drawRectangle(points, color) {
})
});
line.addTo(world);
line.addTo(app);
}
// closes the top square
@ -83,7 +83,7 @@ function drawRectangle(points, color) {
color
})
});
line2.addTo(world);
line2.addTo(app);
// closes the bottom square
const line = new WHS.Line({
@ -96,7 +96,7 @@ function drawRectangle(points, color) {
color
})
});
line.addTo(world);
line.addTo(app);
// vertical join
for (let i = 0; i < points.length - 1; i++) {
@ -111,7 +111,7 @@ function drawRectangle(points, color) {
})
});
line.addTo(world);
line.addTo(app);
}
// closes the vertical one
const line3 = new WHS.Line({
@ -124,7 +124,7 @@ function drawRectangle(points, color) {
color
})
});
line3.addTo(world);
line3.addTo(app);
}
new WHS.Box({
@ -150,6 +150,6 @@ new WHS.Box({
wireframe: true,
color: 0x444444
})
}).addTo(world);
}).addTo(app);
world.start();
app.start();

24
examples/basic/model/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 40, 250)
})
@ -58,19 +58,17 @@ const ball = new WHS.Sphere({
position: [10, 250, -1.969]
});
teapot.addTo(world).then(() => {
ball.addTo(world);
teapot.addTo(app).then(() => {
ball.addTo(app);
});
UTILS.addBoxPlane(world, 500);
UTILS.addBoxPlane(app, 500);
new WHS.SpotLight({
light: {
color: 0xffffff,
intensity: 1,
distance: 300,
angle: 180
},
color: 0xffffff,
intensity: 1,
distance: 300,
angle: 180,
shadowmap: {
fov: 90
@ -81,8 +79,8 @@ new WHS.SpotLight({
y: 150,
z: 50
}
}).addTo(world);
}).addTo(app);
UTILS.addAmbient(world, 0.3);
UTILS.addAmbient(app, 0.3);
world.start();
app.start();

14
examples/basic/mouse/script.js
View File

@ -2,12 +2,12 @@ import * as UTILS from '../../globals';
const mouse = new WHS.VirtualMouseModule();
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 10, 50)
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -46,7 +46,7 @@ const sphere = new WHS.Sphere({ // Create sphere component.
position: [0, 100, 0]
});
sphere.addTo(world);
sphere.addTo(app);
mouse.track(sphere);
sphere.on('mouseover', () => {
@ -67,7 +67,7 @@ sphere.on('click', () => {
alert('click!');
});
UTILS.addPlane(world);
UTILS.addBasicLights(world);
UTILS.addPlane(app);
UTILS.addBasicLights(app);
world.start(); // Start animations and physics simulation.
app.start(); // Start animations and physics simulation.

23
examples/basic/state/index.pug Normal file
View File

@ -0,0 +1,23 @@
extends ../../layout.pug
block body
div(class="note")
h4 Guide to StateModule
p
| 1) Go to the `console` in devtools.
br
| 2) Type:
br
code state.to('green');
br
| The example `plane` and `sphere` should change their color to green by loading to configuration called `green`.
br
| 3) Type:
br
code state.to('default');
br
| Now you switched back to `default` configuration.
br
| 4) You can also change only specific parameter of state using .set() :
br
code state.set({sphereColor: 0x00ff00});

64
examples/basic/state/script.js Normal file
View File

@ -0,0 +1,64 @@
import * as UTILS from '../../globals';
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.DefineModule('camera', new WHS.PerspectiveCamera(UTILS.appDefaults.camera)),
new WHS.RenderingModule(UTILS.appDefaults.rendering, {
shadow: true
}),
new PHYSICS.WorldModule(UTILS.appDefaults.physics),
new WHS.OrbitControlsModule(),
new WHS.ResizeModule(),
new StatsModule(),
new WHS.StateModule().default({
sphereColor: UTILS.$colors.mesh,
planeColor: 0x447F8B
})
]);
const state = app.use('state');
window.state = state;
const sphere = new WHS.Sphere({ // Create sphere comonent.
geometry: {
radius: 5,
widthSegments: 32,
heightSegments: 32
},
modules: [
new PHYSICS.SphereModule({
mass: 10,
restitution: 1
})
],
material: new THREE.MeshPhongMaterial({
color: state.get('sphereColor')
}),
position: new THREE.Vector3(0, 20, 0)
});
sphere.addTo(app);
UTILS.addBoxPlane(app, 100, state.get('planeColor')).then(plane =>
state.update({planeColor: color => plane.material.color.setHex(color)})
);
UTILS.addBasicLights(app);
app.start(); // Start animations and physics simulation.
// STATE
state.update({
sphereColor: color => sphere.material.color.setHex(color)
});
state.config({
green: {
sphereColor: 0x00ff00,
planeColor: 0x00ff00
}
});

10
examples/basic/terrain/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 30, -100)
})
@ -34,7 +34,7 @@ const terrain = new WHS.Parametric({
]
});
terrain.addTo(world);
terrain.addTo(app);
const sphere = new WHS.Sphere({
geometry: {
@ -57,9 +57,9 @@ const sphere = new WHS.Sphere({
position: new THREE.Vector3(-31, 20, 0) // -30, 120, -40
});
sphere.addTo(world);
sphere.addTo(app);
UTILS.addBasicLights(world, 0.5, [0, 10, 10], 100, {
UTILS.addBasicLights(app, 0.5, [0, 10, 10], 100, {
bias: 0.0001,
radius: 2,
@ -68,4 +68,4 @@ UTILS.addBasicLights(world, 0.5, [0, 10, 10], 100, {
}
});
world.start(); // Start animations and physics simulation.
app.start(); // Start animations and physics simulation.

22
examples/basic/threejs/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(true)
]);
@ -32,12 +32,12 @@ mesh3.position.set(0, 0, 1);
// Nested object.
mesh2.add(mesh3);
world.setScene(scene);
app.setScene(scene);
world
.module(new WHS.CameraModule({
app
.module(new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 2, 12)
}))
})))
.module(new WHS.RenderingModule({
bgColor: 0x162129,
@ -53,7 +53,7 @@ const sphere = new WHS.Sphere({
material: materialWHS
});
sphere.addTo(world);
sphere.addTo(app);
sphere.position.y = 2;
const mesh1 = WHS.MeshComponent.create(
@ -63,13 +63,13 @@ const mesh1 = WHS.MeshComponent.create(
mesh1.position.set(2, 2, 0);
world.add(mesh1);
app.add(mesh1);
const light = new WHS.PointLight();
light.addTo(world);
light.addTo(app);
UTILS.addPlane(world);
UTILS.addBasicLights(world);
UTILS.addPlane(app);
UTILS.addBasicLights(app);
world.start();
app.start();

16
examples/constraints/dof/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 40, 70)
})
@ -72,19 +72,19 @@ const pointer = new WHS.Sphere({
console.log(pointer);
pointer.position.set(0, 60, -8);
pointer.addTo(world);
pointer.addTo(app);
box.addTo(world);
box2.addTo(world).then(() => {
box.addTo(app);
box2.addTo(app).then(() => {
const constraint = new PHYSICS.DOFConstraint(box2, box,
new THREE.Vector3(0, 38, 1)
);
world.addConstraint(constraint);
app.addConstraint(constraint);
constraint.enableAngularMotor(10, 20);
});
UTILS.addPlane(world, 250);
UTILS.addBasicLights(world);
UTILS.addPlane(app, 250);
UTILS.addBasicLights(app);
world.start();
app.start();

16
examples/constraints/hinge/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 40, 70)
})
@ -72,20 +72,20 @@ const pointer = new WHS.Sphere({
console.log(pointer);
pointer.position.set(0, 60, -8);
pointer.addTo(world);
pointer.addTo(app);
box.addTo(world);
box2.addTo(world).then(() => {
box.addTo(app);
box2.addTo(app).then(() => {
const constraint = new PHYSICS.HingeConstraint(box2, box,
new THREE.Vector3(0, 38, 1),
new THREE.Vector3(1, 0, 0)
);
world.addConstraint(constraint);
app.addConstraint(constraint);
constraint.enableAngularMotor(10, 20);
});
UTILS.addPlane(world, 250);
UTILS.addBasicLights(world);
UTILS.addPlane(app, 250);
UTILS.addBasicLights(app);
world.start();
app.start();

16
examples/constraints/point/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 40, 70)
})
@ -72,18 +72,18 @@ const pointer = new WHS.Sphere({
console.log(pointer);
pointer.position.set(0.5, 60, -8);
pointer.addTo(world);
pointer.addTo(app);
box.addTo(world);
box2.addTo(world).then(() => {
box.addTo(app);
box2.addTo(app).then(() => {
const constraint = new PHYSICS.PointConstraint(box2, box,
new THREE.Vector3(0, box2.position.y, 1)
);
world.addConstraint(constraint);
app.addConstraint(constraint);
});
UTILS.addPlane(world, 250);
UTILS.addBasicLights(world);
UTILS.addPlane(app, 250);
UTILS.addBasicLights(app);
world.start();
app.start();

14
examples/constraints/slider/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 40, 70)
})
@ -60,17 +60,17 @@ const box2 = new WHS.Box({
}
});
box.addTo(world);
box2.addTo(world).then(() => {
box.addTo(app);
box2.addTo(app).then(() => {
const constraint = new PHYSICS.SliderConstraint(box2, box,
new THREE.Vector3(0, box2.position.y, 0),
new THREE.Vector3(0, 1, 0)
);
world.addConstraint(constraint);
app.addConstraint(constraint);
});
UTILS.addPlane(world, 250);
UTILS.addBasicLights(world);
UTILS.addPlane(app, 250);
UTILS.addBasicLights(app);
world.start();
app.start();

62
examples/design/easter/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new PHYSICS.WorldModule({
@ -11,11 +11,11 @@ const world = new WHS.App([
z: 0
},
}),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(-8, 5, 20),
fov: 45,
far: 2000
}),
})),
new WHS.RenderingModule({
bgColor: 0xffffff,
@ -29,10 +29,12 @@ const world = new WHS.App([
new WHS.ResizeModule()
]);
// world.$camera.lookAt(new THREE.Vector3(0, 0, 0));
const camera = app.manager.get('camera');
// camera.lookAt(new THREE.Vector3(0, 0, 0));
// Start rendering.
world.start();
app.start();
new WHS.Box({
geometry: {
@ -55,7 +57,7 @@ new WHS.Box({
y: -1,
z: 0
}
}).addTo(world);
}).addTo(app);
const egg = new WHS.Importer({
url: `${process.assetsPath}/models/easter/egg_light.json`,
@ -109,15 +111,13 @@ const rabbit = new WHS.Importer({
scale: [0.5, 0.5, 0.5]
});
rabbit.addTo(world);
rabbit.addTo(app);
new WHS.SpotLight({
light: {
color: 0xffffff,
decay: 1,
distance: 150,
intensity: 1
},
color: 0xffffff,
decay: 1,
distance: 150,
intensity: 1,
shadowmap: {
left: -20,
@ -147,22 +147,20 @@ new WHS.SpotLight({
y: 0,
z: 0
}
}).addTo(world);
}).addTo(app);
new WHS.AmbientLight({
light: {
intensity: 0.9,
color: 0xffffff
}
}).addTo(world);
intensity: 0.9,
color: 0xffffff
}).addTo(app);
let egg2, egg3, egg4, egg5, egg6, egg7, egg8, egg9;
egg.addTo(world).then((object) => {
egg.addTo(app).then((object) => {
egg2 = object.clone(false, true);
egg2.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg2.jpg`);
egg2.addTo(world).then((obj) => {
egg2.addTo(app).then((obj) => {
obj.rotation.y = -Math.PI / 8;
obj.position.setX(-8.5);
obj.position.setZ(1.5);
@ -171,7 +169,7 @@ egg.addTo(world).then((object) => {
egg3 = object.clone(false, true);
egg3.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg3.jpg`);
egg3.addTo(world).then((obj) => {
egg3.addTo(app).then((obj) => {
obj.rotation.y = -Math.PI / 8;
obj.position.setX(-8.5);
obj.position.setZ(1.5);
@ -180,7 +178,7 @@ egg.addTo(world).then((object) => {
egg4 = object.clone(false, true);
egg4.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg4.jpg`);
egg4.addTo(world).then((obj) => {
egg4.addTo(app).then((obj) => {
obj.rotation.y = -Math.PI / 8;
obj.position.setX(0);
obj.position.setZ(-1.5);
@ -189,7 +187,7 @@ egg.addTo(world).then((object) => {
egg5 = object.clone(false, true);
egg5.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg1.jpg`);
egg5.addTo(world).then((obj) => {
egg5.addTo(app).then((obj) => {
obj.rotation.y = -Math.PI / 8;
obj.position.setX(2);
obj.position.setZ(2.5);
@ -198,7 +196,7 @@ egg.addTo(world).then((object) => {
egg6 = object.clone(false, true);
egg6.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg2.jpg`);
egg6.addTo(world).then((obj) => {
egg6.addTo(app).then((obj) => {
obj.rotation.y = -Math.PI / 8;
obj.position.setX(0.5);
obj.position.setZ(1.5);
@ -207,7 +205,7 @@ egg.addTo(world).then((object) => {
egg7 = object.clone(false, true);
egg7.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg3.jpg`);
egg7.addTo(world).then((obj) => {
egg7.addTo(app).then((obj) => {
obj.rotation.y = -Math.PI / 8;
obj.position.setX(2);
obj.position.setZ(-1.5);
@ -216,7 +214,7 @@ egg.addTo(world).then((object) => {
egg8 = object.clone(false, true);
egg8.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg4.jpg`);
egg8.addTo(world).then((obj) => {
egg8.addTo(app).then((obj) => {
obj.rotation.y = -Math.PI / 8;
obj.position.setX(1);
obj.position.setZ(2.5);
@ -225,19 +223,19 @@ egg.addTo(world).then((object) => {
egg9 = object.clone(false, true);
egg9.material.map = WHS.TextureModule.load(`${process.assetsPath}/textures/easter/egg1.jpg`);
egg9.addTo(world).then((obj) => {
egg9.addTo(app).then((obj) => {
obj.rotation.y = -Math.PI / 8;
obj.position.setX(3);
obj.position.setZ(-1.5);
});
});
world.$camera.native.lookAt(new THREE.Vector3(-4, 0, 0));
camera.native.lookAt(new THREE.Vector3(-4, 0, 0));
document.body.addEventListener('mousemove', (e) => {
world.$camera.position.x = -8 + (e.screenX - window.innerWidth / 2) / 40;
world.$camera.position.y = 5 + (e.screenY - window.innerHeight / 2) / 80;
world.$camera.native.lookAt(new THREE.Vector3(-4, 0, 0));
camera.position.x = -8 + (e.screenX - window.innerWidth / 2) / 40;
camera.position.y = 5 + (e.screenY - window.innerHeight / 2) / 80;
camera.native.lookAt(new THREE.Vector3(-4, 0, 0));
});
document.body.addEventListener('click', () => {

10
examples/design/points/script.js
View File

@ -1,12 +1,12 @@
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(-8, 5, 20),
far: 2000,
near: 1,
fov: 45
}),
})),
new WHS.RenderingModule({
bgColor: 0xffffff,
@ -50,7 +50,7 @@ class Points extends WHS.MeshComponent {
}
}
new Points({geom}).addTo(world);
new Points({geom}).addTo(app);
// Start rendering.
world.start();
app.start();

83
examples/design/saturn/script.js
View File

@ -12,14 +12,15 @@ const colors = {
yellow: 0xfaff70
};
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 100, 400),
far: 2000,
fov: 75,
near: 1
}),
})),
new WHS.RenderingModule({
bgColor: 0x2a3340,
@ -29,13 +30,13 @@ const world = new WHS.App([
type: THREE.PCFSoftShadowMap
}
}
}),
}, {shadow: true}),
new WHS.OrbitControlsModule(),
new WHS.ResizeModule()
]);
const space = new WHS.Group();
space.addTo(world);
space.addTo(app);
space.rotation.z = Math.PI / 12;
const planet = new WHS.Tetrahedron({
@ -56,28 +57,28 @@ planet.addTo(space);
// LIGHTS.
new WHS.AmbientLight({
light: {
color: 0x663344,
intensity: 2
}
}).addTo(world);
color: 0x663344,
intensity: 2
}).addTo(app);
new WHS.DirectionalLight({
light: {
color: 0xffffff,
intensity: 1.5,
distance: 800
},
color: 0xffffff,
intensity: 1.5,
distance: 800,
shadowmap: {
width: 2048,
height: 2048,
shadow: {
mapSize: {
width: 2048,
height: 2048
},
left: -800,
right: 800,
top: 800,
bottom: -800,
far: 800
camera: {
left: -800,
right: 800,
top: 800,
bottom: -800,
far: 800
}
},
position: {
@ -85,10 +86,16 @@ new WHS.DirectionalLight({
z: 300,
y: 100
}
}).addTo(world);
}).addTo(app);
const dynamicGeometry = new WHS.DynamicGeometryModule();
const material = new THREE.MeshStandardMaterial({
shading: THREE.FlatShading,
emissive: 0x270000,
roughness: 0.9
});
const s1 = new WHS.Dodecahedron({
geometry: {
buffer: true,
@ -99,11 +106,7 @@ const s1 = new WHS.Dodecahedron({
dynamicGeometry
],
material: new THREE.MeshStandardMaterial({
shading: THREE.FlatShading,
emissive: 0x270000,
roughness: 0.9
})
material
});
const s2 = new WHS.Box({
@ -118,11 +121,7 @@ const s2 = new WHS.Box({
dynamicGeometry
],
material: new THREE.MeshStandardMaterial({
shading: THREE.FlatShading,
roughness: 0.9,
emissive: 0x270000
})
material
});
const s3 = new WHS.Cylinder({
@ -137,11 +136,7 @@ const s3 = new WHS.Cylinder({
dynamicGeometry
],
material: new THREE.MeshStandardMaterial({
shading: THREE.FlatShading,
roughness: 0.9,
emissive: 0x270000
})
material
});
const s4 = new WHS.Sphere({
@ -154,11 +149,7 @@ const s4 = new WHS.Sphere({
dynamicGeometry
],
material: new THREE.MeshStandardMaterial({
shading: THREE.FlatShading,
roughness: 0.9,
emissive: 0x270000
})
material
});
const asteroids = new WHS.Group();
@ -223,9 +214,9 @@ const animation = new WHS.Loop(() => {
planet.rotation.y += 0.005;
});
world.addLoop(animation);
app.addLoop(animation);
animation.start();
// Start rendering.
world.start();
app.start();

16
examples/fps/shooter/script.js
View File

@ -21,12 +21,12 @@ const sphere = new WHS.Sphere({ // Create sphere comonent.
position: new THREE.Vector3(0, 100, 0)
});
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 10, 50)
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -47,7 +47,7 @@ const world = new WHS.App([
new WHS.ResizeModule()
]);
sphere.addTo(world);
sphere.addTo(app);
for (let i = 0; i < 10; i++) {
const height = 10 + Math.random() * 90;
@ -73,10 +73,10 @@ for (let i = 0; i < 10; i++) {
y: height / 2,
z: Math.random() * 1000 - 500
}
}).addTo(world);
}).addTo(app);
}
UTILS.addPlane(world, 1000);
UTILS.addBasicLights(world);
UTILS.addPlane(app, 1000);
UTILS.addBasicLights(app);
world.start();
app.start();

50
examples/globals.js
View File

@ -62,14 +62,16 @@ export const appModules = ( // appModules(camera, rendering);
physics = appDefaults.physics,
useControls = true
) => (
new WHS.BasicAppPreset({camera, rendering})
.extend([
new PHYSICS.WorldModule(physics),
useControls ? new WHS.OrbitControlsModule() : null,
new StatsModule()
])
.autoresize()
.get()
[
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.DefineModule('camera', new WHS.PerspectiveCamera(Object.assign(camera, {fov: 75}))),
new WHS.RenderingModule(rendering, {shadow: true}),
new PHYSICS.WorldModule(physics),
useControls ? new WHS.OrbitControlsModule() : null,
new StatsModule(),
new WHS.ResizeModule()
]
);
export const $colors = {
@ -79,34 +81,28 @@ export const $colors = {
softbody: 0x434B7F
};
export function addAmbient(world, intensity) {
export function addAmbient(app, intensity) {
new WHS.AmbientLight({
light: {
intensity
}
}).addTo(world);
intensity
}).addTo(app);
}
export function addBasicLights(world, intensity = 0.5, position = [0, 10, 10], distance = 100, shadowmap) {
addAmbient(world, 1 - intensity);
console.log(shadowmap);
export function addBasicLights(app, intensity = 0.5, position = [0, 10, 10], distance = 100, shadowmap) {
addAmbient(app, 1 - intensity);
return new WHS.PointLight({
light: {
intensity,
distance
},
intensity,
distance,
shadow: Object.assign({
fov: 90
}, shadowmap),
position
}).addTo(world);
}).addTo(app);
}
export function addPlane(world, size = 100) {
export function addPlane(app, size = 100) {
return new WHS.Plane({
geometry: {
width: size,
@ -124,10 +120,10 @@ export function addPlane(world, size = 100) {
rotation: {
x: -Math.PI / 2
}
}).addTo(world);
}).addTo(app);
}
export function addBoxPlane(world, size = 100) {
export function addBoxPlane(app, size = 100, color = 0x447F8B) {
return new WHS.Box({
geometry: {
width: size,
@ -141,8 +137,8 @@ export function addBoxPlane(world, size = 100) {
})
],
material: new THREE.MeshPhongMaterial({color: 0x447F8B})
}).addTo(world);
material: new THREE.MeshPhongMaterial({color})
}).addTo(app);
}
function hexToRgb(hex) {

6
examples/index.pug
View File

@ -17,7 +17,7 @@ html
= " "
span /
= " "
a(href='https://whsjs.readme.io/docs' target='_blank') Docs
a(href='https://whsjs.io/' target='_blank') Docs
= " "
span /
= " "
@ -68,4 +68,8 @@ html
document.getElementById('cat_').innerText = la[1];
document.getElementById('ex_').innerText = la[2];
setTimeout(function () {
window.state = iframe.contentWindow['state'];
}, 1000);
script(src='/examples/assets/js/script.js')

4
examples/layout.pug
View File

@ -9,8 +9,8 @@ html
block body
block dependencies
script(src='/examples/assets/vendor/three.min.js')
script(src='../../../build/whitestorm.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js')
script(src='../../../build/whs.js')
block additional
script(src='../../../modules/whs-module-statsjs/build/StatsModule.js')
script(src=physicsModule)

20
examples/lights/ambient/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const cameraModule = new WHS.CameraModule({
const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: {
z: -30,
y: 20,
@ -8,11 +8,11 @@ const cameraModule = new WHS.CameraModule({
},
far: 20000,
near: 1
});
}));
const controlsModule = new WHS.OrbitControlsModule();
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200),
renderer: {
@ -53,7 +53,7 @@ new WHS.Box({
)
],
position: [0, 4, 0]
}).addTo(world);
}).addTo(app);
new WHS.Box({
geometry: {
@ -71,13 +71,11 @@ new WHS.Box({
material: new THREE.MeshPhongMaterial({
side: THREE.DoubleSide
})
}).addTo(world);
}).addTo(app);
new WHS.AmbientLight({
light: {
color: 0xffffff,
intensity: 0.4
}
}).addTo(world);
color: 0xffffff,
intensity: 0.4
}).addTo(app);
world.start();
app.start();

83
examples/lights/area/script.js
View File

@ -2,26 +2,23 @@ import * as UTILS from '../../globals';
const ad = UTILS.appDefaults;
const controlsModule = new WHS.OrbitControlsModule();
const cameraModule = new WHS.CameraModule({
const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: {
z: 500,
y: 400
},
far: 30000,
near: 10
});
}));
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200)
}, ad.rendering, ad.physics, false),
controlsModule,
}),
cameraModule,
new WHS.ResizeModule()
]);
controlsModule.controls.autoRotate = true;
// controlsModule.controls.autoRotate = true;
new WHS.Box({
geometry: {
@ -30,13 +27,15 @@ new WHS.Box({
depth: 100
},
material: new THREE.MeshPhongMaterial({
color: 0x4286f4
material: new THREE.MeshStandardMaterial({
color: 0x4286f4,
metalness: 0.0,
roughness: 0.044676705160855
}),
position: [0, 0, 0],
rotation: [0, 0, 25]
}).addTo(world);
}).addTo(app);
const plane = new WHS.Box({
geometry: {
@ -44,42 +43,26 @@ const plane = new WHS.Box({
height: 0.1,
depth: 2000
},
material: new THREE.MeshPhongMaterial({
color: 0xffffff
material: new THREE.MeshStandardMaterial({
color: 0x808080,
metalness: 0.0,
roughness: 0.044676705160855
}),
position: [0, -60, 0],
rotation: [0, 0, 25]
});
plane.addTo(world);
plane.addTo(app);
const lightDimension = {width: 50, height: 200};
const lightDimension = {width: 350, height: 200};
const lightPosition = {x: 0, y: 100, z: -200};
const lightRotation = {x: 0.3, y: 0, z: -0.1};
const planeLight = new WHS.Box({
geometry: {
width: lightDimension.width,
height: lightDimension.height,
depth: 0.2
},
material: new THREE.MeshBasicMaterial({
color: 0xffffff
}),
position: [lightPosition.x, lightPosition.y, lightPosition.z],
rotation: [lightRotation.x, lightRotation.y, lightRotation.z]
});
planeLight.addTo(world);
const intensityFactor = 2000;
const intensityFactor = 1000;
const areaLight = new WHS.AreaLight({
light: {
color: 0xffffff,
intensity: lightDimension.width * intensityFactor,
width: lightDimension.width,
height: lightDimension.height
},
color: 0xffffff,
intensity: lightDimension.width * intensityFactor,
width: lightDimension.width,
height: lightDimension.height,
position: {
x: lightPosition.x,
@ -92,7 +75,25 @@ const areaLight = new WHS.AreaLight({
y: lightRotation.y,
z: lightRotation.z
}
});
areaLight.addTo(world);
world.start();
// position: [0, 10, 0],
// rotation: [-Math.PI/2, 0, 0]
});
const scene = app.get('scene');
const renderer = app.get('renderer');
renderer.gammaInput = true;
renderer.gammaOutput = true;
// new WHS.PointLight({
// intensity: 0.0
// }).addTo(app);
areaLight.addTo(app).then(({native}) => {
const helper = new THREE.RectAreaLightHelper(native);
scene.add(helper);
});
app.start();

18
examples/lights/directional/script.js
View File

@ -1,19 +1,19 @@
import * as UTILS from '../../globals';
const cameraModule = new WHS.CameraModule({
const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: {
z: 50,
y: 60
},
far: 20000,
near: 1
});
}));
const controlsModule = new WHS.OrbitControlsModule();
console.log(THREE.PCFSoftShadowMap);
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200),
renderer: {
@ -43,7 +43,7 @@ new WHS.Importer({
position: [0, -10, 0],
rotation: new THREE.Euler(0, Math.PI / 2 * 3, 0)
}).addTo(world).then(o => {
}).addTo(app).then(o => {
console.log(o);
});
@ -52,13 +52,11 @@ const radius = 55;
new WHS.Sphere({
material: new THREE.MeshBasicMaterial({color: 0xffffff}),
position: [20, 20, 0]
}).addTo(world).then(mesh => {
}).addTo(app).then(mesh => {
let angle = 0;
new WHS.DirectionalLight({
light: {
intensity: 1
},
intensity: 1,
shadow: {
mapSize: {
@ -79,7 +77,7 @@ new WHS.Sphere({
mesh.position.set(x, 35, z);
angle += 0.01;
}).start(world);
}).start(app);
});
world.start();
app.start();

31
examples/lights/hemisphere/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const cameraModule = new WHS.CameraModule({
const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: {
z: -30,
y: 20,
@ -8,11 +8,11 @@ const cameraModule = new WHS.CameraModule({
},
far: 5000,
near: 1
});
}));
const controlsModule = new WHS.OrbitControlsModule();
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200),
renderer: {
@ -52,7 +52,7 @@ new WHS.Sphere({
receive: false
}
}).addTo(world);
}).addTo(app);
new WHS.Box({
geometry: {
@ -77,12 +77,10 @@ new WHS.Box({
)],
material: new THREE.MeshPhongMaterial({
})
}).addTo(world);
}).addTo(app);
new WHS.DirectionalLight({
light: {
intensity: 0.4
},
intensity: 0.4,
shadow: {
mapSize: {
@ -96,17 +94,14 @@ new WHS.DirectionalLight({
},
position: [-105, 70, -10]
}).addTo(world);
}).addTo(app);
// The hemisphere light
const hemisphereLight = new WHS.HemisphereLight({
light: {
skyColor: 0xFCD440,
intensity: 0.4
}
skyColor: 0xFCD440,
intensity: 0.4
});
hemisphereLight.addTo(world);
hemisphereLight.addTo(app);
const pilar1 = {x: 0, y: -3.5, z: 0};
const pilar2 = {x: 0, y: -3.5, z: 20};
@ -156,7 +151,7 @@ function addPillar(position) {
},
scale: [2, 3, 2]
}).addTo(world);
}).addTo(app);
}
const topPlaneSize = 30;
@ -209,7 +204,7 @@ function addTopPlane(geometry, y) {
emissive: 0xffffff,
emissiveIntensity: 0.2
})
}).addTo(world);
}).addTo(app);
}
world.start();
app.start();

54
examples/lights/point/script.js
View File

@ -5,18 +5,18 @@ const blue = 0x6666ff;
const white = 0xffffff;
const lightIntensity = 1;
const cameraModule = new WHS.CameraModule({
const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: {
z: 30,
y: 40
},
far: 20000,
near: 1
});
}));
const controlsModule = new WHS.OrbitControlsModule();
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200),
renderer: {
@ -60,7 +60,7 @@ new WHS.Box({
)
],
position: [0, 5, 0]
}).addTo(world);
}).addTo(app);
new WHS.Box({
geometry: {
@ -80,21 +80,18 @@ new WHS.Box({
material: new THREE.MeshPhongMaterial({
side: THREE.DoubleSide
})
}).addTo(world);
}).addTo(app);
new WHS.AmbientLight({
light: {
color: 0xffffff,
intensity: 0.05
}
}).addTo(world);
color: 0xffffff,
intensity: 0.05
}).addTo(app);
const redSpotLight = new WHS.PointLight({
light: {
color: red,
intensity: lightIntensity,
distance: 40
},
color: red,
intensity: lightIntensity,
distance: 40,
shadow: {
cast: false
},
@ -103,7 +100,7 @@ const redSpotLight = new WHS.PointLight({
color: red
})
});
redSpotLight.addTo(world);
redSpotLight.addTo(app);
new WHS.Sphere({
geometry: [1, 32, 32],
@ -114,13 +111,11 @@ new WHS.Sphere({
}).addTo(redSpotLight);
const whiteSpotLight = new WHS.PointLight({
light: {
color: white,
intensity: lightIntensity,
distance: 90
}
color: white,
intensity: lightIntensity,
distance: 90
});
whiteSpotLight.addTo(world);
whiteSpotLight.addTo(app);
new WHS.Sphere({
geometry: [1, 32, 32],
@ -131,16 +126,15 @@ new WHS.Sphere({
}).addTo(whiteSpotLight);
const blueSpotLight = new WHS.PointLight({
light: {
color: blue,
intensity: lightIntensity,
distance: 50
},
color: blue,
intensity: lightIntensity,
distance: 50,
shadow: {
cast: false
}
});
blueSpotLight.addTo(world);
blueSpotLight.addTo(app);
new WHS.Sphere({
geometry: [1, 32, 32],
@ -165,6 +159,6 @@ new WHS.Loop(() => {
whiteSpotLight.position.x = distance * Math.sin(t);
whiteSpotLight.position.y = Math.abs(distance * Math.cos(t));
whiteSpotLight.position.z = distance * Math.cos(t);
}).start(world);
}).start(app);
world.start();
app.start();

33
examples/lights/spot/script.js
View File

@ -4,7 +4,7 @@ const white = 0xffffff;
const lightIntensity = 1;
const lightDistance = 80;
const cameraModule = new WHS.CameraModule({
const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: {
z: -30,
y: 20,
@ -12,11 +12,11 @@ const cameraModule = new WHS.CameraModule({
},
far: 20000,
near: 1
});
}));
const controlsModule = new WHS.OrbitControlsModule();
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200),
renderer: {
@ -57,7 +57,7 @@ new WHS.Box({
)
],
position: [0, 4, 0]
}).addTo(world);
}).addTo(app);
new WHS.Box({
geometry: {
@ -75,22 +75,19 @@ new WHS.Box({
material: new THREE.MeshPhongMaterial({
side: THREE.DoubleSide
})
}).addTo(world);
}).addTo(app);
new WHS.AmbientLight({
light: {
color: 0xffffff,
intensity: 0.05
}
}).addTo(world);
color: 0xffffff,
intensity: 0.05
}).addTo(app);
const spotLight = new WHS.SpotLight({
light: {
color: white,
intensity: lightIntensity,
distance: lightDistance,
angle: Math.PI / 4
},
color: white,
intensity: lightIntensity,
distance: lightDistance,
angle: Math.PI / 4,
position: {
x: 0,
y: 20,
@ -100,7 +97,7 @@ const spotLight = new WHS.SpotLight({
color: white
})
});
spotLight.addTo(world);
spotLight.addTo(app);
const cylinder = new WHS.Cylinder({
geometry: {
@ -123,4 +120,4 @@ const cylinder = new WHS.Cylinder({
cylinder.addTo(spotLight);
cylinder.rotation = new THREE.Euler(-Math.PI / 4, 0, 0);
world.start();
app.start();

28
examples/performance/softbodies/script.js
View File

@ -1,12 +1,12 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 6, 18),
far: 10000
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -61,33 +61,29 @@ const sphere = new WHS.Icosahedron({ // Softbody.
sphere.native.frustumCulled = false;
UTILS.addBoxPlane(world, 250).then(() => sphere.addTo(world)).then(() => {
UTILS.addBoxPlane(app, 250).then(() => sphere.addTo(app)).then(() => {
for (let i = 0; i < 30; i++) {
const newSphere = sphere.clone(true, false);
newSphere.position.y = 5 + 4 * (i + 1);
newSphere.native.frustumCulled = false;
newSphere.addTo(world);
newSphere.addTo(app);
}
});
new WHS.DirectionalLight({
light: {
color: 0xffffff, // 0x00ff00,
intensity: 1
},
color: 0xffffff, // 0x00ff00,
intensity: 1,
position: {
x: 0,
y: 10,
z: 30
}
}).addTo(world);
}).addTo(app);
new WHS.AmbientLight({
light: {
color: 0xffffff,
intensity: 0.5
}
}).addTo(world);
color: 0xffffff,
intensity: 0.5
}).addTo(app);
world.start();
app.start();

14
examples/performance/sticks/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 50)
}, UTILS.appDefaults.rendering, {
@ -72,8 +72,8 @@ for (let k = 0; k < rows; k++) {
objects += 2;
newStick.addTo(world);
newStick2.addTo(world);
newStick.addTo(app);
newStick2.addTo(app);
}
}
}
@ -106,7 +106,7 @@ const sphere = new WHS.Sphere({
}
});
sphere.addTo(world).then((sphere) => {
sphere.addTo(app).then((sphere) => {
const mx = 96,
mz = 32;
@ -114,10 +114,10 @@ sphere.addTo(world).then((sphere) => {
sphere.setLinearVelocity({x: mx, y: 0, z: mz});
});
UTILS.addBoxPlane(world, 250).then(o => {
UTILS.addBoxPlane(app, 250).then(o => {
o.position.y = -1;
});
UTILS.addBasicLights(world, 0.5, [100, 100, 100], 200);
UTILS.addBasicLights(app, 0.5, [100, 100, 100], 200);
world.start();
app.start();

10
examples/physics/compound/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules()
]);
@ -41,9 +41,9 @@ const box = new WHS.Box({ // Create sphere comonent.
});
box.addTo(sphere);
sphere.addTo(world);
sphere.addTo(app);
UTILS.addPlane(world);
UTILS.addBasicLights(world);
UTILS.addPlane(app);
UTILS.addBasicLights(app);
world.start(); // Start animations and physics simulation.]
app.start(); // Start animations and physics simulation.]

18
examples/physics/domino/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(62, 30, 130)
})
@ -21,7 +21,7 @@ new WHS.Sphere({
}),
position: [0, 100, 0]
}).addTo(world);
}).addTo(app);
const tramplin = new WHS.Box({
geometry: {
@ -54,16 +54,16 @@ const tramplin = new WHS.Box({
tramplin.rotation = new THREE.Euler(0, 0, -Math.PI / 6);
tramplin.addTo(world);
tramplin.addTo(app);
const tramplin2 = tramplin.clone();
tramplin2.position.y = 44;
tramplin2.addTo(world);
tramplin2.addTo(app);
const tramplin3 = tramplin.clone();
tramplin3.position.set(24, 24, 0);
tramplin3.rotation.z = Math.PI / 6;
tramplin3.addTo(world);
tramplin3.addTo(app);
const domino = new WHS.Box({
geometry: {
@ -95,12 +95,12 @@ let d = domino.clone();
for (let i = 0; i < 13; i++) {
d = d.clone();
d.position.x += 8;
d.addTo(world);
d.addTo(app);
}
UTILS.addBoxPlane(world, 250).then(o => {
UTILS.addBoxPlane(app, 250).then(o => {
o.position.y = -0.5
});
UTILS.addBasicLights(world);
world.start();
UTILS.addBasicLights(app);
app.start();

16
examples/physics/filtering/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules()
]);
@ -26,7 +26,7 @@ const sphere = new WHS.Sphere({ // Create sphere comonent.
position: [-20, 100, 0]
});
sphere.addTo(world);
sphere.addTo(app);
const sphere2 = new WHS.Sphere({ // Create sphere comonent.
geometry: {
@ -50,9 +50,9 @@ const sphere2 = new WHS.Sphere({ // Create sphere comonent.
position: [20, 100, 0]
});
sphere2.addTo(world);
sphere2.addTo(app);
UTILS.addPlane(world).then(o => {
UTILS.addPlane(app).then(o => {
const boxModule = new PHYSICS.BoxModule({
mass: 0
});
@ -67,14 +67,14 @@ UTILS.addPlane(world).then(o => {
...planeParams,
rotation: [0, 0, -Math.PI / 4],
position: [-20, 3, 0]
}).addTo(world);
}).addTo(app);
new WHS.Box({
...planeParams,
rotation: [0, 0, Math.PI / 4],
position: [20, 3, 0]
}).addTo(world);
}).addTo(app);
});
UTILS.addBasicLights(world);
UTILS.addBasicLights(app);
world.start(); // Start animations and physics simulation.
app.start(); // Start animations and physics simulation.

52
examples/post-processing/basic-glitch/script.js
View File

@ -2,33 +2,29 @@ import * as UTILS from '../../globals';
const postprocessor = new WHS.PostProcessorModule();
window.world = new WHS.App(
new WHS.BasicAppPreset({
camera: {
position: new THREE.Vector3(0, 10, 50)
},
window.app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 10, 50)
})),
new WHS.RenderingModule({
bgColor: 0x162129,
rendering: {
bgColor: 0x162129,
renderer: {
antialias: true,
shadowmap: {
type: THREE.PCFSoftShadowMap
}
renderer: {
antialias: true,
shadowmap: {
type: THREE.PCFSoftShadowMap
}
}
})
.extend([
new PHYSICS.WorldModule({
ammo: process.ammoPath
}),
postprocessor,
new WHS.OrbitControlsModule()
])
.autoresize()
.get()
);
}),
new PHYSICS.WorldModule({
ammo: process.ammoPath
}),
postprocessor,
new WHS.OrbitControlsModule(),
new WHS.ResizeModule()
]);
const sphere = new WHS.Sphere({ // Create sphere comonent.
geometry: {
@ -51,12 +47,12 @@ const sphere = new WHS.Sphere({ // Create sphere comonent.
position: new THREE.Vector3(0, 20, 0)
});
sphere.addTo(world);
sphere.addTo(app);
UTILS.addBoxPlane(world);
UTILS.addBasicLights(world);
UTILS.addBoxPlane(app);
UTILS.addBasicLights(app);
world.start(); // Start animations and physics simulation.
app.start(); // Start animations and physics simulation.
const glitchPass = new POSTPROCESSING.GlitchPass();

16
examples/softbody/cloth/script.js
View File

@ -1,12 +1,12 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 60, 120),
far: 10000
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -59,7 +59,7 @@ const cloth = new WHS.Plane({ // Softbody (blue).
}
});
cloth.addTo(world);
cloth.addTo(app);
new WHS.Box({ // Rigidbody (green).
geometry: {
@ -81,9 +81,9 @@ new WHS.Box({ // Rigidbody (green).
position: {
y: 36
}
}).addTo(world);
}).addTo(app);
UTILS.addBoxPlane(world, 250);
UTILS.addBasicLights(world, 0.5, [60, 60, 20], 400);
UTILS.addBoxPlane(app, 250);
UTILS.addBasicLights(app, 0.5, [60, 60, 20], 400);
world.start();
app.start();

18
examples/softbody/cloth2/script.js
View File

@ -1,12 +1,12 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 60, 120),
far: 10000
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -80,8 +80,8 @@ const arm = new WHS.Box({ // Rigidbody (green).
}
});
arm.addTo(world);
cloth.addTo(world).then(() => {
arm.addTo(app);
cloth.addTo(app).then(() => {
cloth.appendAnchor(arm, 0, 1, false);
cloth.appendAnchor(arm, 20, 1, false);
});
@ -106,9 +106,9 @@ new WHS.Box({ // Rigidbody (green).
position: {
y: 18
}
}).addTo(world);
}).addTo(app);
UTILS.addBoxPlane(world, 250);
UTILS.addBasicLights(world, 0.5, [60, 60, 20], 400);
UTILS.addBoxPlane(app, 250);
UTILS.addBasicLights(app, 0.5, [60, 60, 20], 400);
world.start();
app.start();

18
examples/softbody/cloth3/script.js
View File

@ -2,13 +2,13 @@ import * as UTILS from '../../globals';
const mouse = new WHS.VirtualMouseModule();
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 60, 120),
far: 10000
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -78,8 +78,8 @@ const arm = new WHS.Box({ // Rigidbody (green).
}
});
arm.addTo(world);
cloth.addTo(world).then(() => {
arm.addTo(app);
cloth.addTo(app).then(() => {
cloth.appendAnchor(arm, 0, 1, false);
cloth.appendAnchor(arm, 40, 1, false);
});
@ -104,13 +104,13 @@ new WHS.Box({ // Rigidbody (green).
position: {
y: 18
}
}).addTo(world).then(box => {
}).addTo(app).then(box => {
mouse.on('move', () => {
box.setLinearVelocity(mouse.project().sub(box.position));
});
});
UTILS.addBoxPlane(world, 250);
UTILS.addBasicLights(world, 0.5, [60, 60, 20], 400);
UTILS.addBoxPlane(app, 250);
UTILS.addBasicLights(app, 0.5, [60, 60, 20], 400);
world.start();
app.start();

42
examples/softbody/ropes/script.js
View File

@ -1,12 +1,12 @@
const mouse = new WHS.VirtualMouseModule();
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 15, 60),
far: 10000
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -49,7 +49,7 @@ const toptube = new WHS.Tube({
material: tubeMaterial
});
toptube.addTo(world);
toptube.addTo(app);
// LEFT.
new WHS.Tube({
@ -65,7 +65,7 @@ new WHS.Tube({
],
material: tubeMaterial
}).addTo(world);
}).addTo(app);
// RIGHT.
new WHS.Tube({
@ -81,7 +81,7 @@ new WHS.Tube({
],
material: tubeMaterial
}).addTo(world);
}).addTo(app);
const sphere = new WHS.Sphere({
geometry: {
@ -114,7 +114,7 @@ for (let i = 0; i < 5; i++) {
const sc = sphere.clone();
sc.position.x = -20 + i * 6;
sc.material = sc.material.clone();
sc.addTo(world);
sc.addTo(app);
sphereHandler.push(sc);
const v1 = sc.position.clone();
@ -137,7 +137,7 @@ for (let i = 0; i < 5; i++) {
]
});
rope.addTo(world).then(() => {
rope.addTo(app).then(() => {
rope.appendAnchor(toptube, 50, 1);
rope.appendAnchor(sc, 0, 1);
});
@ -167,7 +167,7 @@ const sphereStart = new WHS.Sphere({
}
});
sphereStart.addTo(world);
sphereStart.addTo(app);
sphereHandler.push(sphereStart);
const rope1 = new WHS.Line({
@ -186,7 +186,7 @@ const rope1 = new WHS.Line({
]
});
rope1.addTo(world).then(() => {
rope1.addTo(app).then(() => {
rope1.appendAnchor(toptube, 50, 1);
rope1.appendAnchor(sphereStart, 0, 1);
});
@ -218,28 +218,24 @@ new WHS.Plane({
rotation: {
x: -Math.PI / 2
}
}).addTo(world);
}).addTo(app);
new WHS.SpotLight({
light: {
intensity: 6,
distance: 100,
angle: 90
},
intensity: 6,
distance: 100,
angle: 90,
position: {
y: 50
}
}).addTo(world);
}).addTo(app);
new WHS.AmbientLight({
light: {
intensity: 0.6,
color: 0xffffff
}
}).addTo(world);
intensity: 0.6,
color: 0xffffff
}).addTo(app);
world.start();
app.start();
// Check mouse.

16
examples/softbody/sphere/script.js
View File

@ -1,11 +1,11 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule({
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 10, 50)
}),
})),
new WHS.RenderingModule({
bgColor: 0x162129,
@ -47,7 +47,7 @@ new WHS.Icosahedron({ // Softbody (blue).
position: {
y: 4
}
}).addTo(world).then(obj => { obj.native.frustumCulled = false });
}).addTo(app).then(obj => { obj.native.frustumCulled = false });
// TODO: Make sphere position start from specific position. [Softbodies issue]
new WHS.Sphere({ // Rigidbody (green).
@ -72,11 +72,11 @@ new WHS.Sphere({ // Rigidbody (green).
x: -0.5,
z: 0.5
}
}).addTo(world)
}).addTo(app)
UTILS.addBoxPlane(world, 2500);
UTILS.addBasicLights(world);
UTILS.addBoxPlane(app, 2500);
UTILS.addBasicLights(app);
world.start();
app.start();

25
examples/textures/phong/script.js
View File

@ -1,6 +1,6 @@
import * as UTILS from '../../globals';
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules()
]);
@ -34,8 +34,8 @@ const label = new UTILS.Label({
position: [-15, 7, 0]
});
box.addTo(world);
label.addTo(world);
box.addTo(app);
label.addTo(app);
// normalMap
@ -66,8 +66,8 @@ const labelNormal = new UTILS.Label({
position: [0, 7, 0]
});
boxNormal.addTo(world);
labelNormal.addTo(world);
boxNormal.addTo(app);
labelNormal.addTo(app);
// displacementMap
@ -99,17 +99,14 @@ const labelDisplace = new UTILS.Label({
position: [15, 7, 0]
});
boxDisplace.addTo(world);
labelDisplace.addTo(world);
boxDisplace.addTo(app);
labelDisplace.addTo(app);
new WHS.PointLight({
light: {
distance: 100
},
distance: 100,
position: [0, 0, 10]
}).addTo(world);
}).addTo(app);
UTILS.addBasicLights(world);
UTILS.addBasicLights(app);
world.start(); // Start animations and physics simulation.
app.start(); // Start animations and physics simulation.

22
examples/whs-module-audio/positional/script.js
View File

@ -2,7 +2,7 @@ import * as UTILS from '../../globals';
const controlsModule = new WHS.OrbitControlsModule();
const cameraModule = new WHS.CameraModule({
const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: {
z: 250,
y: 100
@ -10,9 +10,9 @@ const cameraModule = new WHS.CameraModule({
far: 30000,
near: 1
});
}));
const world = new WHS.App([
const app = new WHS.App([
...UTILS.appModules({
position: new THREE.Vector3(0, 10, 200)
}),
@ -49,20 +49,18 @@ const sphere = new WHS.Sphere({
}
});
sphere.addTo(world);
sphere.addTo(app);
audioModule.addListener(cameraModule.camera);
audioModule.playAudio(`${process.assetsPath}/sounds/folk.mp3`);
new WHS.PointLight({
light: {
color: 0xffffff,
intensity: 1,
distance: 1000
},
color: 0xffffff,
intensity: 1,
distance: 1000,
position: [10, 40, 10]
}).addTo(world);
}).addTo(app);
new WHS.Box({
geometry: {
@ -81,6 +79,6 @@ new WHS.Box({
position: [0, -60, 0],
rotation: [0, 0, 25]
}).addTo(world);
}).addTo(app);
world.start();
app.start();

6
examples/whs-module-dat.gui/mesh/script.js
View File

@ -54,10 +54,8 @@ DatGUI.folder('hello').folder('cool').Custom([{
new WHS.SpotLight({
position: [10, 20, 10],
light: {
distance: 200,
intensity: 2
},
distance: 200,
intensity: 2,
modules: [
DatGUI.Light({

12
gulp/build.js
View File

@ -1,11 +1,10 @@
#!/usr/bin/env node
import gulp from 'gulp';
import del from 'del';
import {argv} from 'yargs';
import {FrameworkCompilerInstance} from './compilers';
import {framework} from './config';
import {log} from './utils';
import {log, isProduction} from './utils';
const logStart = name => log('cyan', `WEBPACK BUILD ['${name}' compiler status]: Started.`);
const logEnd = name => log('green', `WEBPACK BUILD ['${name}' compiler status]: Finished.`);
@ -18,10 +17,15 @@ gulp.task('build', ['build:clean'], () => {
main: new Promise(resolve => {
logStart('main');
compilers('main').run(() => resolve(logEnd('main')));
})
}),
minified: isProduction ? new Promise(resolve => {
logStart('minified');
compilers('minified').run(() => resolve(logEnd('minified')));
}) : Promise.resolve()
};
Promise.all([instances.main]).then(() => process.exit(0), () => process.exit(1));
Promise.all([instances.main, instances.minified]).then(() => process.exit(0), () => process.exit(1));
});
gulp.task('travis-build', ['build'], () => {

10
gulp/compilers.js
View File

@ -13,6 +13,16 @@ export const FrameworkCompilerInstance = (options = {framework}) =>
isProduction,
src: options.framework.src,
dest: options.framework.dest,
isMinified: false,
...(argv.version ? {version: argv.version} : {})
})),
minified: webpack(config({
isProduction,
src: options.framework.src,
dest: options.framework.dest,
isMinified: true,
filename: 'whs.min.js',
...(argv.version ? {version: argv.version} : {})
}))
}[name]);

1
gulp/dev.js
View File

@ -23,6 +23,7 @@ gulp.task('dev', () => {
const app = express();
const compilerInstance = new FrameworkCompilerInstance();
const templateData = getTemplateData({devPhysics: argv.devPhysics, devMode: true});
const exampleCompiler = new ExampleCompilerInstance({
path: {
ammojs: templateData.ammojs,

2
gulp/docs.js
View File

@ -34,7 +34,7 @@ gulp.task('docs:watch', ['docs'], () => {
'./docs/template/**/*.tmpl',
'./docs/template/publish.js',
'./docs/data/**/*',
'./src/core/*.js'
argv.all ? './src/**/*.js' : './src/core/Component.js'
], () => {
del('./docs/public/*.html');
console.log(`update #${i++}`);

1332
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

51
package.json
View File

@ -2,14 +2,14 @@
"name": "whs",
"version": "2.0.0-beta.9.1",
"description": "Framework for developing 3D web apps with physics.",
"main": "build/whitestorm.js",
"main": "build/whs.js",
"typings": "types/index.d.ts",
"scripts": {
"version": "gulp build --prod && git add .",
"test": "xo ./src/**/*.js && jest",
"start": "webpack-dashboard -t WhitestormJS -- gulp dev",
"start:physics": "webpack-dashboard -t WhitestormJS -- gulp dev --devPhysics 8001",
"build": "gulp build & gulp examples:build",
"build": "cross-env NODE_ENV=production gulp build && gulp examples:build",
"deploy": "surge --project ./ --domain whs-dev.surge.sh",
"docs": "gulp docs --all",
"deploy:docs": "surge --project ./docs/public/ --domain whsjs.io"
@ -31,19 +31,19 @@
"license": "MIT",
"homepage": "https://github.com/WhitestormJS/whitestorm.js#readme",
"dependencies": {
"@types/node": "^7.0.32",
"@types/node": "^8.0.4",
"lodash-es": "^4.17.4",
"minivents": "^2.1.0",
"three": "^0.85.2"
"three": "^0.86.0"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^19.0.0",
"babel-loader": "^7.0.0",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-istanbul": "^4.1.3",
"babel-plugin-istanbul": "^4.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
@ -54,11 +54,13 @@
"babel-preset-stage-1": "^6.24.1",
"babel-register": "^6.24.1",
"babelify": "^7.3.0",
"babili-webpack-plugin": "^0.1.2",
"benchmark": "^2.1.4",
"buffer-shims": "^1.0.0",
"coveralls": "^2.13.1",
"del": "^2.2.2",
"express": "^4.15.2",
"cross-env": "^5.0.1",
"del": "^3.0.0",
"express": "^4.15.3",
"gl": "^4.0.3",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
@ -67,34 +69,35 @@
"gulp-browserify": "^0.5.1",
"gulp-cli": "^1.3.0",
"gulp-jsdoc3": "^1.0.1",
"gulp-less": "^3.3.0",
"gulp-less": "^3.3.2",
"gulp-watch": "^4.3.11",
"happypack": "^3.0.3",
"jest": "^19.0.2",
"happypack": "^4.0.0-beta.1",
"jest": "^20.0.4",
"jest-babel": "^1.0.1",
"js-yaml": "^3.8.4",
"jsdoc-babel": "^0.3.0",
"less": "^2.7.2",
"mdurl": "^1.0.1",
"minami": "^1.2.3",
"mocha": "^3.3.0",
"nyc": "^10.3.0",
"mocha": "^3.4.2",
"nyc": "^11.0.3",
"path": "^0.12.7",
"postprocessing": "^2.1.4",
"postprocessing": "^2.2.0",
"present": "^1.0.0",
"pug": "^2.0.0-rc.1",
"redux": "^3.6.0",
"pug": "^2.0.0-rc.2",
"redux": "^3.7.1",
"semantic-ui-less": "^2.2.10",
"snyk": "^1.30.0",
"snyk": "^1.36.2",
"surge": "^0.19.0",
"tslint": "^5.4.2",
"typescript": "^2.3.4",
"tslint": "^5.4.3",
"typescript": "^2.4.1",
"uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22",
"uglify-loader": "^2.0.0",
"webpack": "^2.5.0",
"webpack": "^3.0.0",
"webpack-dashboard": "^0.4.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-middleware": "^1.11.0",
"xo": "^0.18.2",
"yargs": "^8.0.1"
"yargs": "^8.0.2"
},
"eslintConfig": {
"parserOptions": {

4
src/components/__tests__/components.spec.js
View File

@ -3,6 +3,8 @@ import {Mesh} from 'three';
const meshes = [
'Box',
'Circle',
'Cone',
'Cylinder',
'Dodecahedron',
'Extrude',
@ -41,7 +43,7 @@ const cameras = [
const app = new WHS.App([
new WHS.ElementModule(),
new WHS.SceneModule(),
new WHS.CameraModule()
new WHS.DefineModule('camera', new WHS.PerspectiveCamera())
]);
app.start();

26
src/components/__tests__/line.spec.js
View File

@ -6,30 +6,6 @@ describe('Line', () => {
const line = new WHS.Line();
expect(line.geometry.curve).toBe(undefined);
expect(line.geometry.vertices[0]).toEqual({x: 0, y: 0, z: 0});
expect(line.geometry.vertices[1]).toEqual({x: 10, y: 0, z: 0});
expect(line.geometry.vertices[50]).toEqual({x: 10, y: 0, z: 0});
});
test('constructs with vertices according to start/end', () => {
const startVect = {x: 10, y: 1, z: 15};
const endVect = {x: 15, y: 10, z: 25};
const line = new WHS.Line({
geometry: {
start: new Vector3(startVect.x, startVect.y, startVect.z),
end: new Vector3(endVect.x, endVect.y, endVect.z)
}
});
expect(line.geometry.vertices[0]).toEqual({
x: startVect.x,
y: startVect.y,
z: startVect.z
});
expect(line.geometry.vertices[1]).toEqual({
x: endVect.x,
y: endVect.y,
z: endVect.z});
});
});

16
src/components/cameras/CubeCamera.js
View File

@ -7,7 +7,7 @@ import {CameraComponent} from '../../core/CameraComponent';
* @description Creates 6 cameras that render to a WebGLRenderTargetCube
* @param {Object} [params] - The parameters object.
* @memberof module:components/cameras
* @extends CameraComponent
* @extends module:core.CameraComponent
* @example <caption>Creates a CubeCamera and set it as app's camera</caption>
* const camera = new CubeCamera({
* camera: {
@ -41,11 +41,9 @@ class CubeCamera extends CameraComponent {
static defaults = {
...CameraComponent.defaults,
camera: {
near: 1,
far: 1000,
cubeResolution: 128
}
near: 1,
far: 1000,
cubeResolution: 128
};
constructor(params = {}) {
@ -54,9 +52,9 @@ class CubeCamera extends CameraComponent {
build(params = {}) {
return this.applyBridge({camera: new CubeCameraNative(
params.camera.near,
params.camera.far,
params.camera.cubeResolution
params.near,
params.far,
params.cubeResolution
)}).camera;
}
}

42
src/components/cameras/OrthographicCamera.js
View File

@ -8,7 +8,7 @@ import {system} from '../../polyfill';
* @description Camera with orthographic projection.
* @param {Object} [params] - The parameters object.
* @memberof module:components/cameras
* @extends CameraComponent
* @extends module:core.CameraComponent
* @example <caption>Create an OrthographicCamera and set it as app's camera</caption>
* const camera = new OrthographicCamera({
* camera: {
@ -29,27 +29,23 @@ class OrthographicCamera extends CameraComponent {
* @static
* @default <pre>
* {
* camera: {
* near: 1,
* far: 1000,
* left: system.window.innerWidth / -2,
* right: system.window.innerWidth / 2,
* top: system.window.innerHeight / 2,
* bottom: system.window.innerHeight / -2
* }
* near: 1,
* far: 1000,
* left: system.window.innerWidth / -2,
* right: system.window.innerWidth / 2,
* top: system.window.innerHeight / 2,
* bottom: system.window.innerHeight / -2
* }</pre>
*/
static defaults = {
...CameraComponent.defaults,
camera: {
near: 1,
far: 1000,
left: system.window.innerWidth / -2,
right: system.window.innerWidth / 2,
top: system.window.innerHeight / 2,
bottom: system.window.innerHeight / -2
}
near: 1,
far: 1000,
left: system.window.innerWidth / -2,
right: system.window.innerWidth / 2,
top: system.window.innerHeight / 2,
bottom: system.window.innerHeight / -2
};
constructor(params = {}) {
@ -58,12 +54,12 @@ class OrthographicCamera extends CameraComponent {
build(params = {}) {
return this.applyBridge({camera: new OrthographicCameraNative(
params.camera.left,
params.camera.right,
params.camera.top,
params.camera.bottom,
params.camera.near,
params.camera.far
params.left,
params.right,
params.top,
params.bottom,
params.near,
params.far
)}).camera;
}
}

36
src/components/cameras/PerspectiveCamera.js
View File

@ -8,13 +8,11 @@ import {system} from '../../polyfill';
* @category components/cameras
* @param {Object} [params] - The parameters object.
* @memberof module:components/cameras
* @extends CameraComponent
* @extends module:core.CameraComponent
* @example <caption>Create an PerspectiveCamera and set it as app's camera</caption>
* const camera = new PerspectiveCamera({
* camera: {
* fov: 75,
* aspect: window.innerWidth / window.innerHeight
* },
* fov: 75,
* aspect: window.innerWidth / window.innerHeight,
*
* position: {
* x: 0,
@ -32,23 +30,19 @@ class PerspectiveCamera extends CameraComponent {
* @static
* @default <pre>
* {
* camera: {
* near: 1,
* far: 1000,
* fov: 45,
* aspect: system.window.innerWidth / system.window.innerHeight
* }
* near: 1,
* far: 1000,
* fov: 75,
* aspect: system.window.innerWidth / system.window.innerHeight
* }</pre>
*/
static defaults = {
...CameraComponent.defaults,
camera: {
near: 1,
far: 1000,
fov: 45,
aspect: system.window.innerWidth / system.window.innerHeight
}
near: 1,
far: 1000,
fov: 75,
aspect: system.window.innerWidth / system.window.innerHeight
};
constructor(params = {}) {
@ -57,10 +51,10 @@ class PerspectiveCamera extends CameraComponent {
build(params = {}) {
return this.applyBridge({camera: new PerspectiveCameraNative(
params.camera.fov,
params.camera.aspect,
params.camera.near,
params.camera.far
params.fov,
params.aspect,
params.near,
params.far
)}).camera;
}
}

18
src/components/lights/AmbientLight.js
View File

@ -8,24 +8,20 @@ import {LightComponent} from '../../core/LightComponent';
* AmbientLight creates basic light around all scene, so it doesn't need properties like pos or target.
* It supports only color and intensity as parameters, which defines the color of the surrounded light and intensity of light.
* @param {Object} [params={light: {color: 0xffffff, intensity: 1}}] - The params.
* @extends LightComponent
* @extends module:core.LightComponent
* @memberof module:components/lights
* @example <caption>Creating an AmbientLight </caption>
* new AmbientLight({
* light: {
* color: 0xffffff,
* intensity: 0.2
* }
* color: 0xffffff,
* intensity: 0.2
* }).addTo(world);
*/
class AmbientLight extends LightComponent {
static defaults = {
...LightComponent.defaults,
light: {
color: 0xffffff,
intensity: 1
}
color: 0xffffff,
intensity: 1
};
constructor(params = {}) {
@ -34,8 +30,8 @@ class AmbientLight extends LightComponent {
build(params = {}) {
return this.applyBridge({light: new AmbientLightNative(
params.light.color,
params.light.intensity
params.color,
params.intensity
)}).light;
}
}

19
src/components/lights/AreaLight.js
View File

@ -5,12 +5,10 @@ class AreaLight extends LightComponent {
static defaults = {
...LightComponent.defaults,
light: {
color: 0xffffff,
intensity: 1,
width: 10,
height: 10
}
color: 0xffffff,
intensity: 1,
width: 10,
height: 10
};
constructor(params = {}) {
@ -19,11 +17,10 @@ class AreaLight extends LightComponent {
build(params = {}) {
return this.applyBridge({light: new RectAreaLightNative(
params.light.color,
params.light.intensity,
params.light.distance,
params.light.width,
params.light.height
params.color,
params.intensity,
params.width,
params.height
)}).light;
}
}

18
src/components/lights/DirectionalLight.js
View File

@ -9,14 +9,12 @@ import {LightComponent} from '../../core/LightComponent';
* The best analogy would be a light source that acts like the sun: the sun is so far away that all sunlight hitting objects comes from the same angle.<br/><br/>
* It has the same options as AmbientLight in light paramater, but it also supports pos and target paramaters.
* @param {Object} [params={light: {color: 0xffffff, intensity: 1}}] - The params.
* @extends LightComponent
* @extends module:core.LightComponent
* @memberof module:components/lights
* @example <caption>Creating a DirectionalLight to fall down from vec3(10, 20, 10) to vec3(0, 0, 0)</caption>
* new DirectionalLight({
* light: {
* color: 0xffffff,
* intensity: 0.2
* },
* color: 0xffffff,
* intensity: 0.2,
*
* position: [10, 20, 10]
* }).addTo(app);
@ -25,10 +23,8 @@ class DirectionalLight extends LightComponent {
static defaults = {
...LightComponent.defaults,
light: {
color: 0xffffff,
intensity: 1
}
color: 0xffffff,
intensity: 1
};
constructor(params = {}) {
@ -38,8 +34,8 @@ class DirectionalLight extends LightComponent {
build(params = {}) {
return this.applyBridge({light: new DirectionalLightNative(
params.light.color,
params.light.intensity
params.color,
params.intensity
)}).light;
}
}

26
src/components/lights/HemisphereLight.js
View File

@ -6,27 +6,25 @@ import {LightComponent} from '../../core/LightComponent';
* @category components/lights
* @description HemisphereLight is a light source positioned directly above the scene.<br/>
* It also doesn't need position and target properties.
* @classDesc
* <iframe src="https://threejs.org/examples/webgl_lights_hemisphere.html"></iframe>
* @param {Object} [params={light: {skyColor: 0xffffff, groundColor: 0xffffff, intensity: 1}}] - The params.
* @extends LightComponent
* @extends module:core.LightComponent
* @memberof module:components/lights
* @example <caption>Creating a HemisphereLight</caption>
* new HemisphereLight({
* light: {
* skyColor: 0xff0000,
* groundColor: 0x0000ff,
* intensity: 0.2
* }
* skyColor: 0xff0000,
* groundColor: 0x0000ff,
* intensity: 0.2
* }).addTo(app);
*/
class HemisphereLight extends LightComponent {
static defaults = {
...LightComponent.defaults,
light: {
skyColor: 0xffffff,
groundColor: 0xffffff,
intensity: 1
}
skyColor: 0xffffff,
groundColor: 0xffffff,
intensity: 1
}
constructor(params = {}) {
@ -35,9 +33,9 @@ class HemisphereLight extends LightComponent {
build(params = {}) {
return this.applyBridge({light: new HemisphereLightNative(
params.light.skyColor,
params.light.groundColor,
params.light.intensity
params.skyColor,
params.groundColor,
params.intensity
)}).light;
}
}

29
src/components/lights/PointLight.js
View File

@ -10,12 +10,10 @@ import {LightComponent} from '../../core/LightComponent';
* @extends LightComponent
* @memberof module:components/lights
* @example <caption>Creating a PointLight</caption>
* new LightComponent({
* light: {
* color: 0xff0000,
* intensity: 3,
* distance: 1000
* },
* new PointLight( {
* color: 0xff0000,
* intensity: 2,
* distance: 300
*
* position: [10, 20, 10]
* }).addTo(app);
@ -23,12 +21,11 @@ import {LightComponent} from '../../core/LightComponent';
class PointLight extends LightComponent {
static defaults= {
...LightComponent.defaults,
light: {
color: 0xffffff,
intensity: 1,
distance: 100,
decay: 1
}
color: 0xffffff,
intensity: 1,
distance: 100,
decay: 1
}
constructor(params = {}) {
@ -38,10 +35,10 @@ class PointLight extends LightComponent {
build(params = {}) {
return this.applyBridge({light: new PointLightNative(
params.light.color,
params.light.intensity,
params.light.distance,
params.light.decay
params.color,
params.intensity,
params.distance,
params.decay
)}).light;
}
}

40
src/components/lights/SpotLight.js
View File

@ -7,16 +7,16 @@ import {LightComponent} from '../../core/LightComponent';
* @description SpotLight creates spot light that can cast shadow in one direction. <br/><br/>
* It has the same parameters as AmbientLight in light, but it also supports pos and target. <br/><br/>
* SpotLight affects meshes with lambert and phong material.
* @classDesc
* <iframe src="https://threejs.org/examples/webgl_lights_spotlight.html"></iframe>
* @param {Object} [params={light: {color: 0xffffff, intensity: 1, distance: 100, angle: Math.PI / 3, exponent: 0, decay: 1}}] - The params.
* @extends LightComponent
* @extends module:core.LightComponent
* @memberof module:components/lights
* @example <caption>Creating a SpotLight that falls down from vec3(10, 20, 10) to vec3(0, 0, 0)</caption>
* new LightComponent({
* light: {
* color: 0x00ff00,
* intensity: 3,
* distance: 1000
* },
* new SpotLight({
* color: 0x00ff00,
* intensity: 3,
* distance: 1000
*
* position: [10, 20, 10]
* }).addTo(app);
@ -25,14 +25,12 @@ class SpotLight extends LightComponent {
static defaults = {
...LightComponent.defaults,
light: {
color: 0xffffff,
intensity: 1,
distance: 100,
angle: Math.PI / 3,
exponent: 0,
decay: 1
}
color: 0xffffff,
intensity: 1,
distance: 100,
angle: Math.PI / 3,
exponent: 0,
decay: 1
};
constructor(params = {}) {
@ -42,12 +40,12 @@ class SpotLight extends LightComponent {
build(params = {}) {
return this.applyBridge({light: new SpotLightNative(
params.light.color,
params.light.intensity,
params.light.distance,
params.light.angle,
params.light.exponent,
params.light.decay
params.color,
params.intensity,
params.distance,
params.angle,
params.exponent,
params.decay
)}).light;
}
}

8
src/components/meshes/Box.js
View File

@ -11,8 +11,10 @@ import {MeshComponent} from '../../core/MeshComponent';
* @category components/meshes
* @description As told on Component definition, while you can pass any of the inherited params for this component construction, you will need to
* pass specific parameters to build this mesh as a geometry object.
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a Box, and adding to app</caption>
* new Box({
@ -84,9 +86,7 @@ class Box extends MeshComponent {
}
buildGeometry(params = {}) {
const GConstruct = params.buffer ? BoxBufferGeometry : BoxGeometry;
const geometry = new GConstruct(
const geometry = new (params.buffer ? BoxBufferGeometry : BoxGeometry)(
params.geometry.width,
params.geometry.height,
params.geometry.depth,

98
src/components/meshes/Circle.js Normal file
View File

@ -0,0 +1,98 @@
import {
Mesh,
CircleBufferGeometry,
CircleGeometry
} from 'three';
import {MeshComponent} from '../../core/MeshComponent';
/**
* @class Circle
* @category components/meshes
* @description As told on Component definition, while you can pass any of the inherited params for this component construction, you will need to
* pass specific parameters to build this mesh as a geometry object.
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#CircleGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a Circle, and adding to app</caption>
* new Circle({
* geometry: {
* radius: 4,
* segments: 16
* },
*
* material: new THREE.MeshBasicMaterial({
* color: 0xffffff
* }),
*
* position: [50, 60, 70]
* }).addTo(app);
*/
class Circle extends MeshComponent {
/**
* Default values for parameters
* @member {Object} module:components/meshes.Circle#defaults
* @static
* @default <pre>
* {
* geometry: {
* radius: 50,
* segments: 8,
* thetaStart: 0,
* thetaLength: Math.PI * 2
* }
* }</pre>
*/
static defaults = {
...MeshComponent.defaults,
geometry: {
radius: 50,
segments: 8,
thetaStart: 0,
thetaLength: Math.PI * 2
}
};
/**
* Instructions
* @member {Object} module:components/meshes.Circle#instructions
* @static
* @default geometry: ['radius', 'segments', 'thetaStart', 'thetaLength']
*/
static instructions = {
...MeshComponent.instructions,
geometry: ['radius', 'segments', 'thetaStart', 'thetaLength']
};
constructor(params = {}) {
super(params, Circle.defaults, Circle.instructions);
}
build(params = this.params) {
const {geometry, material} = this.applyBridge({
geometry: this.buildGeometry(params),
material: params.material
});
return this.applyBridge({mesh: new Mesh(geometry, material)}).mesh;
}
buildGeometry(params = {}) {
const geometry = new (params.buffer ? CircleBufferGeometry : CircleGeometry)(
params.geometry.radius,
params.geometry.segments,
params.geometry.thetaStart,
params.geometry.thetaLength
);
return geometry;
}
}
export {
Circle
};

132
src/components/meshes/Cone.js Normal file
View File

@ -0,0 +1,132 @@
import {
Mesh,
ConeBufferGeometry,
ConeGeometry
} from 'three';
import {MeshComponent} from '../../core/MeshComponent';
/**
* @class Cone
* @category components/meshes
* @description A cylinder is one of the most basic curvilinear geometric shapes, the surface formed by the points at a fixed distance from a given straight line, the axis of the cylinder. <br/><br/>
* The solid enclosed by this surface and by two planes perpendicular to the axis is also called a cylinder.<br/>
* The surface area and the volume of a cylinder have been known since deep antiquity.
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#ConeGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a Cone, and adding to app</caption>
* new Cone({
* geometry: {
* radiusTop: 2,
* radiusBottom: 4,
* height: 5
* },
*
* material: new THREE.MeshBasicMaterial({
* color: 0xffffff
* }),
*
* pos: [0, 100, 0]
* }).addTo(app);
*/
class Cone extends MeshComponent {
/**
* Default values for parameters
* @member {Object} module:components/meshes.Cone#defaults
* @static
* @default <pre>
* {
* geometry: {
* radius: 20,
* height: 100,
* radiusSegments: 32,
* heightSegments: 1,
* openEnded: false,
* thetaStart: 0,
* thetaLength: Math.PI * 2
* }
* }</pre>
*/
static defaults = {
...MeshComponent.defaults,
geometry: {
radius: 20,
height: 100,
radiusSegments: 32,
heightSegments: 1,
openEnded: false,
thetaStart: 0,
thetaLength: Math.PI * 2
}
};
/**
* Instructions
* @member {Object} module:components/meshes.Cone#instructions
* @static
* @default <pre>
* geometry: [
* 'radius',
* 'height',
* 'radiusSegments',
* 'heightSegments',
* 'openEnded',
* 'thetaStart',
* 'thetaLength'
* ]
* </pre>
*/
static instructions = {
...MeshComponent.instructions,
geometry: [
'radius',
'height',
'radiusSegments',
'heightSegments',
'openEnded',
'thetaStart',
'thetaLength'
]
};
constructor(params = {}) {
super(params, Cone.defaults, Cone.instructions);
if (params.build) {
this.build(params);
super.wrap();
}
}
build(params = this.params) {
const {geometry, material} = this.applyBridge({
geometry: this.buildGeometry(params),
material: params.material
});
return this.applyBridge({mesh: new Mesh(geometry, material)}).mesh;
}
buildGeometry(params = {}) {
const geometry = new (params.buffer ? ConeBufferGeometry : ConeGeometry)(
params.geometry.radius,
params.geometry.height,
params.geometry.radiusSegments,
params.geometry.heightSegments,
params.geometry.openEnded,
params.geometry.thetaStart,
params.geometry.thetaLength
);
return geometry;
}
}
export {
Cone
};

18
src/components/meshes/Cylinder.js
View File

@ -12,12 +12,14 @@ import {MeshComponent} from '../../core/MeshComponent';
* @description A cylinder is one of the most basic curvilinear geometric shapes, the surface formed by the points at a fixed distance from a given straight line, the axis of the cylinder. <br/><br/>
* The solid enclosed by this surface and by two planes perpendicular to the axis is also called a cylinder.<br/>
* The surface area and the volume of a cylinder have been known since deep antiquity.
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#CylinderGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a Cylinder, and adding to app</caption>
* new Cylinder({
* geometry: {
* geometry: {
* radiusTop: 2,
* radiusBottom: 4,
* height: 5
@ -39,9 +41,9 @@ class Cylinder extends MeshComponent {
* @default <pre>
* {
* geometry: {
* radiusTop: 0,
* radiusBottom: 1,
* height: 1,
* radiusTop: 20,
* radiusBottom: 20,
* height: 100,
* radiusSegments: 32,
* heightSegments: 1,
* openEnded: false,
@ -114,9 +116,7 @@ class Cylinder extends MeshComponent {
}
buildGeometry(params = {}) {
const GConstruct = params.buffer && !params.softbody ? CylinderBufferGeometry : CylinderGeometry;
const geometry = new GConstruct(
const geometry = new (params.buffer ? CylinderBufferGeometry : CylinderGeometry)(
params.geometry.radiusTop,
params.geometry.radiusBottom,
params.geometry.height,
@ -127,8 +127,6 @@ class Cylinder extends MeshComponent {
params.geometry.thetaLength
);
if (params.softbody) this.proccessSoftbodyGeometry(geometry);
return geometry;
}
}

8
src/components/meshes/Dodecahedron.js
View File

@ -14,8 +14,10 @@ import {MeshComponent} from '../../core/MeshComponent';
* There are also three regular star dodecahedra, which are constructed as stellations of the convex form. <br/>
* All of these have icosahedral symmetry, order 120.
* Dodecahedron creates Dodecahedron object by it's radius and detail.
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#DodecahedronGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a Dodecahedron, and adding to app</caption>
* new Dodecahedron({
@ -84,9 +86,7 @@ class Dodecahedron extends MeshComponent {
}
buildGeometry(params = {}) {
const GConstruct = params.buffer && !params.softbody ? DodecahedronBufferGeometry : DodecahedronGeometry;
return new GConstruct(
return new (params.buffer ? DodecahedronBufferGeometry : DodecahedronGeometry)(
params.geometry.radius,
params.geometry.detail
);

8
src/components/meshes/Extrude.js
View File

@ -19,8 +19,10 @@ import {MeshComponent} from '../../core/MeshComponent';
* Such examples can be easily implemented using whitestorm.js or it's plugins. Use `Extrude` class with <a href='https://threejs.org/docs/#api/extras/core/Shape'>THREE.Shape</a> to get extrude effect of shape defined by 2D vectors.
* This class is similar to <a href='https://threejs.org/docs/#api/geometries/ExtrudeGeometry'>THREE.ExtrudeGeometry</a>,
* but it also contains all properties, applied by `Shape`, such as material, mass and vectors like position (pos) and rotation (rot).
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#ExtrudeGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a shape, then an Extrude from it</caption>
* const shape = new THREE.Shape([
@ -109,12 +111,12 @@ class Extrude extends MeshComponent {
}
buildGeometry(params = {}) {
const extrudeGeometry = new ExtrudeGeometry(
const geometry = new ExtrudeGeometry(
params.geometry.shapes,
params.geometry.options
);
return params.buffer ? new BufferGeometry().fromGeometry(extrudeGeometry) : extrudeGeometry;
return params.buffer ? new BufferGeometry().fromGeometry(geometry) : geometry;
}
}

2
src/components/meshes/Group.js
View File

@ -8,7 +8,7 @@ import {Component} from '../../core/Component';
* @description Sometimes you need to make groups of objects (it's not conveniently to apply transforms to each object when can make just one to a group).<br/>
* In Three.js you make it using `THREE.Object3D` and it's children. <br/><br/>
* In whs.js we have `Group`
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Approach 2 - Adding objects to an empty group</caption>
* const sphere = new Sphere();

8
src/components/meshes/Icosahedron.js
View File

@ -12,8 +12,10 @@ import {MeshComponent} from '../../core/MeshComponent';
* @description In geometry, an icosahedron is a polyhedron with 20 faces.<br/>
* There are many kinds of icosahedra, with some being more symmetrical than others. The most well known is the Platonic, convex regular icosahedron.<br/>
* `Icosahedron` creates an Icosahedron object by its radius and detail.
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#IcosahedronGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a Icosahedron, and adding to app</caption>
* new Icosahedron({
@ -80,9 +82,7 @@ class Icosahedron extends MeshComponent {
}
buildGeometry(params = {}) {
const GConstruct = params.buffer && !params.softbody ? IcosahedronBufferGeometry : IcosahedronGeometry;
return new GConstruct(
return new (params.buffer ? IcosahedronBufferGeometry : IcosahedronGeometry)(
params.geometry.radius,
params.geometry.detail
);

8
src/components/meshes/Lathe.js
View File

@ -15,8 +15,10 @@ import {MeshComponent} from '../../core/MeshComponent';
* The lathing may be partial; the amount of rotation is not necessarily a full 360 degrees.
* The point set providing the initial source data can be thought of as a cross section through the object along a plane containing its axis of radial symmetry. <br/><br/>
* The <a href='http://threejs.org/docs/scenes/geometry-browser.html#LatheGeometry'>following example</a> shows a geometry which can be generated using `Lathe` class.
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#LatheGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a Lath, and adding to app</caption>
* const points = [];
@ -95,9 +97,7 @@ class Lathe extends MeshComponent {
}
buildGeometry(params = {}) {
const GConstruct = params.buffer && !params.softbody ? LatheBufferGeometry : LatheGeometry;
return new GConstruct(
return new (params.buffer ? LatheBufferGeometry : LatheGeometry)(
params.geometry.points
);
}

22
src/components/meshes/Line.js
View File

@ -3,6 +3,7 @@ import {
BufferGeometry,
Geometry,
BufferAttribute,
LineCurve3,
Vector3
} from 'three';
@ -13,7 +14,7 @@ import {MeshComponent} from '../../core/MeshComponent';
* @category components/meshes
* @description Line component is generated from a curve/line and amount of vectors that should be used (points).
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating a Line, and adding to app</caption>
* new Line({
@ -34,10 +35,8 @@ class Line extends MeshComponent {
* @default <pre>
* {
* geometry: {
* curve: false,
* points: 50,
* start: new Vector3(0, 0, 0),
* end: new Vector3(10, 0, 0)
* curve: new LineCurve3(new Vector3(0, 0, 0), new Vector3(10, 0, 0)),
* points: 50
* }
* }
* </pre>
@ -45,10 +44,8 @@ class Line extends MeshComponent {
static defaults = {
...MeshComponent.defaults,
geometry: {
curve: false,
points: 50,
start: new Vector3(0, 0, 0),
end: new Vector3(10, 0, 0)
curve: new LineCurve3(new Vector3(0, 0, 0), new Vector3(10, 0, 0)),
points: 50
}
};
@ -82,13 +79,6 @@ class Line extends MeshComponent {
buildGeometry(params = {}) {
const geometry = params.buffer ? new BufferGeometry() : new Geometry();
if (params.geometry.curve === false) {
geometry.vertices.push(params.geometry.start);
geometry.vertices.push(params.geometry.end);
return geometry;
}
if (params.buffer) {
const pp = params.geometry.curve.getPoints(params.geometry.points);
const verts = new Float32Array(pp.length * 3);

8
src/components/meshes/Octahedron.js
View File

@ -13,8 +13,10 @@ import {MeshComponent} from '../../core/MeshComponent';
* A regular octahedron is a Platonic solid composed of eight equilateral triangles, four of which meet at each vertex.
* <br/><br/>
* `Octahedron` creates an Octahedron object by its `radius` and `detail`.
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#OctahedronGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Creating an Octahedron, and adding to app</caption>
* new Octahedron({
@ -71,9 +73,7 @@ class Octahedron extends MeshComponent {
}
buildGeometry(params = {}) {
const GConstruct = params.buffer && !params.softbody ? OctahedronBufferGeometry : OctahedronGeometry;
return new GConstruct(
return new (params.buffer ? OctahedronBufferGeometry : OctahedronGeometry)(
params.geometry.radius,
params.geometry.detail
);

8
src/components/meshes/Parametric.js
View File

@ -17,8 +17,10 @@ import {MeshComponent} from '../../core/MeshComponent';
* - <a href='http://math.hws.edu/graphicsbook/source/threejs/curves-and-surfaces.html'>Parametric surface</a>
* - <a href='https://stemkoski.github.io/Three.js/Graphulus-Surface.html'>"Graphulus"</a>
* <br/><br/>
* @classDesc
* <iframe src="https://threejs.org/docs/scenes/geometry-browser.html#ParametricGeometry"></iframe>
* @param {Object} [params] - The params.
* @extends MeshComponent
* @extends module:core.MeshComponent
* @memberof module:components/meshes
* @example <caption>Example creating an heightfield-like geometry. `u` and `v` are like `x` and `y` in shape, but their values are always from `0` to `1`.
* We use them in `THREE.Vector3` like `x` and `z` and `Math.random() * 5` for `y`.</caption>
@ -77,9 +79,7 @@ class Parametric extends MeshComponent {
}
buildGeometry(params = {}) {
const GConstruct = params.buffer && !params.softbody ? ParametricBufferGeometry : ParametricGeometry;
return new GConstruct(
return new (params.buffer ? ParametricBufferGeometry : ParametricGeometry)(
params.geometry.func,
params.geometry.slices,
params.geometry.stacks

Some files were not shown because too many files have changed in this diff Show More