我会在音频文件夹的其余部分调用 dibs 🔈

嘿@mrdoob ，您能否说明您希望我们如何处理示例文件夹中的脚本？

我喜欢 #19989 直接进行转换，但我意识到这样做utils/modularize.js不能再用于examples/js文件夹而不覆盖该工作。 这是否标志着我们维护examples/js的结束和examples/jsm的开始？

编辑：见评论

我可以处理数学文件夹的其余部分吗？

我可以处理数学文件夹的其余部分吗？

我完全赞成你试一试。 我记得不久前尝试过，但@Mugen87最终告诉我不要这样做。 对此的快速总结是您进行时的测试，因为一次转换整个文件夹可能会让您自己陷入困境。 我敢肯定，部分甚至逐个文件都会受到欢迎。

@DefinitelyMaybe我会看看还有什么可以在src/animation/下迁移

src/core的一部分： https ://github.com/mrdoob/three.js/pull/20008

好的。 我认为该文件夹几乎完成了。 可能只剩下src/core/Object3D.js和src/core/BufferGeometry.js了吗？

可能只剩下src/core/Object3D.js和src/core/BufferGeometry.js了吗？

是的，有很多 ES5 类依赖于Object3D和BufferGeometry 。

渲染器： https ://github.com/mrdoob/three.js/pull/20011

拍摄，这方面取得了一些惊人的进展🎉

将在src/lights上调用 dibs。 打开上面列表中的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出手 👍 👍

祝你好运，玩得开心。 那个有相当多的事情发生

webxr： https ://github.com/mrdoob/three.js/pull/20038

大家好-我已经转换了src/renderers/webgl 。 这太疯狂了。 在开始推送 PR 之前，我将继续审查所有内容并等待 #20039。

👍
期待它

我注意到@yomotsu在数学 PR 中对is*属性使用了只读 getter ...也许这是最好的！

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

嗯，可能是。 我知道其他人已经尝试过使变量不可更改。 这在我看来是一个相当不错的模式。

快速 jsfiddle 展示案例

似乎这是要走的路：

foo.prototype.isDirectionalLight = true;

将调查src/objects 。 看看我能在不破坏东西的情况下走多远。

数学文件夹刚刚完成。
（不包括插值类。 ）

大家好，
我将撤回通过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耶！ 是的，请

大家好，快速提醒一下，我已经用Object.defineProperty更新了 #20014 并且还修复了AnimationClip的子类化。 如果有人有时间审查它，我会很感激额外的👀🙇🙇

好的。 现在r120已经出局了……有人可以检查事情是否正确地摇晃了吗？

似乎它有点适合我，但有点。
我在 webpack 的捆绑文件中不再看到ArrowHelper 。 但是仍然存在许多不必要的代码😢

捆绑大小如何？ 之前和之后

大家好，我有一个想法并添加了一个名为Shakediff的工具。 你可以像这样运行它：

$ shakediff builds/three.module.js Color

这将生成一个导入Color的小模块，将其与三个捆绑在一起，然后从汇总的元数据创建三个的差异。 您可以使用详细的差异，也可以将其通过管道传输到diffstat以获得高水平：

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

现在还没有包，但是如果你想试试的话，你可以从我的 repo 安装它。 反馈赞赏！ ✌️

npm -g i ianpurvis/shakediff.git

嘿@mrdoob ，您能否说明您希望我们如何处理示例文件夹中的脚本？
我喜欢 #19989 直接进行转换，但我意识到这样做 utils/modularize.js 不能再用于示例/js 文件夹而不覆盖该工作。 这是否标志着我们维护示例/js 的结束以及仅示例/jsm 的开始？

这个@mrdoob的判决是什么？ 让 jsm 成为事实的来源以便我们可以将示例转换为 ES6 类是否有意义？ 也许我们可以让 utils/demodularize.js 支持另一个方向的转换？

examples/js文件夹将在 2020 年 12 月被删除。在此之前，我们应该保持该文件夹不变，而不将其内容（或从其内容生成的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();

