README
3Base
3d Web Application Engine
Install
yarn add 3base
Usage Example
Folder Scructure
.
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── ExampleScene.js
│ ├── index.js
├── srv
│ ├── assets
│ │ ├── audio
│ │ ├── images
│ │ ├── models
│ │ └── stylesheets
│ ├── bundle.js
│ └── index.html
├── webpack.config.js
└── yarn.lock
webpack.config.js
const path = require('path');
module.exports = {
node: {
fs: "empty" // Nedded For Ammo.js, webpack does weird things with node fs module...
},
entry: {
app: './src/index.js',
},
output: {
path: path.join( __dirname + "/srv"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
devServer: {
port: 10001
}
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Three Base Example</title>
<link rel="stylesheet" type="text/css" href="./assets/stylesheets/main.css">
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script src="bundle.js"></script>
</body>
</html>
index.js
'use-strict';
import * as tb from '3base';
import Scene1 from './Scene1';
let manager = new tb.Manager({canvas: myCanvas});
manager.loadScene(Scene1);
Scene1.js
'use-strict';
import * as tb from '3base';
export default class ExampleScene extends tb.Scene {
constructor(manager) {
super(manager);// required
this.load(); // required
}
createScene(){
new tb.Sky(this, this.manager.loadTexture('assets/images/sky.jpg')).addToScene();
new tb.Ground(this, this.manager.loadTexture( 'assets/images/ground.jpg')).addToScene();
new tb.GLTFModel(this, 0, 0, -10, 'assets/models/deadpool', 3, 0, true)
.then(deadpool=>{
deadpool.playAnimation(0);
})
}
createLights(){
let dl = new tb.DirectionalLight(this, 1, 200, 0);
dl.addShadow(-30,30,30,-30);
dl.addToScene()
let skyColor = 0xe5efff;
let groundColor = 0xecffd1;
new tb.HemisphereLight(this, skyColor, groundColor, 0.02).addToScene();
}
}