Форум программистов, компьютерный форум, киберфорум
Наши страницы
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Пример дружбы TypeScript с Three.js

Запись от 8Observer8 размещена 01.07.2019 в 01:46
Обновил(-а) 8Observer8 10.07.2019 в 15:03

Пример я переписал на TypeScript из официальной документации, отсюда: https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

Песочница на TypeScript

Исходники в архиве

Исходники на GitHub

Исходные файлы


package.json

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    "name": "getting-started-with-threejs",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "debug": "tsc -p tsconfig.debug.json",
        "compile": "tsc -p tsconfig.release.json",
        "bundle": "browserify public/js/Program.js -o public/js/bundle.js",
        "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
        "release": "npm run compile && npm run bundle && npm run minify"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "three": "^0.106.2"
    },
    "devDependencies": {
        "@types/requirejs": "^2.1.31"
    }
}
tsconfig.debug.json

JSON
1
2
3
{
    "extends": "./tsconfig.json"
}
tsconfig.release.json

JSON
1
2
3
4
5
6
7
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "commonjs",
        "sourceMap": false
    }
}
style.css

CSS
1
2
3
4
5
6
7
8
body {
    margin: 0;
}
 
canvas {
    width: 100%;
    height: 100%
}
index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
 
    <title>Three.js - Getting Started</title>
 
    <link rel="stylesheet" href="css/style.css">
 
    <!-- Debug and Playground-Plunker Version -->
    <script data-main="js/RequireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
 
    <!-- Release Version -->
    <!-- <script src="js/bundle.min.js"></script> -->
</head>
 
<body>
 
</body>
 
</html>
Game.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import * as THREE from "three";
 
export class Game
{
    private _cube: THREE.Mesh;
    private _renderer: THREE.WebGLRenderer;
    private _scene: THREE.Scene;
    private _camera: THREE.PerspectiveCamera;
 
    public constructor()
    {
        this._scene = new THREE.Scene();
 
        this._camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this._camera.position.z = 5;
 
        this._renderer = new THREE.WebGLRenderer();
        this._renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this._renderer.domElement);
 
        let geometry = new THREE.BoxGeometry(1, 1, 1);
        let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        this._cube = new THREE.Mesh(geometry, material);
        this._scene.add(this._cube);
    }
 
    public Animate(): void
    {
        requestAnimationFrame(() => this.Animate());
 
        this._cube.rotation.x += 0.1;
        this._cube.rotation.y += 0.1;
 
        this._renderer.render(this._scene, this._camera);
    }
}
Program.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Game } from "./Game";
 
// Playground: https://next.plnkr.co/edit/YXLIamSsUH8k1E3r?preview
 
class Program
{
    public static Main(): void
    {
        let game = new Game();
        game.Animate();
    }
}
 
// Debug and Playground-Plunker Version
Program.Main();
 
// Release Version
// window.onload = () => Program.Main();
RequireConfig.ts

Javascript
1
2
3
4
5
6
7
8
requirejs.config({
    baseUrl: "js",
    paths: {
        "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min"
    }
});
 
requirejs(["Program"], (Program) => { });
launch.json

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/public"
        }
    ]
}


В начале, стоит отметить, что есть корень проекта, где лежит файл package.json. В этом файле перечислены модули, которые нужно поставить:
JSON
1
2
3
4
5
6
7
8
{
    "dependencies": {
        "three": "^0.106.2"
    },
    "devDependencies": {
        "@types/requirejs": "^2.1.31"
    }
}
Ставятся эти два модуля одной командой выполненной из корня проекта:
Цитата:
npm install
Либо, кратко: npm i

Нужно установить глобально модуль typescript. Делается это один раз:

Цитата:
npm i typescript -g
Далее, нужно поставить локальный сервер. Я использую http-server. Ставится этот модуль глобально, один раз:

