개요

가정 독자

웹에서 3D를 작성하는 Babylon.js에 관심이있는 분

TypeScript에서 Babylon.js를 사용하고 싶은 분

npm

전제

node, npm을 사용할 수 있어야합니다.

사용하는 npm 모듈은 다음과 같습니다.

    "babylonjs": "^4.0.3",
    "babylonjs-gui": "^4.0.3",
    "babylonjs-materials": "^4.0.3",
    "ts-loader": "^6.0.4",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"

사용하는 소스

아래에 넣었습니다. 항목 작성 시점의 태그는 0.0.1입니다.

webpack

움직이려면

git clone https://github.com/hrkt/babylonjs-typescript-webpack-boilerplate.git
npm install
npm run watch

브라우저에서 index.html을 열면 아래 그림과 같은 화면이 보일 것입니다.

htps : // 기주 b. 이 m / hrkt / 바 by ぉn jsty ぺsc 리 pt ぇ b パクボぇ rp ぁ 테 / ぇ 아세 s / 타 g / 0.0.1

설명

기본적으로 "

"의 내용을 이용하고 있습니다.

변경점에 대해서, 적절히 「(차분)」로서 보충합니다.

tsconfig.json

(차분)
- TypeScript 용 구성 파일의 tsconfig.json에서 compilerOptions에서 "module": "es2015"입니다.
- 대상으로 하는 파일, 하지 않는 파일에 대해서, 각각 include와 exclude의 항목으로 지정하고 있습니다.

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "outDir": "js",
        "sourceMap": true,
        "types": [
            "babylonjs",
            "babylonjs-gui",
            "babylonjs-materials"
        ]
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.js"
    ]
}

webpack.config.js

(차분)
- WebPack용 구성 파일인 webpack.config.js는 node_modules 아래의 파일을 다른 번들로 빌드하는 설정을 포함합니다.
- 처음에 필요한 모듈의 require를 수행하고 있습니다.

const path = require('path')
const webpack = require("webpack")
module.exports = {
    optimization: {
        splitChunks: {
          cacheGroups: {
            commons: {
              test: /[\\/]node_modules[\\/]/,
              name: "vendor",
              chunks: "initial",
            }
          }
        }
      },
    mode: "development",
    entry: {
        app: './src/app.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    devtool: 'source-map',
    plugins: [

    ],
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/
        }]
    }
}

그리기 소스

htps // c c. 바 by js. 코 m / 후 아츠레 s / n pm_ 쏘 rt 상단에 샘플이 있습니다.

(차분)
- 묘화용 클래스(MyScene으로 했습니다)를 별도 파일로 하고, app.js에서는 묘화용 클래스의 로드와 초기화만 실시하고 있습니다.

import MyScene from './my-scene'
window.addEventListener('DOMContentLoaded', () => {
    // Create the game using the 'renderCanvas'.
    let game = new MyScene('renderCanvas');

    // Create the scene.
    game.createScene();

    // Start render loop.
    game.doRender();
  });

결론

대충 만들고 나서, 뭐, 이런 것은 여러가지 사람이 하고 있을 것이다, , 라고 생각해 검색해 보면, 역시 복수 건 있었습니다.

Google에서 처음 3건 정도를 아래에 전기해 둡니다.

htps // c c. 바 by js. 코m/

htps : // 기주 b. 코 m / 팬더 LP 힌 / ba by ぉ js ty ぺ sc pt-u ぇ b pack s r r

htps : // 기주 b. 이 m /에서 ぅゔぁ s / 바 by

Reference

이 문제에 관하여(Babylon.js를 TypeScript로 작성하고 webpack을 사용하여 WebGL을 사용할 때 보일러 플레이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hrkt/items/17d2833ff3e3a4e158be

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Babylon.js를 TypeScript로 작성하고 webpack을 사용하여 WebGL을 사용할 때 보일러 플레이트

개요