Three.js: Переход к классам ES6

Созданный на 2 авг. 2020  ·  88Комментарии  ·  Источник: mrdoob/three.js

Всем привет,

Я счел уместным создать новую проблему (вместо продолжения № 11552), чтобы в дальнейшем помочь всем отслеживать и обновлять актуальные проблемы и прогресс, связанный с переходом на классы ES6. Это также должно пригодиться для выпуска документа.

Тем, кто хочет помочь, просмотрите список ниже и дайте нам знать, над чем вы хотели бы поработать. Предпочтителен PR для каждого класса, однако некоторые папки можно сделать сразу . Если конкретный файл не может быть преобразован, сделайте пометку в верхней части файла или отправьте мне сообщение со своего PR, и я отмечу это ниже.

Примечания:

  • для Class.prototype.is** используйте Object.defineProperty( this, 'is**', { value: true } );
  • поля класса также доступны при необходимости #20395
  • new this.contructor() != new Foo() ... обсуждение по теме .
  • Отметится после слияния и завершения.

Часть 1: источник

  • [ ] источник

    • [ ] анимация ( #19964, #20014, #20016 )

    • [ ] треки ( #20013 )

    • [x] аудио (#19975, #20003)

    • [ ] камеры ( #20102 )

    • [] ядро ​​(#19976, #19977, #19978, #19984, #20008)

    • [x]дополнительно ( #19979 )

    • [ ] ядро ​​(#20656)



      • Исключить кривую, расширенную в примерах



    • [ ] кривые (#20140)

    • [ ] объекты ( )



      • Используется в examples/objects/MarchingCubes.js , придется подождать. исх. № 20030



    • [x] геометрия (#19994)

    • [x] помощники (#19996)

    • [ ] огни ( #20018 )

    • [ ] погрузчики ( #19985 )

    • Базовый загрузчик еще не может быть выполнен

    • [ ] материалы ( #20100 )

    • [x] математика (#19980, #19997, #20076, #20089)

    • Интерполянты подождут, пока мы решим examples/js

    • [ ] объекты (#20658 )

    • [ ] рендереры (#20101)

    • [ ] webgl (#20070)

    • [ ] webxr (#20038)

    • [x] сцены ( #20007 )

    • [ ] текстуры ( #20009 )

Мы еще не готовы ко второй части. Обсуждение необходимо.

Часть 2: примеры

  • [ ] Примеры

    • [ ] анимация

    • [ ] камеры

    • [ ] элементы управления

    • [ ] кривые

    • [ ] последствия

    • [ ] экспортеры

    • [ ] геометрия

    • [ ] интерактивный

    • [ ] свет

    • [ ] строки

    • [ ] погрузчики

    • [ ] математика

    • [ ] разное

    • [ ] модификаторы

    • [ ] объекты

    • [ ] Постобработка

    • [ ] визуализаторы

    • [ ] шейдеры

Часть 3: Свободные концы и привести в порядок

  • [ ] источник/ядро/Object3D
    ...

Самый полезный комментарий

@ianpurvis отлично! вы используете роллап, верно? не могли бы вы поделиться своим конфигом?

@mrdoob Наконец-то я решил провести небольшое тестирование. Я лично использую webpack, поэтому я провел с ним несколько тестов, мой конфиг такой, если кому интересно .

Я тестировал этот код

import * as THREE from 'three'

console.log(THREE.WebGLRenderer)

0.119.1

0 119 1

0.120.1

0 120 1

Значит, что-то качается, здорово!

При более детальном рассмотрении оказалось, что класса AudioListener нет в комплекте, отличные новости!

Screenshot 2020-09-01 at 16 49 22

Screenshot 2020-09-01 at 16 50 07

Webpack также автоматически удаляет неиспользуемые переменные, указанные @ianpurvis.


После этого я решил протестировать статические методы, определенные вне класса.

Screenshot 2020-09-01 at 16 50 37

и, к сожалению, это делает класс не древовидным

Screenshot 2020-09-01 at 16 51 04


Покопавшись еще немного, я заметил, что классы геометрии вроде DodecahedronGeometry , которые нигде не использовались, все еще были в комплекте.

Screenshot 2020-09-01 at 16 51 29

Screenshot 2020-09-01 at 16 52 08

Позже я обнаружил, что это произошло из-за этого объекта $# Geometries three.module.js в комплекте three.module.js

Screenshot 2020-09-01 at 17 18 32

Который генерируется автоматически при использовании подобных шаблонов в ObjectLoader . Это, вероятно, исчезнет, ​​когда мы сделаем ObjectLoader классом, а src/geometries станет встряхиваемым.

Все 88 Комментарий

Я возьму бабки на остальную часть аудио папки 🔈

привет @mrdoob , не могли бы вы уточнить, как вы хотите, чтобы мы обрабатывали сценарии в папке примеров?

Мне нравится, когда #19989 идет прямо к преобразованию, но я понимаю, что при этом utils/modularize.js больше нельзя использовать в папке examples/js без перезаписи этой работы. Означает ли это конец нашей поддержки examples/js и начало просто examples/jsm ?

редактировать: см. комментарий

Могу ли я работать над остальной частью папки по математике?

Могу ли я работать над остальной частью папки по математике?

Я за то, чтобы ты попробовал. Я помню, как пытался некоторое время назад, но @Mugen87 в итоге отругал меня за это. Краткое изложение этого было проверено на ходу, потому что преобразование всей папки за один раз может привести к трудной поездке. Я уверен, что частичный или даже файл за файлом будет приветствоваться.

@DefinitelyMaybe Я посмотрю, что еще можно перенести под src/animation/

Ницца. Я думаю, что папка почти готова. Может быть, осталось всего src/core/Object3D.js и src/core/BufferGeometry.js ?

Может быть, осталось всего src/core/Object3D.js и src/core/BufferGeometry.js ?

Да, многие классы ES5 зависят от Object3D и BufferGeometry .

Черт, в этом есть невероятный прогресс 🎉

Собираюсь назвать бабки на src/lights . Открыл src/extras и src/renderers в приведенном выше списке, оказалось, что в каждой из них есть пара папок для работы.

Всем привет,

что мы делали в отношении этого шаблона?

foo.prototype = Object.assign( Object.create( bar.prototype ), {
    ...
    isDirectionalLight: true,
    ...
} );

Это сейчас:

class foo extends bar {
  static isDirectionalLight = true;
  constructor(  ) {
    ...
  }
}

или

class foo extends bar {
  constructor(  ) {
    this.isDirectionalLight = true;
  }
}

в настоящее время я делаю второй, но, глядя на него, я бы сказал, что намерение этого могло быть ближе к первому.

кто-нибудь знает, что использовало эти переменные в первую очередь?

class foo extends bar {
  constructor(  ) {
    this.isDirectionalLight = true;
  }
}

☝️ Это правильно. isDirectionalLight — хороший пример, он используется так:

$ git grep 'isDirectionalLight\b' src/ examples/js ':!*.ts'
examples/js/exporters/GLTFExporter.js:                  if ( light.isDirectionalLight ) {
examples/js/exporters/GLTFExporter.js:                  } else if ( object.isDirectionalLight || object.isPointLight || object.isSpotLight ) {
examples/js/renderers/SVGRenderer.js:                   } else if ( light.isDirectionalLight ) {
examples/js/renderers/SVGRenderer.js:                   if ( light.isDirectionalLight ) {
src/lights/DirectionalLight.js: isDirectionalLight: true,
src/renderers/webgl/WebGLLights.js:                     } else if ( light.isDirectionalLight ) {

Тем не менее, может быть прирост производительности за счет сохранения некоторых свойств прототипа...

class foo extends bar {
}
foo.prototype.baz = heavyThing;

Может быть, мы можем рассмотреть их в PR в каждом конкретном случае.

Я попробую src/renderers/webgl 👍 👍

удачи повеселиться. в этом есть что-то новенькое

Привет всем! Я преобразовал src/renderers/webgl . Это было безумно. Я буду продолжать пересматривать все и ждать # 20039, прежде чем я начну продвигать PR.

👍
с нетерпением жду этого

Я заметил, что @yomotsu использовал геттеры только для чтения для свойств is* в математическом PR... Может быть, это лучше всего!

class foo extends bar {
  get isDirectionalLight() {
    return true;
  }
}

хм может быть. Я знаю, что другие пытались местами сделать переменные неизменяемыми. Мне это кажется довольно приличной моделью.

быстрый демонстрационный пример jsfiddle

Похоже, это путь:

foo.prototype.isDirectionalLight = true;

собираюсь изучить src/objects . посмотрю, как далеко я смогу зайти, не сломав ничего.

Папка math была только что завершена.
( Класс интерполяции исключен. )

всем привет,
Я собираюсь отказаться от работы с src/objects , кто-то другой может взяться за это тем временем.

Эй, хорошая работа с этими ребятами! 💪

Только одна проблема: foo.prototype.isDirectionalLight = true; все еще не допускает встряхивания дерева, поскольку класс изменяется на месте.
Также на этом этапе я бы настоятельно рекомендовал больше не трогать прототип, поскольку сейчас мы используем классы, а прототип можно абстрагировать.

А как насчет этого узора? Мне он кажется самым откровенным.

constructor( x = 0, y = 0, z = 0 ) {

  Object.defineProperty( this, 'isVector3', {
    value: true,
    enumerable: false,
    writable: false,
    configurable: false,
  } );

Существует также короткая версия, которая делает то же самое, но немного более неявно.

constructor( x = 0, y = 0, z = 0 ) {

  Object.defineProperty( this, 'isVector3', { value: true } );

@marcofugaro , короткая версия мне нравится 👍

Хорошо, сделал пиар.

Кроме того, я только что заметил, что мы не можем использовать поля класса, потому что мы заблокированы этим PR .

Я могу обновить конвейер сборки, чтобы использовать более популярный @rollup/plugin-babel.

Я могу обновить конвейер сборки, чтобы использовать более популярный @rollup/plugin-babel.
и исправьте эту проблему, если хотите.

Да, было бы здорово, если бы вы сделали пиар 🙏

@marcofugaro , @mrdoob ура ! Да, пожалуйста

Привет всем, быстро сообщаю, что я обновил # 20014 с помощью Object.defineProperty , а также исправил подкласс AnimationClip . Если у кого-то есть время, чтобы просмотреть его, я был бы признателен за дополнительный 👀 🙇 🙇

Хорошо. Теперь, когда r120 отсутствует... может ли кто-нибудь проверить правильность встряхивания дерева?

Кажется, это своего рода работает для меня, но немного.
Я больше не вижу ArrowHelper в моем файле пакета с webpack. но много ненужного кода все еще существует😢

как насчет размера пакета? до и после

Привет всем, у меня возникла идея, и я добавил инструмент под названием Shakediff . Вы можете запустить его следующим образом:

$ shakediff builds/three.module.js Color

Это сгенерирует небольшой модуль, импортирующий Color , объединит его с тремя, а затем создаст diff из трех из метаданных свертки. Вы можете либо работать с подробным diff, либо просто направить его в diffstat , чтобы получить высокий уровень:

$ shakediff build/three.module.js Color | diffstat 
 three.module.js | 2878 --------------------------------------------------------
 1 file changed, 1 insertion(+), 2877 deletions(-)

На данный момент пакета нет, но вы можете установить его из моего репозитория, если хотите попробовать. Обратная связь приветствуется! ✌️

npm -g i ianpurvis/shakediff.git

привет @mrdoob , не могли бы вы уточнить, как вы хотите, чтобы мы обрабатывали сценарии в папке примеров?
Мне нравится, что #19989 идет прямо к преобразованию, но я понимаю, что при этом utils/modularize.js больше нельзя использовать в папке examples/js без перезаписи этой работы. Означает ли это конец поддержки примеров/js и начало только примеров/jsm?

Каков вердикт этому @mrdoob? Имеет ли смысл сделать jsm источником правды, чтобы мы могли конвертировать примеры в классы ES6? Возможно, мы можем сделать utils/demodularize.js для поддержки преобразования в другом направлении?

Папка examples/js будет удалена в декабре 2020 года. До тех пор мы должны оставить папку как есть, не обновляя ее содержимое — или файлы examples/jsm , сгенерированные из ее содержимого — до классов ES6. После этой даты файлы examples/jsm станут источником правды и могут быть обновлены до классов ES6.

Я заметил, что переменные области модуля не удаляются во время встряхивания. Вы можете увидеть поведение этих четырех переменных: build/three.module.js:43059

const _position$3 = new Vector3();
const _quaternion$4 = new Quaternion();
const _scale$2 = new Vector3();
const _orientation$1 = new Vector3();

Похоже, мы должны пометить это чистое специальным комментарием-

const _position = /*@__PURE__*/ new Vector3();

Это работает для всех?

Звучит хорошо для меня 👌

Хорошо, что удаляются еще 144 строки, когда дерево трясется с помощью Color 🥳

Пожалуйста, дайте своим открытым PR /*@__PURE__*/ обращение, когда у вас будет время!

@ianpurvis отлично! вы используете роллап, верно? не могли бы вы поделиться своим конфигом?

@mrdoob Наконец-то я решил провести небольшое тестирование. Я лично использую webpack, поэтому я провел с ним несколько тестов, мой конфиг такой, если кому интересно .

Я тестировал этот код

import * as THREE from 'three'

console.log(THREE.WebGLRenderer)

0.119.1

0 119 1

0.120.1

0 120 1

Значит, что-то качается, здорово!

При более детальном рассмотрении оказалось, что класса AudioListener нет в комплекте, отличные новости!

Screenshot 2020-09-01 at 16 49 22

Screenshot 2020-09-01 at 16 50 07

Webpack также автоматически удаляет неиспользуемые переменные, указанные @ianpurvis.


После этого я решил протестировать статические методы, определенные вне класса.

Screenshot 2020-09-01 at 16 50 37

и, к сожалению, это делает класс не древовидным

Screenshot 2020-09-01 at 16 51 04


Покопавшись еще немного, я заметил, что классы геометрии вроде DodecahedronGeometry , которые нигде не использовались, все еще были в комплекте.

Screenshot 2020-09-01 at 16 51 29

Screenshot 2020-09-01 at 16 52 08

Позже я обнаружил, что это произошло из-за этого объекта $# Geometries three.module.js в комплекте three.module.js

Screenshot 2020-09-01 at 17 18 32

Который генерируется автоматически при использовании подобных шаблонов в ObjectLoader . Это, вероятно, исчезнет, ​​когда мы сделаем ObjectLoader классом, а src/geometries станет встряхиваемым.

@marcofugaro Нет проблем, вот конфиг свертки

@marcofugaro Привет, я добавил поддержку веб-пакета в shakediff ... эта конфигурация веб-пакета кажется вам приемлемой? Поскольку terser отвечает за устранение неработающего кода при встряхивании дерева веб-пакета, трудно предотвратить некоторые артефакты преобразования в этих выходных данных. Но если вы используете алгоритм гистограммы с отключенными пробелами, это управляемо. Судя по быстрому тесту сегодня вечером, webpack, похоже, принимает как /*@__PURE__*/ , так и /*#__PURE__*/ . Я думаю, мы можем стандартизировать одно или другое. Подробнее завтра...

@ianpurvis Я не думаю, что мне разрешено устанавливать shakediff на мою машину...

Screen Shot 2020-09-22 at 9 59 04 AM

В любом случае, я провел простой тест:

import { WebGLRenderer } from './src/renderers/WebGLRenderer.js';
console.log( new WebGLRenderer() );

И заметил, что Geometry не качается деревом. https://github.com/mrdoob/three.js/pull/20394 исправляет это.

Затем я попытался сделать:

import { Vector3 } from './src/math/Vector3.js';
console.log( new Vector3() );

И заметил, что rollup не качает неиспользуемые методы... 😕

@mrdoob , к сожалению, в обозримом будущем методы класса никогда не будут встряхиваться каким-либо инструментом. Черт возьми, они даже не могут быть минимизированы!

Это связано с тем, что в javascript вы можете получить доступ к таким методам, как this['I am a string'] , точно так же, как вы можете получить доступ к динамическим свойствам объекта. По этой причине инструменты не знают заранее, если и как вы собираетесь вызывать метод (может быть this[variable] ).

Это одинаково как для классов ES6, так и для классов функций. Например, в three.min.js методы остаются нетронутыми, как и любое свойство объекта 🙂

И никто не предложил "строгий" режим компоновщика, в котором ожидается, что вы не будете вызывать такие методы, как this['I am a string'] ?

Без понятия 🤷‍♂️

Вот обсуждение этой темы, касающейся свертки: https://github.com/rollup/rollup/issues/349 .

методы класса никогда не будут древовидными с помощью какого-либо инструмента. Черт возьми, они даже не могут быть минимизированы!

Извините, что не по теме, но вы можете заставить минификацию работать, если дадите компилятору подсказку относительно того, что является «публичным» и «частным». Раньше я использовал для этого префикс "_" в методах. См . https://github.com/developit/microbundle/wiki/mangle.json. Но, к сожалению, я также понятия не имею, возможно ли что-то подобное для tree-shaking. 😕

Ух! # 20395 объединено! хороший материал @marcofugaro

Потрясающие новости о вавилоне и геометрии!

@ianpurvis Не думаю, что мне разрешено устанавливать шейкдифф на мою машину...

@mrdoob Хм, похоже, Parcel зависит от этой версии fsevents ... может быть, я могу связать это с чем-то более высоким.

К вашему сведению, хорошая информация здесь об улучшениях встряхивания дерева в Webpack 5...

К вашему сведению, хорошая информация здесь об улучшениях встряхивания дерева в Webpack 5...

Прогресс... Надеюсь, в Rollup это тоже реализовано...

Всем привет,

Каковы цели собственности .is**Classname** и this.type = **Classname** ?
Разве это не остаток старого шаблона псевдокласса?
Почему бы не избавиться от него полностью и не заменить его обычным способом проверки типов?

obj instanceof Vector3  // prefer this one for inheritance
// or
obj.constructor === Vector3  // prefer this for no inheritance

Я имею в виду, что в рамках перехода к классам ES объекты будут иметь правильные типы, которые уже можно проверить...

Раньше библиотека использовала obj instanceof Vector3 .
Но Рич Харрис реализовал и изменил все проверки на is* , чтобы разрешить встряхивание деревьев: #9310

Раньше библиотека использовала obj instanceof Vector3 .
Но Рич Харрис реализовал и изменил все проверки на is* , чтобы разрешить встряхивание деревьев: #9310

Спасибо за ответ, я прочитал ветку, кстати, я не понимаю, почему нужно избегать того, чтобы класс был в выводе, если какой-то другой класс должен проверить его тип... Я имею в виду, если связанный класс X нуждается чтобы знать, что объект является классом B, тогда класс B используется (по крайней мере, для создания указанного объекта каким-то образом) и должен быть связан, не так ли?

Например, WebGLRenderer должен проверить, является ли отображаемая им геометрия BufferGeometry или Geometry, но он никогда не создает экземпляры Geometry. Большинство приложений three.js должны использовать только BufferGeometry, поэтому мы хотим, чтобы древовидная тряска исключала Geometry (и ее подклассы) из пакета, когда это возможно.

В визуальном плане...

Этот шаблон заставляет WebGLRenderer всегда включать Geometry при объединении:

import { Geometry } from '../core/Geometry.js';
import { BufferGeometry } from '../core/BufferGeometry.js';

if ( geometry instanceof Geometry ) {
} else if ( geometry instanceof BufferGeometry ) {
}

В этом шаблоне нет:

if ( geometry.isGeometry === true ) {
} else if ( geometry.isBufferGeometry === true ) {
}

всем привет,

учитывая это , что мы думаем о том, чтобы двигаться дальше?

Я не думаю, что есть какие-либо изменения, пока. Все, что (1) не находится в examples/js и (2) не расширено чем-то в examples/js , может быть преобразовано в классы ES6. Если этот процесс подходит к концу, мы должны решить, когда начать перевод examples/js на классы.

По памяти и после беглого просмотра мы сделали довольно много, и еще есть готовые PR.

Я мог бы попробовать перекомпилировать список зависимостей/расширенных примеров.

@DefinitelyMaybe Привет! Звучит здорово, ваш список был очень полезным. И стратегия @donmccurdy мне понятна . 👍 Думаю, будет лучше подвести итоги уже проделанной работы. #20070 был бы отличным PR для атаки, потому что он может дать стратегию для миграции частных/скрытых переменных на ES6 (нам это нужно для миграции renderers/webgl на ES6). Если каждый может запустить тесты или присоединиться к обсуждению, я был бы признателен. Я думаю, у нас есть несколько достойных вариантов, просто нужно убедиться, что производительность хорошая.

Хорошо,
Я могу начать PR для примеров, переписанных для классов ES...
@mrdoob это проблема для вас, когда вы выполняете скрипт jsm to js или нет? (Я думаю, что нет, но скажите мне, если вы предпочитаете, чтобы мы подождали)

Перед преобразованием кода примера в классы #20527, #20529 или другое решение следует сначала объединить. За исключением кода, который соответствует условиям, указанным в https://github.com/mrdoob/three.js/issues/19986#issuecomment -718308451.

@DefinitelyMaybe Вы сказали в 1-м комментарии :

  • использовать поля класса

1) Означает ли это, что мы можем использовать поля класса для всего?
Вот так :

class Light extends Object3D {

    type = 'Light';
    isLight = true;

    color = new Color;
    intensity = 1;

    constructor(color, intensity = 1) {

        super();

        this.color = new Color(color);
        this.intensity = intensity;

    }

    copy() {
        ...
    }
}

... или это только для собственности .is* ?

Итак, 2) как насчет пустых конструкторов? Спецификация ES2015 говорит, что конструкторы только с вызовом super() являются неявными, если они не указаны, поэтому некоторые дочерние классы могут быть действительно проще определены:

class MapControls extends OrbitControls {

    screenSpacePanning = false; // pan orthogonal to world-space direction camera.up

    mouseButtons = { LEFT: MOUSE.PAN, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.ROTATE };

    touches = { ONE: TOUCH.PAN, TWO: TOUCH.DOLLY_ROTATE };

}

И 3) как насчет полей частного класса?

class OrbitControls extends EventDispatcher {
    ...

    #offset = new Vector3();

    // so camera.up is the orbit axis
    #quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) ); <= this will go in constructor because of object.up
    #quatInverse = this.#quat.clone().inverse();

    #lastPosition = new Vector3();
    #lastQuaternion = new Quaternion();

    #twoPI = 2 * Math.PI;

    update() {
        ... ( no more closure and return function here )
    }

}

Последний Chrome изначально поддерживает как общедоступные, так и частные поля класса...

20395

Первый ключ — пройти все испытания.

Сначала вы столкнетесь с меньшими проблемами, если будете меньше менять.

@marcofugaro Я считаю, что есть еще некоторые переменные, которые можно преобразовать в поля класса, верно?
Я смотрю на такие вещи, как:

class EdgesGeometry extends BufferGeometry {

    constructor( geometry, thresholdAngle ) {

        super();

        this.type = 'EdgesGeometry';

изменился на:

class EdgesGeometry extends BufferGeometry {

    type = 'EdgesGeometry';

    constructor( geometry, thresholdAngle ) {

        super();

Вполне вероятно, что мы столкнемся с некоторыми другими предостережениями в этом месте, например, как я наткнулся на « new this.contructor() != new Foo() ».

поля частного класса

это постоянное обсуждение. Пройдет некоторое время, прежде чем мы его используем, если мы его используем. Я не уверен в проблеме или рекламе, на которую я могу указать вам.

@marcofugaro Я считаю, что есть еще некоторые переменные, которые можно преобразовать в поля класса, верно?
Я смотрю на такие вещи, как:

Да, это можно сделать сейчас. Однако мы не можем сделать это для свойств .is* , поскольку они должны быть неперечислимыми и недоступными для записи, для которых мы должны использовать Object.defineProperty(this, ... .

как еще раз проверить? можно ли использовать ключевое слово static вместо Object.defineProperty(this, ... ?

как еще раз проверить? можно ли использовать ключевое слово static вместо Object.defineProperty(this, ... ?

Я так не думаю, потому что obj.is* должны быть в экземплярах, а не в самом классе...

Я не уверен, что именно транспилирует babel в текущей конфигурации, но мы можем использовать декораторы, чтобы установить поле класса как неперечислимое/недоступное для записи:

import { unwrittable, unenumerable } from 'some/decorator/helpers.js'

class Foo {
    @unwrittable<strong i="12">@unenumerable</strong>
    isFoo = true;
}

@DefinitelyMaybe Свойства static отличаются, они недоступны из экземпляра, а не из самого класса.

class Test {
  static staticProp = true

  constructor() {
    Object.defineProperty(this, 'definedProp', { value: true })
  }
}
const test = new Test()

console.log(test.staticProp, test.definedProp)

результат:

undefined true


Редактировать: неважно, что я сказал...
да, да.

Моя главная мысль заключается в том, что если бы мы изменили код, проверяющий это свойство, мы могли бы перейти от:

class Test {
  constructor() {
    Object.defineProperty(this, 'definedProp', { value: true })
  }
}

к

class Test {
  static definedProp = true
  constructor() {
  }
}

Поэтому мне было интересно, где и почему происходит эта проверка и можем ли мы ее изменить.

@DefinitelyMaybe Проблема заключается в получении информации о типе экземпляра. Итак, если вы можете получить доступ к классу экземпляра, чтобы получить его статическую опору, то зачем иметь статическую опору? У вас уже есть название класса...

obj.constructor.isFoo == true
obj.constructor.name == 'Foo'

Редактировать: написав это, я мог понять, что наличие нескольких .is* может быть полезно для тестирования в каждой цепочке наследования, наконец, по сравнению только с одним окончательным именем класса...

obj.constructor.isFoo || obj.constructor.isBar || obj.constructor.isBaz

Edit2: да, наконец, то же самое может быть достигнуто с именами классов, но их сложнее проверить...

let types = getInheritanceNames(obj) // looping each .constructor.prototype.constructor.name
types.contains( 'Foo' ) || types.contains( 'Bar' ) || types.contains( 'Baz' ) 

из экземпляра

ой. перечитайте тот. да, неважно, что я говорил.

if ( scope.object.isPerspectiveCamera ) {
...
}
if ( geometry.isBufferGeometry ) {
...
}
if ( material.isShaderMaterial ) {
...
}

правильно. Две вещи.

  • Что у нас осталось?

мы должны решить, когда начать переключать examples/js на классы.

  • Приближаемся к тому, чтобы обсудить это, чтобы двигаться дальше.

Я не знаю, ждать ли нам #20527 или #20529, потому что оба они будут пытаться воссоздать examples/js в его текущей форме, а это не то, к чему мы стремимся. Мое первоначальное предложение — начать конвертировать examples/js как есть. Вопрос в том, какие проблемы нас ждут...

Я также хотел повторить то, что недавно сказал @mrdoob

Я бы не хотел заставлять новичков узнавать о полифиллах или упаковщиках, чтобы визуализировать свой первый куб.

Как человек, который работал с модулями в последнее время, рабочий процесс ясен, и я понимаю различные концепции, необходимые для того, чтобы что-то заработало. Нам не нужны упаковщики и полифиллы, но нам нужно будет настроить первоначальное описание Three.js.

Кроме того, возможно, добавление REPL , но предназначенное для Three.js, могло бы помочь в этой области? Пример стройности

Нам также нужно будет уточнить, как заменить некоторые неклассовые шаблоны, такие как:

function Foo() {

    this.update = function () {

        var priv = 'foo'

        return function update() {
            ...
        };

    }();

}

ИМХО, мы могли бы использовать поля частного класса и сделать сборку/бабеля транспилируемой в старый шаблон для определенного старого браузера, который не реализует это изначально...

ИМХО, мы могли бы использовать поля частного класса и сделать сборку/бабеля транспилируемой в старый шаблон для определенного старого браузера, который не реализует это изначально...

Я согласен с этой стратегией, но решение, конечно же, зависит от основных сопровождающих, которые должны будут поддерживать этот код.

здорово. Это может быть идея сначала показать это в src , т.е. найти такой же странный шаблон, как тот, что @devingfx описал в src , сделать PR, который вместо этого использует частные переменные, и показать, что делает Babel. с этим.

есть предложения по какому сценарию?

поисковые запросы: internal , private , readonly 👀

Подождите, все ли переменные _* должны были быть закрытыми?

...

Слон в этой комнате может стоить src/renderers/WebGLRenderer.js

Как насчет WebGLAnimation, это хороший небольшой класс... https://github.com/mrdoob/three.js/pull/20070

есть предложения по какому сценарию?

Я сосредоточился на exemples/js и нашел это на OrbitControls...

покажите, что с ним делает Babel.

Я почти уверен, что он не выведет ничего, соответствующего синтаксису mrDoob 😅

направо.

и упс. Где мой мозг... нам понадобится один из # 20527 или # 20529 (или другой) для слияния, чтобы начать преобразование папки examples . examples/js останется в обозримом будущем, а это значит, что трогать папку examples/js с классами категорически нельзя. это нарушило бы совместимость с IE... вздох.

сделать перенос / вавилон транспилировать по старому шаблону

Угадайте, как он продумывает и поддерживает эти JSM для JS PR. Мы можем нацелиться на examples/jsm , как только будет принято решение.

Добавление частных переменных в src по-прежнему является хорошей идеей, так как это было бы хорошим решением давней проблемы «пожалуйста, не играйте с этими переменными, у них есть конкретная цель».

трогать папку examples/js с классами — категорически нет.

Ой, мой плохой, я говорил о том, чтобы копаться в exemples/jsm , конечно, exemples/js будет "встроенной" версией в ближайшем будущем...

это нарушило бы совместимость с IE... вздох.

Что??? Мы все еще говорим об Internet Explorer в 2020 году? Мы говорим о совместимости библиотеки WebGL с этим 7-летним динозавром? Шутки в сторону !! 1,4% ...
_ (мы должны добавить сборщик статистики в библиотеку, чтобы собирать, планирует ли какой-либо ТРИ пользователя использовать под IE)_

😞 Кстати, для этого и существует Babel...

Файлы сборки three.js и three.min.js , а также все файлы в examples/js должны по-прежнему поддерживать более старые браузеры, такие как IE 11.

В прошлом году был PR, который должен прекратить поддержку IE 11 (#18091), но оказалось, что есть еще пользователи, полагающиеся на этот браузер. Текущая политика проекта заключается в предоставлении пользователям соответствующих файлов, чтобы они не выполняли преобразование ES6 в ES5 самостоятельно. Это также обсуждалось в #20455.

текущая политика проекта заключается в предоставлении пользователю соответствующих файлов, чтобы они не выполняли преобразование ES6 в ES5 самостоятельно.

Хорошо, никаких проблем с этой политикой, если исходный код может быть разработан современным способом, и если полученные сборки не должны быть читабельными, а просто рабочими...
Потому что транспиляторы выводят такой уродливый код!
Таким образом, я не вижу проблем с тем, что src пишется в ESnext, а сборка выглядит уродливо, НО это потенциальная проблема с exemples/js , если эти файлы должны быть читабельны, прокомментированы и правильно сформированы...

Кстати, я несколько раз спрашиваю себя, почему некоторые примеры являются примерами, а не основными источниками ядра!?
Пример: элементы управления обычно используются как есть, копируются как дополнительные дополнения и не используются в качестве реального примера, который вы читаете и черпаете вдохновение для написания своих проектов, например, пример вращающегося куба...

_(Я начал свое путешествие с THREE с поиска: "webgl вращающийся куб" и его пример привел к марафону кода на 1 ночь, разрабатывая небольшую игру с кубом, движущимся по платформам ^^)_

При использовании правильной сборки не имеет значения, какие файлы находятся в ядре, а какие в каталоге примеров. Пока встряхивание дерева работает правильно, в вашей сборке есть только те исходные файлы, которые действительно необходимы.

Для меня различие между ядром и примерами исходит из того времени, когда такой рабочий процесс еще не был доступен. Ядро должно быть маленьким и компактным, так как вам пришлось полностью импортировать его как один компонент. Должны быть включены только самые _важные_ файлы. Какие файлы оказались в ядре, в некотором смысле решалось индивидуально.

При использовании правильной сборки не имеет значения, какие файлы находятся в ядре, а какие в каталоге примеров. Пока встряхивание дерева работает правильно, в вашей сборке есть только те исходные файлы, которые действительно необходимы.

Это верно только для пользователей модулей ES ;)

Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

Bandit picture Bandit  ·  3Комментарии

seep picture seep  ·  3Комментарии

makc picture makc  ·  3Комментарии

akshaysrin picture akshaysrin  ·  3Комментарии

fuzihaofzh picture fuzihaofzh  ·  3Комментарии