Цитата:
npm i http-server -g
Запускаем из консоли в корневой папке проекта локальный сервер:
Цитата:
http-server
Переходим в браузер и в адресной строке набираем:

Цитата:
localhost:8080
Запустится веб приложение.

Когда вы изменили код и решили перекомпилировать, то нужно ввести команду:

Цитата:
npm run debug
Переходите в браузер Chrome, открываете консоль разработчика (Ctrl+Shift+J), нажимаете правой кнопкой мыши по значку "Перегрузить" (в левом верхнем углу браузера - круговая стрелка), выбираете "Empty Cache and Hard Reload"

Попробуйте выполнить эту пошаговую инструкцию. Сообщите, какой шаг вызвал затруднение, или какой шаг инструкции содержит ошибку.
Размещено в Без категории
Просмотров 187 Комментарии 8
Всего комментариев 8
Комментарии
  1. Старый комментарий
    Здорово, но вот вопрос, я скачал исходники? установил nodejs, а какими командами это все запускается
    Запись от ТабуретY размещена 01.07.2019 в 10:43 ТабуретY вне форума
  2. Старый комментарий
    Аватар для 8Observer8
    Цитата:
    Сообщение от ТабуретY Просмотреть комментарий
    Здорово, но вот вопрос, я скачал исходники? установил nodejs, а какими командами это все запускается
    Очень хороший вопрос! Я подумал, что всё равно никто не будет скачивать и пытаться запустить, поэтому я не стал описывать инструкцию запуска, чтобы не терять время, раз это не будет интересно ни одному человеку, до момента, пока это не нужно будет хотя бы одном человеку. Момент настал. Давайте я буду писать команды, вы их выполняйте, а в завершении получится инструкция, которую я подытожу в шапке темы.

    Перенёс инструкцию в шапку темы.
    Запись от 8Observer8 размещена 01.07.2019 в 11:44 8Observer8 вне форума
    Обновил(-а) 8Observer8 10.07.2019 в 15:02
  3. Старый комментарий
    Аватар для 8Observer8
    Это я описал инструкцию запуска Debug версии, которая позволяет ставить точки останова в моём примере в редакторе VSCode при установленном плагине Chrome. Debug версия позволяет выполнять TypeScript код по шагам, а также позволяет публиковать свои многофайловые TypeScript примеры в популярной песочнице: https://next.plnkr.co/ Пример, как расположить многофайловый проект в песочнице на TypeScript я приводил в шапке темы, ещё раз приведу здесь: https://next.plnkr.co/edit/YXLIamSsUH8k1E3r?preview Можете зайти в Plunker с помощью GitHub аккаунка и здесь Fork примера, нажав кнопку "Fork" в левом верхнем углу онлайн редактора Plunker.

    Если эта инструкция работает, то я опишу вторую инструкцию, которая позволяет собрать все файлы в один bundle-файл, и как этот файл сжать с помощью UglifyJS. Это делается легко несколькими командами.
    Запись от 8Observer8 размещена 01.07.2019 в 11:51 8Observer8 вне форума
  4. Старый комментарий
    Ошибка

    Цитата:
    Uncaught ReferenceError: exports is not defined
    at Program.js:2
    и тут опечатка

    Цитата:
    nmp i typescript -g
    Запись от ТабуретY размещена 01.07.2019 в 12:09 ТабуретY вне форума
  5. Старый комментарий
    Нашел ошибку, в файле tsconfig.release была строка

    Цитата:
    'module' : 'commonjs'
    убрал ее и все заработало
    Запись от ТабуретY размещена 01.07.2019 в 12:33 ТабуретY вне форума
  6. Старый комментарий
    Аватар для 8Observer8
    Опечатку я исправил. А со второй ошибкой нужно разобраться.

    Файл tsconfig.release.json должен быть таким:

    JSON
    1
    2
    3
    4
    5
    6
    7
    
    {
        "extends": "./tsconfig.json",
        "compilerOptions": {
            "module": "commonjs",
            "sourceMap": false
        }
    }
    Нельзя удалять "module": "commonjs". Вы точно вводили вот эту команду?

    Цитата:
    npm run debug
    А не эту:

    Цитата:
    npm run release
    В данном случае, мы собираем Debug версию и запускаем этот скрипт из package.json:

    JSON
    1
    2
    
    "scripts": {
            "debug": "tsc -p tsconfig.debug.json"
    То есть используется для компиляции файл "tsconfig.debug.json", который напрямую наследует файл "tsconfig.json":

    tsconfig.debug.json

    JSON
    1
    2
    3
    
    {
        "extends": "./tsconfig.json"
    }
    Запись от 8Observer8 размещена 01.07.2019 в 13:16 8Observer8 вне форума
  7. Старый комментарий
    Я тут немного прогнал, я прочитал, что проблема в строке "module": "commonjs", и добавлял-удалял ее в конфигах

    В tsconfig.release.json эту строку я удалил, но в релизе я не запускал и это не имеет значения, но эту строку я еще добавил в файл tsconfig.release.json и ввел команду npm run debug, вот после этого заработало
    Запись от ТабуретY размещена 01.07.2019 в 15:24 ТабуретY вне форума
  8. Старый комментарий
    Аватар для 8Observer8
    Дело в том, что чтобы не было в файле "tsconfig.release.json" - это никак не должно влиять на запуск с файлом "tsconfig.debug.json". Команда "npm run debug" запускает файл "tsconfig.debug.json" и к файлу "tsconfig.release.json" не имеет отношения.

    Теперь я напишу инструкцию, как собрать программу в Release. В релизе все полученные в результате компиляции js-файлы будут собранный в один bundle.js файл с помощью Browserify, а затем этот файл будет сжат в минимальную версию, в файл bundle.min.js с помощью UglifyJS. Один файл быстрее загружается в браузер, чем много файлов. Минимизированный файл - это файл в котором удалены комментарии, удалены переносы строк, сокращены имена переменных, чтобы размер его стал минимальным.

    Нужно глобально один раз поставить Browserify и UglifyJS одной командой:

    Цитата:
    npm i browserify uglifyjs -g
    Откройте файл "Program.ts". Вы увидите следующие строки:

    Javascript
    1
    2
    3
    4
    5
    
    // Debug and Playground-Plunker Version
    Program.Main();
     
    // Release Version
    // window.onload = () => Program.Main();
    Нужно закомментировать первую и закомментировать вторую, вот так:

    Javascript
    1
    2
    3
    4
    5
    
    // Debug and Playground-Plunker Version
    // Program.Main();
     
    // Release Version
    window.onload = () => Program.Main();
    Откройте файл "index.html". Вы увидите следующие строки:

    HTML5
    1
    2
    3
    4
    5
    6
    
        <!-- Debug and Playground-Plunker Version -->
        <script data-main="js/RequireConfig"
            src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
     
        <!-- Release Version -->
        <!-- <script src="js/bundle.min.js"></script> -->
    Нужно закомментировать первую и закомментировать вторую, вот так:

    HTML5
    1
    2
    3
    4
    5
    6
    
        <!-- Debug and Playground-Plunker Version -->
        <!-- <script data-main="js/RequireConfig"
            src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
     
        <!-- Release Version -->
        <script src="js/bundle.min.js"></script>
    Соберите Release версию командой:

    Цитата:
    npm run release
    Перейдите в браузер Chrome, откройте консоль разработчика (Ctrl+Shift+J), нажмите правой кнопкой мыши по значку "Перегрузить" (в левом верхнем углу браузера - круговая стрелка), выбираете "Empty Cache and Hard Reload".

    На открытой справа панели разработчика выберите Network. Вы должны увидеть, что был загружен файл bundle.min.js
    Запись от 8Observer8 размещена 01.07.2019 в 16:00 8Observer8 вне форума
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru