웹 팩 + typescript + threejs + vscode 개발

우선 개발 환경 을 준비 해 야 합 니 다. 여 기 는 windows 위 에 nodejs 와 vscode 를 설치 해 야 합 니 다. (vscode 는 제 가 사용 하고 있 는 편집기 입 니 다.)
1. nodejs 를 설치 합 니 다. 다운로드 주소:https://nodejs.org/en/ (다운로드 8.9.1) 설치 할 때 설치 옵션 을 주의 하 세 요. 시스템 경 로 를 추가 하 세 요. 영어 대응 은 아마 "add path..." 바라 바라 의 것 입 니 다.
설치 가 완료 되면 명령 행 도구 (cmd. exe) 를 열 고 입력 하 십시오. node -v 하면 nodejs 버 전 번 호 를 볼 수 있 습 니 다. 설치 가 성공 했다 는 것 을 증명 합 니 다.
마을 내 환경 때문에 npm 는 그다지 좋 은 것 이 아 닐 수도 있 습 니 다. 만약 당신 이 뒤지 지 않 았 다 면 cmd. exe 를 열 고 cnpm. npm 를 설치 하 는 것 을 권장 합 니 다.
2. vscode 설치.https://code.visualstudio.com/ (vscode 다운로드) 여 기 는 vscode 를 개발 환경 으로 사용 합 니 다.
3. 새 폴 더 를 만 듭 니 다. 개발 프로젝트 를 위 한 폴 더 를 만 듭 시다. 여기 서 이름 을 짓 고 cmd. exe 를 사용 하여 이 주 소 를 엽 니 다. windows 는 폴 더 주소 에서 cmd 를 두 드 리 면 열 수 있 습 니 다. (또는 vscode 로 열 면 Ctrl + '터미널 을 누 릅 니 다.)
4. 항목 초기 화 npm install -g cnpm --registry=https://registry.npm.taobao.org 를 입력 하 십시오. Enter 를 계속 누 르 면 됩 니 다. 이 과정 은 폴 더 에 파일 npm init 을 만 들 기 때 문 입 니 다.
5. 의존 하 는 가방 을 설치 합 니 다. 여 기 는 제 가 한꺼번에 설치 하 겠 습 니 다. package.json6. 여기까지 입 니 다. vscode 로 이 폴 더 항목 을 엽 니 다.
7. 웹 팩 을 초기 화 합 니 다. 우선 루트 디 렉 터 리 에 파일 을 만 들 고 cnpm i three webpack webpack-dev-server html-webpack-plugin typescript awesome-typescript-loader @types/three @types/node 다음 코드 를 기록 합 니 다.

var path = require('path');
var HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    //    
    entry: "./src/index.ts",
    //    
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    //    
    devtool: "source-map",
    //       
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
        ]
    },
    //    
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 7777
    },
    //  
    plugins: [
        new HtmlWebPackPlugin(
            {
                title: "threejs  "
            }),
    ]
}

tsconfig. json 만 들 기

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es6",
        "lib": [
            "es2017",
            "dom"
        ],
        "types": [
            "node"
        ],
        "module": "commonjs",
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ]
}

8. 프로젝트 설정 이 완 료 된 것 을 축하합니다. 이제 코드 를 작성 할 수 있 습 니 다. 폴 더 webpack.config.ts 를 만 들 고 만 들 수 있 습 니 다 srchtml 코드 를 쓰 지 않 았 기 때문에 순수한 js 조작 dom 으로 canvas 를 만 듭 니 다.
코드 는 다음 과 같 습 니 다:

import * as THREE from "three";


//    .
let scene = new THREE.Scene();
//  
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//   
let renderer = new THREE.WebGLRenderer();
//      
renderer.setSize(window.innerWidth, window.innerHeight);
//   body
document.body.appendChild(renderer.domElement);



//   ,     .

let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
let cube = new THREE.Mesh(geometry, material);
//     
scene.add(cube);

//      
camera.position.z = 5;

//    
function animate()
{
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

그리고 파일 을 수정 해서 scripts 에 추가 하 세 요.

  "scripts": {
    "dev": "webpack-dev-server"
  },

그리고 명령 행 에서 실행 할 수 있 습 니 다. index.ts확장 중 package.json 플러그 인 을 설치 할 수 있 습 니 다. 그러면 F5 에 따라 코드 디 버 깅 을 할 수 있 습 니 다.npm run dev 디 버 깅 을 선택 하고 debugger for chrome 파일 의 포트 를 수정 하여 7777 (상기 webpack. config. js 에 설 치 된 포트) 로 바 꾸 는 것 을 기억 하 십시오.
대략 이렇다

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:7777",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

지금 F5 를 누 르 면 브 라 우 저가 열 리 고 이런 화면 이 그 려 져 있 습 니 다.
축하합니다. three. js 개발 에 입문 하 였 습 니 다.
이 글 은 도 구 를 어떻게 사용 하 는 지 대충 말 했 을 뿐이다. 구체 적 으로 많은 자 료 는 튜 토리 얼 에서 언급 되 지 않 았 고 필요 한 기술 도 시간 이 필요 하 다. 아래 에 참고 자 료 를 열거 하면 이런 도 구 를 어떻게 사용 하 는 지, 그리고 왜 이런 도 구 를 사용 하 는 지 알 수 있다.
참고 자료: 1. typescript 중국어 매 뉴 얼 주소:https://www.tslang.cn/2.cnpm 주소:https://cnpmjs.org/3.vscode 주소:https://code.visualstudio.com/4.nodejs 주소:https://nodejs.org/en/5.webpack 주소:https://doc.webpack-china.org/6.npm config 주소:https://docs.npmjs.com/cli/co...7.threejs 주소:https://threejs.org/8.이 프로젝트 git 위탁 관리 주소:https://gitee.com/BearCAD/thr...