这对每个人都有效吗？

对我来说听起来不错👌

很好，当用Color摇树时，它又删除了 144 行🥳

请大家在有空的时候给你的公开 PR 以/*@__PURE__*/的待遇！

@ianpurvis太棒了！ 你在使用汇总，对吗？ 你能分享你的配置吗？

@mrdoob我终于有时间做一些测试。 我个人使用 webpack，所以我用它做了一些测试，如果有人感兴趣，我的配置是这样的。

我测试了这段代码

import * as THREE from 'three'

console.log(THREE.WebGLRenderer)

0.119.1

0.120.1

所以有些东西正在摇摇欲坠，太棒了！

仔细研究一下，似乎AudioListener类不在捆绑包中，好消息！

Webpack 还会自动删除 @ianpurvis 指出的未使用变量。

在此之后，我决定测试在类之外定义的静态方法

不幸的是，这使得类不可摇树

在进行了更多挖掘之后，我注意到像DodecahedronGeometry这样的几何类，它没有在任何地方使用，仍然在包中

后来我发现，这是由于three.module.js包中的这个Geometries对象

在 ObjectLoader 中使用这样的模式时会自动生成。 当我们将ObjectLoader设为一个类时，这可能会消失，并且src/geometries将是可摇树的。

@marcofugaro https://github.com/mrdoob/three.js/pull/20239

@marcofugaro没问题，这是汇总配置

@marcofugaro嗨，我向shakediff 添加了webpack 支持......这个webpack 配置对你来说还好吗？ 由于 terser 负责在 webpack 的 tree-shaking 中消除死代码，因此很难防止在这些输出中出现一些转换伪影。 但是，如果您使用禁用空白的直方图算法进行比较，则它是可管理的。 从今晚的快速测试来看，webpack 似乎同时接受了/*@__PURE__*/和/*#__PURE__*/ 。 我认为我们可以对其中一个进行标准化。 明天更...

@ianpurvis我不认为我可以在我的机器上安装shakediff ......

无论如何，我做了一个简单的测试：

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() );

并注意到汇总不会摇树未使用的方法......😕

@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。 但是，不幸的是，我也不知道是否有类似的东西可以用于摇树。 😕

哇！ 第20395章 合并！ 好东西@marcofugaro

关于通天塔和几何的好消息！

@ianpurvis我不认为我可以在我的机器上安装shakediff ...

@mrdoob嗯，看起来 Parcel 依赖于那个版本的 fsevents ......也许我可以把它固定到更高的东西上。

仅供参考，这里有关于 Webpack 5 中的tree-shaking 改进的好信息......

仅供参考，这里有关于 Webpack 5 中的tree-shaking 改进的好信息......

进展……我希望 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 。
但是 Rich Harris 实施并将所有检查更改为is*以允许摇树：#9310

图书馆以前用过obj instanceof Vector3 。
但是 Rich Harris 实施并将所有检查更改为is*以允许摇树：#9310

感谢您的回答，我已阅读该线程，顺便说一句，如果其他类需要对它进行类型检查，为什么必须避免一个类出现在输出中......我的意思是，如果捆绑类 X 需要要知道一个对象是 B 类，然后使用 B 类（至少以某种方式创建所述对象）并且必须捆绑，不是吗？

例如，WebGLRenderer 需要检查它渲染的几何图形是 BufferGeometry 还是 Geometry，但它从不创建 Geometry 实例。 大多数 three.js 应用程序应该只使用 BufferGeometry，因此我们希望在可能的情况下通过 tree-shaking 从包中消除 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 到 js 脚本有问题？ （我想不是，但请告诉我您是否希望我们等待）

在将示例代码转换为类之前，应先合并#20527、#20529 或不同的解决方案。 除了满足https://github.com/mrdoob/three.js/issues/19986#issuecomment -718308451 中提到的条件的代码。

@DefinitelyMaybe你在第一条评论中说：

