From c2e498cae559909b136aef1be315e444507818f7 Mon Sep 17 00:00:00 2001 From: Igal Alkon Date: Thu, 23 Mar 2017 08:30:38 +0200 Subject: [PATCH 1/3] Added support and integration with 'ammonext' physics. * Added example Sphere component PhysicsSphere * Added example Plane component PhysicsPlane --- .babelrc | 2 +- .gitignore | 3 +++ app/app.js | 19 ++++++++++++--- app/components/PhysicsPlane.js | 42 +++++++++++++++++++++++++++++++++ app/components/PhysicsSphere.js | 39 ++++++++++++++++++++++++++++++ package.json | 8 +++++-- webpack.config.babel.js | 4 ++++ 7 files changed, 111 insertions(+), 6 deletions(-) create mode 100644 app/components/PhysicsPlane.js create mode 100644 app/components/PhysicsSphere.js diff --git a/.babelrc b/.babelrc index c13c5f6..36ef793 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["es2015"] + "presets": ["es2015", "stage-1"] } diff --git a/.gitignore b/.gitignore index 5148e52..f0bf54d 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,9 @@ lib-cov # Coverage directory used by tools like istanbul coverage +# IDE +.idea + # nyc test coverage .nyc_output diff --git a/app/app.js b/app/app.js index 98a1bcb..703a182 100644 --- a/app/app.js +++ b/app/app.js @@ -1,6 +1,7 @@ // Core import {App} from '@whs/core/App'; +// Core Modules import { ElementModule, SceneModule, @@ -8,22 +9,30 @@ import { RenderingModule } from '@whs:app'; +// Modules import {OrbitModule} from '@whs:controls/orbit'; - import {FancyMaterialModule} from './modules/FancyMaterialModule'; // Components -import {Plane} from '@whs+meshes/Plane'; import {BasicComponent} from './components/BasicComponent'; +import {PhysicsSphere} from './components/PhysicsSphere'; +import {PhysicsPlane} from './components/PhysicsPlane'; + +// World Module +import {WorldModule} from '../node_modules/physics-module-ammonext/src/modules/WorldModule'; const app = new App([ + new WorldModule({ + ammo: 'http://localhost:8080/node_modules/three/examples/js/libs/ammo.js' + }), new ElementModule({ container: document.getElementById('app') }), new SceneModule(), new CameraModule({ position: { - z: -15 + y: 40, + z: 40, } }), new RenderingModule({bgColor: 0x000001}), @@ -36,4 +45,8 @@ app.add(new BasicComponent({ ] })); +// Physics Objects +new PhysicsSphere({position: {y: 50}}).addTo(app); +new PhysicsPlane().addTo(app); + app.start(); diff --git a/app/components/PhysicsPlane.js b/app/components/PhysicsPlane.js new file mode 100644 index 0000000..a16b4bc --- /dev/null +++ b/app/components/PhysicsPlane.js @@ -0,0 +1,42 @@ +import { + MeshPhongMaterial +} from 'three'; + +import { + PlaneModule +} from 'physics-module-ammonext'; + +// Meshes +import { + Plane +} from '@whs+meshes'; + +import {MeshComponent} from '@whs/core/MeshComponent'; + +export class PhysicsPlane extends Plane { + /** + * @name PhysicsPlane + * @param params + */ + constructor(params = {}) { + + params.modules = [ + new PlaneModule({ + mass: 0 + }) + ]; + + params.geometry = { + width: 100, + height: 100 + }; + + params.rotation = { + x: -Math.PI / 2 + }; + + params.material = new MeshPhongMaterial({color: 0x447F8B}); + + super(params); + } +} diff --git a/app/components/PhysicsSphere.js b/app/components/PhysicsSphere.js new file mode 100644 index 0000000..7a5bf08 --- /dev/null +++ b/app/components/PhysicsSphere.js @@ -0,0 +1,39 @@ +import { + MeshNormalMaterial +} from 'three'; + +import { + SphereModule +} from 'physics-module-ammonext'; + +// Meshes +import { + Sphere +} from '@whs+meshes'; + +export class PhysicsSphere extends Sphere { + + /** + * @name PhysicsSphere + * @param params + */ + constructor(params = {}) { + + params.modules = [ + new SphereModule({ + mass: 10, + restitution: 2.5 + }) + ]; + + params.geometry = { + radius: 2, + widthSegments: 32, + heightSegments: 24 + }; + + params.material = new MeshNormalMaterial(); + + super(params); + } +} diff --git a/package.json b/package.json index 1e7c410..dcf52b4 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.22.0", "babel-preset-es2015-native-modules": "^6.9.4", + "babel-preset-stage-1": "^6.22.0", "babel-register": "^6.22.0", "glsl-noise": "0.0.0", "glslify": "^6.0.1", @@ -37,10 +38,13 @@ "raw-loader": "^0.5.1", "three": "^0.84.0", "uglifyjs-webpack-plugin": "^0.1.2", + "wasm-loader": "0.0.3", "webpack": "^2.2.0", - "webpack-dev-server": "^2.4.1" + "webpack-dev-server": "^2.4.1", + "worker-loader": "^0.8.0" }, "dependencies": { - "whs": "^2.0.0-beta.5" + "physics-module-ammonext": "^0.1.2", + "whs": "^2.0.0-beta.6" } } diff --git a/webpack.config.babel.js b/webpack.config.babel.js index a5f24c9..346870a 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -28,6 +28,10 @@ const config = { }, { test: /\.(glsl|frag|vert)$/, loader: 'glslify-loader', exclude: /node_modules/ + }, + { + test: /\.wasm$/, + loaders: ['wasm-loader'] } ] }, From 0410e2a31f738035e2b99c110d7374b01e7aae99 Mon Sep 17 00:00:00 2001 From: Igal Alkon Date: Fri, 24 Mar 2017 10:27:14 +0300 Subject: [PATCH 2/3] Being more explicit about creating objects and import. --- app/app.js | 53 ++++++++++++++++++++++++++++----- app/components/PhysicsPlane.js | 42 -------------------------- app/components/PhysicsSphere.js | 39 ------------------------ 3 files changed, 46 insertions(+), 88 deletions(-) delete mode 100644 app/components/PhysicsPlane.js delete mode 100644 app/components/PhysicsSphere.js diff --git a/app/app.js b/app/app.js index 703a182..d9af09b 100644 --- a/app/app.js +++ b/app/app.js @@ -9,18 +9,27 @@ import { RenderingModule } from '@whs:app'; +// Physics Modules +import { + WorldModule, + PlaneModule, + SphereModule +} from 'physics-module-ammonext'; + // Modules import {OrbitModule} from '@whs:controls/orbit'; import {FancyMaterialModule} from './modules/FancyMaterialModule'; // Components import {BasicComponent} from './components/BasicComponent'; -import {PhysicsSphere} from './components/PhysicsSphere'; -import {PhysicsPlane} from './components/PhysicsPlane'; -// World Module -import {WorldModule} from '../node_modules/physics-module-ammonext/src/modules/WorldModule'; +// Mesh Components +import { + Plane, + Sphere +} from '@whs+meshes'; +// App const app = new App([ new WorldModule({ ammo: 'http://localhost:8080/node_modules/three/examples/js/libs/ammo.js' @@ -45,8 +54,38 @@ app.add(new BasicComponent({ ] })); -// Physics Objects -new PhysicsSphere({position: {y: 50}}).addTo(app); -new PhysicsPlane().addTo(app); +// Physics Plane +new Plane({ + geometry: { + width: 100, + height: 100 + }, + rotation: { + x: -Math.PI / 2 + }, + material: new THREE.MeshPhongMaterial({color: 0x447F8B}), + modules: [ + new PlaneModule({ + mass: 0 + }) + ] +}).addTo(app); + +// Physics Sphere +new Sphere({ + position: {y: 40}, + geometry: { + radius: 2, + widthSegments: 32, + heightSegments: 32 + }, + material: new THREE.MeshNormalMaterial(), + modules: [ + new SphereModule({ + mass: 10, + restitution: 2.5 + }) + ] +}).addTo(app); app.start(); diff --git a/app/components/PhysicsPlane.js b/app/components/PhysicsPlane.js deleted file mode 100644 index a16b4bc..0000000 --- a/app/components/PhysicsPlane.js +++ /dev/null @@ -1,42 +0,0 @@ -import { - MeshPhongMaterial -} from 'three'; - -import { - PlaneModule -} from 'physics-module-ammonext'; - -// Meshes -import { - Plane -} from '@whs+meshes'; - -import {MeshComponent} from '@whs/core/MeshComponent'; - -export class PhysicsPlane extends Plane { - /** - * @name PhysicsPlane - * @param params - */ - constructor(params = {}) { - - params.modules = [ - new PlaneModule({ - mass: 0 - }) - ]; - - params.geometry = { - width: 100, - height: 100 - }; - - params.rotation = { - x: -Math.PI / 2 - }; - - params.material = new MeshPhongMaterial({color: 0x447F8B}); - - super(params); - } -} diff --git a/app/components/PhysicsSphere.js b/app/components/PhysicsSphere.js deleted file mode 100644 index 7a5bf08..0000000 --- a/app/components/PhysicsSphere.js +++ /dev/null @@ -1,39 +0,0 @@ -import { - MeshNormalMaterial -} from 'three'; - -import { - SphereModule -} from 'physics-module-ammonext'; - -// Meshes -import { - Sphere -} from '@whs+meshes'; - -export class PhysicsSphere extends Sphere { - - /** - * @name PhysicsSphere - * @param params - */ - constructor(params = {}) { - - params.modules = [ - new SphereModule({ - mass: 10, - restitution: 2.5 - }) - ]; - - params.geometry = { - radius: 2, - widthSegments: 32, - heightSegments: 24 - }; - - params.material = new MeshNormalMaterial(); - - super(params); - } -} From fef5041828f207d484452c12a27bbb1e7b2f1c5a Mon Sep 17 00:00:00 2001 From: Igal Alkon Date: Mon, 27 Mar 2017 00:08:32 +0300 Subject: [PATCH 3/3] Removing wasm-loader. * And improving physics demo with light and jumping ball. --- app/app.js | 49 +++++++++++++++++++++++------------------ package.json | 1 - webpack.config.babel.js | 4 ---- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/app/app.js b/app/app.js index d9af09b..b307b63 100644 --- a/app/app.js +++ b/app/app.js @@ -9,6 +9,10 @@ import { RenderingModule } from '@whs:app'; +import { + AmbientLight +} from '@whs+lights'; + // Physics Modules import { WorldModule, @@ -48,11 +52,23 @@ const app = new App([ new OrbitModule() ]); -app.add(new BasicComponent({ - modules: [ - new FancyMaterialModule(app) - ] -})); +// Physics Sphere +new Sphere({ + position: {y: 40}, + geometry: { + radius: 2, + widthSegments: 32, + heightSegments: 32 + }, + material: new THREE.MeshNormalMaterial(), + modules: [ + new FancyMaterialModule(app), + new SphereModule({ + mass: 10, + restitution: 2.5 + }) + ] +}).addTo(app); // Physics Plane new Plane({ @@ -66,26 +82,17 @@ new Plane({ material: new THREE.MeshPhongMaterial({color: 0x447F8B}), modules: [ new PlaneModule({ - mass: 0 + mass: 0, + restitution: 0.333 }) ] }).addTo(app); -// Physics Sphere -new Sphere({ - position: {y: 40}, - geometry: { - radius: 2, - widthSegments: 32, - heightSegments: 32 - }, - material: new THREE.MeshNormalMaterial(), - modules: [ - new SphereModule({ - mass: 10, - restitution: 2.5 - }) - ] +// Global light +new AmbientLight({ + light: { + intensity: 0.7 + } }).addTo(app); app.start(); diff --git a/package.json b/package.json index dcf52b4..3b2f7d5 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "raw-loader": "^0.5.1", "three": "^0.84.0", "uglifyjs-webpack-plugin": "^0.1.2", - "wasm-loader": "0.0.3", "webpack": "^2.2.0", "webpack-dev-server": "^2.4.1", "worker-loader": "^0.8.0" diff --git a/webpack.config.babel.js b/webpack.config.babel.js index 346870a..a5f24c9 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -28,10 +28,6 @@ const config = { }, { test: /\.(glsl|frag|vert)$/, loader: 'glslify-loader', exclude: /node_modules/ - }, - { - test: /\.wasm$/, - loaders: ['wasm-loader'] } ] },