Procházet zdrojové kódy

Viewer configuration - initial

Raanan Weber před 7 roky
rodič
revize
bb272a3545
4 změnil soubory, kde provedl 155 přidání a 0 odebrání
  1. 35 0
      Viewer/README.md
  2. 45 0
      Viewer/package.json
  3. 26 0
      Viewer/tsconfig.json
  4. 49 0
      Viewer/webpack.config.js

+ 35 - 0
Viewer/README.md

@@ -0,0 +1,35 @@
+# BabylonJS Viewer
+
+This project is a 3d model viewer using babylonjs.
+
+Please note that this is an *initial release*. The API and project structure could (and probably SHOULD) be changed, so please don't rely on this yet in a productive environment.
+
+The viewer is using the latest Babylon from npm (3.1 alpha).
+
+This documentation is also not full. I will slowly add more and more exmplanations.
+
+## Basic usage
+
+See `basicExample.html` in `/dist`.
+
+Basically, all that is needed is an html tag, and the viewer.js, which includes everything needed to render a Scene:
+
+```html
+<babylon model="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBox/glTF/BoomBox.gltf" default-viewer="true"></babylon>
+<script src="viewer.js"></script>
+``` 
+
+This will create a (default) viewer and will load the model in this URL using the gltf loader.
+
+The `babylon` tag will be automatically initialized. 
+
+## Configuration
+
+Configuration can be provided using html attributes or a JSON (at the moment). A configuration Mapper can be registered to create new configuration readers. 
+
+Before I finish a full documentation, take a look at `configuration.ts`
+
+## Templating
+
+The default templates are integrated in the viewer.js file. The current templates are located in `/assets/templates/default/` . Those templates can be extended and registered using the configuration file.
+

+ 45 - 0
Viewer/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "babylonjs-viewer",
+    "version": "0.1.0",
+    "description": "A viewer using BabylonJS to display 3D elements natively",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/BabylonJS/Babylon.js.git"
+    },
+    "keywords": [
+        "3d",
+        "webgl",
+        "viewer"
+    ],
+    "author": "Raanan Weber",
+    "license": "Apache2",
+    "bugs": {
+        "url": "https://github.com/BabylonJS/Babylon.js/issues"
+    },
+    "homepage": "https://github.com/BabylonJS/Babylon.js#readme",
+    "devDependencies": {
+        "@types/node": "^8.0.34",
+        "base64-image-loader": "^1.2.0",
+        "html-loader": "^0.5.1",
+        "json-loader": "^0.5.7",
+        "ts-loader": "^2.3.7",
+        "typescript": "^2.5.3",
+        "uglifyjs-webpack-plugin": "^0.4.6",
+        "webpack": "^3.6.0"
+    },
+    "dependencies": {
+        "babylonjs": "^3.1.0-alpha3.5",
+        "babylonjs-loaders": "^3.1.0-alpha3.5",
+        "babylonjs-materials": "^3.1.0-alpha3.5",
+        "babylonjs-post-process": "^3.1.0-alpha3.5",
+        "babylonjs-procedural-textures": "^3.1.0-alpha3.5",
+        "es6-promise": "^4.1.1",
+        "handlebars": "^4.0.10",
+        "lodash": "^4.17.4",
+        "lodash.merge": "^4.6.0",
+        "promise-polyfill": "^6.0.2"
+    }
+}

+ 26 - 0
Viewer/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "noResolve": true,
+        "noImplicitAny": false, //mainly due to usage of external libs without typings.
+        "removeComments": true,
+        "preserveConstEnums": true,
+        "sourceMap": true,
+        "experimentalDecorators": true,
+        "isolatedModules": false,
+        "lib": [
+            "dom",
+            "es2015.promise",
+            "es5"
+        ],
+        //"declaration": true,
+        "outDir": "./temp/",
+        "types": [
+            "node",
+            "babylonjs",
+            "babylonjs-loaders",
+            "babylonjs-materials"
+        ]
+    }
+}

+ 49 - 0
Viewer/webpack.config.js

@@ -0,0 +1,49 @@
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        'viewer': './src/index.ts',
+        'viewer.min': './src/index.ts',
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].js',
+        libraryTarget: 'umd',
+        library: 'Viewer3D',
+        umdNamedDefine: true
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js']
+    },
+    devtool: 'source-map',
+    plugins: [
+        new webpack.WatchIgnorePlugin([
+            /\.d\.ts$/
+        ]),
+        new UglifyJSPlugin({
+            minimize: true,
+            comments: false,
+            sourceMap: true,
+            include: /\.min\.js$/,
+        })
+    ],
+    module: {
+        loaders: [{
+            test: /\.tsx?$/,
+            loader: 'ts-loader',
+            exclude: /node_modules/
+        },
+        {
+            test: /\.(html)$/,
+            use: {
+                loader: 'html-loader'
+            }
+        },
+        {
+            test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+            use: 'base64-image-loader?limit=1000&name=[name].[ext]'
+        }]
+    }
+}