• 使用类字段

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最近所说的话

我讨厌强迫新手学习 polyfills 或 bundlers 来渲染他们的第一个立方体。

作为最近一段时间一直在使用模块的人，工作流程很清楚，我了解使某些东西正常工作所需的各种概念。 我们不需要打包程序和 polyfill，但我们需要调整 Three.js 最初的描述方式。

此外，也许添加一个REPL但适用于 Three.js 可以在这方面有所帮助？ 一个例子是苗条的

我们还需要阐明如何替换一些非类模式，例如：

function Foo() {

    this.update = function () {

        var priv = 'foo'

        return function update() {
            ...
        };

    }();

}

恕我直言，我们可以使用私有类字段，并让 rollup/babel 转换为旧模式，因为某些旧浏览器不会原生实现这一点......

恕我直言，我们可以使用私有类字段，并让 rollup/babel 转换为旧模式，因为某些旧浏览器不会原生实现这一点......

我同意这个策略，但这个决定当然取决于需要维护该代码的核心维护者。

凉爽的。 首先在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 的兼容性...叹息。

使 rollup/babel 转换为旧模式

猜测它的想法并支持那些 JSM 到 JS PR。 一旦做出决定，我们就可以瞄准examples/jsm 。

将私有变量添加到src仍然是一个好主意，因为它可以很好地解决长期存在的问题“请不要使用这些变量，它们有特定目的”

用类接触examples/js文件夹是绝对不行的。

哎呀，我的错，我在谈论挖掘exemples/jsm当然， exemples/js将在不久的将来成为“内置”版本......

那会破坏与 IE 的兼容性...叹息。

什么？？？ 我们还在谈论 2020 年的 Internet Explorer 吗？ 我们是在谈论这个 7 岁恐龙的 WebGL 库的兼容性吗？ 严重地 ！！ 1.4% ...
_（如果有三个用户计划在 IE 下使用，我们应该在 lib 中添加一个统计收集器来收集）_

😞 顺便说一句，这就是 babel 存在的原因......

构建文件three.js和three.min.js以及examples/js中的所有文件仍应支持旧版浏览器，例如 IE 11。

去年有一个 PR 应该停止对 IE 11 (#18091) 的支持，但事实证明仍然有用户依赖这个浏览器。 并且该项目目前的政策是为用户提供各自的文件，这样他们就不会自己执行 ES6 到 ES5 的转换。 这也在#20455 中进行了讨论。

该项目目前的政策是为用户提供各自的文件，这样他们就不会自己执行 ES6 到 ES5 的转换。

好的，如果可以以现代方式开发源代码，并且生成的构建不应该是可读的，而只是正常工作，那么该策略就没有问题......
因为转译器输出了如此丑陋的代码！
所以我认为在 ESnext 中编写src没有问题，并且构建起来很丑陋，但是如果这个文件应该是可读的、注释的和格式良好的，那么exemples/js是一个潜在的问题......

顺便说一句，我多次问自己为什么有些例子是例子而不是主要的核心来源！？
示例：控件通常按原样使用，像可选插件一样复制，而不是用作您阅读并从中汲取灵感来编写项目的真实示例，例如旋转立方体示例...

_（我通过搜索开始了我的旅程三：“webgl 旋转立方体”和它的一个例子导致了一个 1 晚代码马拉松开发一个小游戏，一个立方体在平台上移动^^）_

当使用正确的构建时，核心中的文件和示例目录中的文件无关紧要。 只要摇树正常工作，您的构建中就只有实际需要的源文件。

对我来说，核心和示例的区别来自于这种工作流还不可用的时代。 核心应该小而紧凑，因为您必须将其完全作为单个组件导入。 只应包括最重要的文件。 什么文件最终进入核心在某种意义上是一个个案决定。

当使用正确的构建时，核心中的文件和示例目录中的文件无关紧要。 只要摇树正常工作，您的构建中就只有实际需要的源文件。

这仅适用于 ES 模块用户；）