|
|
@@ -2,15 +2,14 @@ Title: Three.js OffscreenCanvas
|
|
|
Description: Использование three.js в воркере
|
|
|
TOC: Использование OffscreenCanvas в воркере
|
|
|
|
|
|
-[`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)
|
|
|
- - это относительно новая функция браузера, которая в настоящее время доступна только в Chrome,
|
|
|
+[`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) - это относительно новая функция браузера, которая в настоящее время доступна только в Chrome,
|
|
|
но, очевидно, будет доступна и в других браузерах. `OffscreenCanvas` позволяет веб-воркеру выполнять
|
|
|
рендеринг на холст. Это способ переложить тяжелую работу, такую как рендеринг сложной 3D-сцены, на веб-воркера, чтобы не замедлить скорость отклика браузера.
|
|
|
Это также означает, что данные загружаются и анализируются в воркере, поэтому возможно меньше мусора во время загрузки страницы.
|
|
|
|
|
|
Начать использовать его довольно просто. Давайте разберём пример 3 вращающихся кубов из [статьи об отзывчивости](threejs-responsive.html).
|
|
|
|
|
|
-Обычно у рабочих есть свой код, разделенный в другой файл сценария. Для большинства примеров на этом сайте скрипты встроены в HTML-файл страницы, на которой они находятся.
|
|
|
+Обычно у воркера есть свой код, разделенный в другой файл сценария. Для большинства примеров на этом сайте скрипты встроены в HTML-файл страницы, на которой они находятся.
|
|
|
|
|
|
В нашем случае мы создадим файл с именем `offscreencanvas-cubes.js` и скопируем в него весь JavaScript из [адаптивного примера](threejs-responsive.html). Затем мы внесем изменения, необходимые для его работы в воркере.
|
|
|
|
|
|
@@ -27,7 +26,7 @@ function main() {
|
|
|
```
|
|
|
|
|
|
Затем мы можем запустить наш воркер с `new Worker(pathToScript, {type: 'module'})`.
|
|
|
-и передать ему закадровый объект.
|
|
|
+и передать ему `offscreen`.
|
|
|
|
|
|
|
|
|
```js
|
|
|
@@ -50,12 +49,12 @@ main();
|
|
|
Эти объекты не будут клонированы. Вместо этого они будут перенесены и перестанут существовать на главной странице.
|
|
|
Прекращение существования - это, вероятно, неправильное описание, скорее они кастрированы.
|
|
|
Вместо клонирования можно передавать только определенные типы объектов.
|
|
|
-Они включают `OffscreenCanvas`, поэтому после переноса закадрового объекта обратно на главную страницу он бесполезен.
|
|
|
+Они включают `OffscreenCanvas`, поэтому после переноса `offscreen` обратно на главную страницу он бесполезен.
|
|
|
|
|
|
|
|
|
Воркеры получают сообщения от своего обработчика сообщений `onmessage`. Объект,
|
|
|
который мы передали в `postMessage`, прибывает в объект `event.data`, переданный
|
|
|
-обработчику `onmessage` на воркере. В приведенном выше коде объявляется `type: 'main' в объекте, который он передает воркеру. Мы создадим обработчик,
|
|
|
+обработчику `onmessage` на воркере. В приведенном выше коде объявляется `type: 'main'` в объекте, который он передает воркеру. Мы создадим обработчик,
|
|
|
который на основе типа будет вызывать другую функцию в воркере. Затем мы можем добавлять функции по мере необходимости и легко вызывать их с главной страницы.
|
|
|
|
|
|
```js
|
|
|
@@ -259,7 +258,7 @@ function main() {
|
|
|
`offscreencanvas-worker-cubes.js`
|
|
|
|
|
|
`shared-cubes.js` и `offscreencanvas-worker-cubes.js` по сути являются разделением нашего
|
|
|
-предыдущего файла `offscreencanvas-cubes.js`. Мы переименовали main в init, поскольку у нас уже есть main в нашем HTML-файле.
|
|
|
+предыдущего файла `offscreencanvas-cubes.js`. Сначала мы копируем весь файл `offscreencanvas-cubes.js` в `shared-cube.js`. Затем мы переименовываем `main` в `init`, так как у нас уже есть `main` в нашем HTML-файле, и нам нужно экспортировать `init` и состояние
|
|
|
|
|
|
```js
|
|
|
import * as THREE from './resources/threejs/r119/build/three.module.js';
|
|
|
@@ -330,7 +329,7 @@ self.onmessage = function(e) {
|
|
|
<script type="module">
|
|
|
+import {init, state} from './shared-cubes.js';
|
|
|
```
|
|
|
-We can remove the HTML and CSS we added previously
|
|
|
+Мы можем удалить HTML и CSS, которые мы добавили ранее
|
|
|
|
|
|
```html
|
|
|
<body>
|
|
|
@@ -341,7 +340,7 @@ We can remove the HTML and CSS we added previously
|
|
|
</body>
|
|
|
```
|
|
|
|
|
|
-and some CSS for that
|
|
|
+и немного CSS для этого
|
|
|
|
|
|
```css
|
|
|
-#noOffscreenCanvas {
|
vanzo16