- Установите редактор кода VSCode и Node.js
- Создайте пустую папку для проекта и перейдите в неё с помощью терминала
- Введите в терминале команду: code . (не забудьте добавить точку, эта команда запустит VSCode в текущей директории)
- Откройте терминал в VSCode (в меню: "View" > "Terminal" (или Ctrl+`)) и установите глобально пакеты Rollup и http-server для этого введите в терминале: npm i -g rollup http-server
- Создайте в VSCode две папки: public и src
- В папке public создайте файл 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
24
25
26
27
28
29
| <!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 async src="https://unpkg.com/es-module-shims@1.5.5/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.141.0/build/three.module.js",
"collada-loader": "https://unpkg.com/three@0.141.0/examples/jsm/loaders/ColladaLoader.js",
"orbit-controls": "https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js",
"cannon-es": "https://cdn.jsdelivr.net/npm/cannon-es@0.19.0/dist/cannon-es.js"
}
}
</script>
<script type="module" src="js/bundle.js"></script>
</body>
</html> |
|
- В папке src создайте файл main.js:
| Javascript | 1
2
3
4
5
6
7
8
9
10
11
12
| import * as THREE from "three";
import * as CANNON from "cannon-es";
import { ColladaLoader } from "collada-loader";
import { OrbitControls } from "orbit-controls";
const vec = new THREE.Vector3(1, 2, 3);
console.log(vec);
const vec2 = new CANNON.Vec3(3, 3, 3);
console.log(vec2);
console.log(ColladaLoader);
console.log(OrbitControls); |
|
- В корне проекта создайте файл rollup.config.js:
| Javascript | 1
2
3
4
5
6
| export default {
input: "./src/main.js",
output: {
file: "public/js/bundle.js"
}
} |
|
- Введите в терминале команду: rollup -cmw (при сохранении изменений в коде будет автоматически создаваться bundle.js)
- Откройте ещё один терминал в VSCode, для этого нажмите кнопку + (плюс) в правом верхнем углу текущего терминала
- В новом терминале введите команду: http-server -c-1
- Перейдите в браузер и введите адрес: localhost:8080
- Откройте консоль браузера, для этого, например, в Chrome нужно нажать сочетание клавиш: Ctrl+Shift+J. В консоли браузера отобразится результат выполнения программы
- Для того, чтобы собрать в релиз нужно в первом терминале остановить выполнение rollup (нажать Ctrl+C) и ввести команду: rollup -c
|
Категории блога
Локальные категории
