当前位置：文江博客 Node Package Readme 3base 中文文档教程

3base 中文文档教程

发布于 4年前浏览 67 项目主页更新于 3年前

3Base

3d Web Application Engine

Install

yarn add 3base

Usage Example

文件夹结构

.
├── README.md
├── package-lock.json
├── package.json
├── src
│&nbsp;&nbsp; ├── ExampleScene.js
│&nbsp;&nbsp; ├── index.js
├── srv
│&nbsp;&nbsp; ├── assets
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── audio
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── images
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── models
│&nbsp;&nbsp; │&nbsp;&nbsp; └── stylesheets
│&nbsp;&nbsp; ├── bundle.js
│&nbsp;&nbsp; └── 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);

场景1.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();
  }
}

PRs are Welcomed and Encouraged!!

Please Report Any Issues

原文

3Base

3d Web Application Engine

Install

yarn add 3base

Usage Example

Folder Scructure

.
├── README.md
├── package-lock.json
├── package.json
├── src
│&nbsp;&nbsp; ├── ExampleScene.js
│&nbsp;&nbsp; ├── index.js
├── srv
│&nbsp;&nbsp; ├── assets
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── audio
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── images
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── models
│&nbsp;&nbsp; │&nbsp;&nbsp; └── stylesheets
│&nbsp;&nbsp; ├── bundle.js
│&nbsp;&nbsp; └── 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();
  }
}

PRs are Welcomed and Encouraged!!

Please Report Any Issues

友情链接

文江博客

3base 中文文档教程

3Base

3d Web Application Engine

Install

Usage Example

PRs are Welcomed and Encouraged!!

Please Report Any Issues

3Base

3d Web Application Engine

Install

Usage Example

PRs are Welcomed and Encouraged!!

Please Report Any Issues

你可能也喜欢

友情链接