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

Программирование на языке TypeScript с помощью Parcel на примере Three.js и Cannon-ES

Запись от 8Observer8 размещена 23.06.2022 в 08:57
Обновил(-а) 8Observer8 23.06.2022 в 11:57

  • Установите редактор кода VSCode и Node.js
  • Установите глобально пакеты TypeScript и Parcel командами в терминале: npm i -g typescript parcel
  • Создайте пустую папку для проекта, перейдите в неё в терминале и создайте в ней файл package.json командой: npm init -y
  • Введите в терминале команду: code . (не забудьте добавить точку, эта команда запустит VSCode в текущей директории)
  • Установите Three.js и Cannon-ES командой: npm i three cannon-es
  • Добавьте в package.json команды:
    Код:
      "scripts": {
        "start": "parcel src/index.html --dist-dir public --open",
        "build": "parcel build src/index.html"
      },
  • Создайте папку src и добавьте в неё два файла:

    src/index.html

    PHP/HTML
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
     
    <body>
        <script type="module" src="main.ts"></script>
    </body>
     
    </html>
    src/main.ts

    Javascript
    1
    2
    3
    4
    5
    
    import * as Three from "three";
    import * as CANNON from "cannon-es";
     
    console.log(new Three.Vector3(1, 2, 3));
    console.log(new CANNON.Vec3(3, 3, 3));
  • Откройте терминал в VSCode (в меню: "View" > "Terminal") и введите команду: npm run start
  • Автоматически будет открыт браузер. Откройте консоль браузера, например, в Chrome нужно нажать Ctrl+Shift+J. В консоли вы увидите вывод:
    Цитата:
    Vector3 {isVector3: true, x: 1, y: 2, z: 3}
    main.ts:5 Vec3 {x: 3, y: 3, z: 3}
Каждый раз, когда вы будете изменять и сохранять код, то браузер будет автоматические обновлять содержимое. Parcel собирает очень быстро - от нескольких десятков или нескольких сотен миллисекунд.

Следующим образом можно добавить в код на TypeScript модули ColladaLoader (для загрузки 3D-моделей с анимациями формата .dae, например, созданных в бесплатном 3D-редакторе Blender) и OrbitControls (для вращения/приближения/отдаления камеры с помощью мыши вокруг точки в 3D-пространстве)

src/main.ts

Javascript
1
2
3
4
5
import { ColladaLoader } from "./node_modules/three/examples/jsm/loaders/ColladaLoader";
import { OrbitControls } from "./node_modules/three/examples/jsm/controls/OrbitControls";
 
console.log(ColladaLoader);
console.log(OrbitControls);
Либо так, если у вас, как у меня, папка с пакетами находится выше по уровню вложенности:

Javascript
1
2
3
4
5
import { ColladaLoader } from "../../../node_modules/three/examples/jsm/loaders/ColladaLoader";
import { OrbitControls } from "../../../node_modules/three/examples/jsm/controls/OrbitControls";
 
console.log(ColladaLoader);
console.log(OrbitControls);
Размещено в Без категории
Показов 310 Комментарии 1
Всего комментариев 1
Комментарии
  1. Старый комментарий
    Аватар для 8Observer8
    Следующим образом можно добавить в код на TypeScript модули ColladaLoader (для загрузки 3D-моделей с анимациями формата .dae, например, созданных в бесплатном 3D-редакторе Blender) и OrbitControls (для вращения/приближения/отдаления камеры с помощью мыши вокруг точки в 3D-пространстве)

    src/main.ts

    Javascript
    1
    2
    3
    4
    5
    
    import { ColladaLoader } from "./node_modules/three/examples/jsm/loaders/ColladaLoader";
    import { OrbitControls } from "./node_modules/three/examples/jsm/controls/OrbitControls";
     
    console.log(ColladaLoader);
    console.log(OrbitControls);
    Либо так, если у вас, как у меня, папка с пакетами находится выше по уровню вложенности:

    Javascript
    1
    2
    3
    4
    5
    
    import { ColladaLoader } from "../../../node_modules/three/examples/jsm/loaders/ColladaLoader";
    import { OrbitControls } from "../../../node_modules/three/examples/jsm/controls/OrbitControls";
     
    console.log(ColladaLoader);
    console.log(OrbitControls);
    Запись от 8Observer8 размещена 23.06.2022 в 10:45 8Observer8 вне форума
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru