오디오 폴더의 나머지 부분에서 dibs를 호출하겠습니다 🔈

@mrdoob님 , examples 폴더 내에서 스크립트를 처리하는 방법을 명확히 알려주시겠습니까?

나는 #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 남을까요?

예, Object3D 및 BufferGeometry 에 의존하는 ES5 클래스가 많이 있습니다.

렌더러: https://github.com/mrdoob/three.js/pull/20011

슛, 이것에 대해 놀라운 진전이 있었습니다 🎉

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;
  }
}

현재는 2차를 하고 있는데, 그러고 보니 1차에 가까웠던 의도가 아닐까 싶다.

처음에 이러한 변수를 사용하는 것이 무엇인지 아는 사람이 있습니까?

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* 속성에 대해 읽기 전용 게터를 사용했다는 것을 알아차렸습니다... 아마도 그게 최선일 것입니다!

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을 했다.

또한 이 PR 에 의해 차단되었기 때문에 클래스 필드를 사용할 수 없다는 것을 방금 알았습니다.

더 인기 있는 @rollup/plugin-babel 을 사용하도록 빌드 파이프라인을 업데이트할 수 있습니다.

더 인기 있는 @rollup/plugin-babel을 사용하도록 빌드 파이프라인을 업데이트할 수 있습니다.
원하는 경우 해당 문제를 수정하십시오.

네, PR을 해주시면 좋을 것 같아요 🙏

@marcofugaro , @mrdoob 야! 예, 부탁합니다

안녕하세요 여러분, #20014를 Object.defineProperty 로 업데이트하고 AnimationClip 의 하위 분류도 수정했습니다. 검토할 시간이 있는 사람이 있으면 추가로 감사하겠습니다. 👀 🙇 🙇

괜찮아. 이제 r120 이(가) 출시되었습니다... 누군가 제대로 트리 쉐이크되고 있는지 확인할 수 있습니까?

그것은 나를 위해 작동하는 것 같지만 약간.
webpack이 포함된 번들 파일에 더 이상 ArrowHelper 가 표시되지 않습니다. 하지만 여전히 불필요한 코드가 많이 존재합니다😢

번들 크기는 어떻습니까? 이전과 이후

안녕하세요 여러분, 저는 아이디어가 있어 Shakediff 라는 도구를 사용했습니다. 다음과 같이 실행할 수 있습니다.

$ shakediff builds/three.module.js Color

그러면 Color 를 가져오는 작은 모듈이 생성되고 3으로 묶인 다음 롤업의 메타데이터에서 3의 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님 , examples 폴더 내에서 스크립트를 처리하는 방법을 명확히 알려주시겠습니까?
저는 #19989가 변환을 위해 바로 가는 것을 좋아하지만 그렇게 함으로써 utils/modularize.js는 그 작업을 덮어쓰지 않고 examples/js 폴더에서 더 이상 사용할 수 없다는 것을 깨달았습니다. 이것이 우리가 examples/js를 유지하는 것을 끝내고 examples/jsm만 시작하는 것을 의미합니까?

@mrdoob에 대한 평결은 무엇입니까? 예제를 ES6 클래스로 변환할 수 있도록 jsm을 진실의 소스로 만드는 것이 의미가 있습니까? 아마도 우리는 다른 방향으로의 변환을 지원하도록 utils/demodularize.js를 만들 수 있을까요?

examples/js examples/jsm 는 2020년 12월에 제거됩니다. 그때까지는 폴더의 내용을 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 는 tree-shakeable이 될 것입니다.

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

@marcofugaro 문제 없습니다. 롤업 구성 은 다음과 같습니다.

@marcofugaro 안녕하세요, 저는 shakediff에 웹팩 지원을 추가했습니다... 이 웹팩 구성 이 괜찮아 보이나요? terser는 webpack의 tree-shaking에서 죽은 코드 제거를 담당하기 때문에 이러한 출력에서 ​​일부 변형 아티팩트를 방지하기 어렵습니다. 그러나 공백이 비활성화된 히스토그램 알고리즘을 사용하여 diff를 수행하면 관리할 수 있습니다. 오늘 밤의 빠른 테스트에서 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 불행히도 가까운 장래에 클래스 메서드는 어떤 도구로도 트리를 흔들 수 없습니다. 젠장, 축소조차 할 수 없어!

이는 자바스크립트에서 동적으로 개체 속성에 액세스할 수 있는 것처럼 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이 해당 버전의 fsevent에 종속된 것 같습니다... 아마도 더 높은 것으로 고정할 수 있습니다.

참고로 여기에 Webpack 5의 트리 떨림 개선 사항 에 대한 좋은 정보가 있습니다...

참고로 여기에 Webpack 5의 트리 떨림 개선 사항 에 대한 좋은 정보가 있습니다...

Progress... 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

답변 주셔서 감사합니다. 스레드를 읽었습니다. btw 다른 클래스에서 유형 검사가 필요한 경우 클래스가 출력에 포함되지 않도록 해야 하는 이유를 이해하지 못합니다. 번들된 클래스 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이 있습니다.

내 종속성/extended-in-examples 목록을 다시 컴파일해 볼 수 있습니다.

@DefinitelyMaybe 헤이! 당신의 목록은 큰 도움이 되었습니다. 그리고 @donmccurdy 의 전략은 나에게 의미가 있습니다. 👍 우리가 이미 한 일을 마무리 짓는 것이 가장 좋을 것 같아요. #20070은 private/hidden vars를 ES6으로 마이그레이션하는 전략을 제공할 수 있기 때문에 공격하기에 좋은 PR이 될 것입니다( renderers/webgl 를 ES6으로 마이그레이션하는 데 필요합니다). 모두가 벤치마크를 실행하거나 토론에 참여할 수 있다면 감사하겠습니다. 성능이 좋은지 확인하기만 하면 적절한 옵션이 있다고 생각합니다.

괜찮아,
예를 들어 ES 클래스에 다시 작성하기 위해 일부 PR을 시작할 수 있습니다.
@mrdoob jsm to 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) private class 필드는 어떻습니까?

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() "를 만난 것과 같은 다른 주의 사항이 있을 수 있습니다.

개인 클래스 필드

이것은 진행 중인 토론입니다. 우리가 그것을 사용한다면 우리가 그것을 사용하기까지 시간이 걸릴 것입니다. 내가 지적할 수 있는 문제나 PR이 확실하지 않습니다.

@marcofugaro 아직 클래스 필드로 변경할 수 있는 변수가 있다고 생각합니다. 맞나요?
나는 다음과 같은 것들을 보고 있다:

예, 이제 할 수 있습니다. 그러나 .is* 속성에 대해서는 열거할 수 없고 쓸 수 없어야 하므로 Object.defineProperty(this, ... 를 사용해야 하는 속성에 대해서는 그렇게 할 수 없습니다.

어떻게 다시 확인됩니까? Object.defineProperty(this, ... 대신 static 키워드를 사용할 수 있습니까?

어떻게 다시 확인됩니까? Object.defineProperty(this, ... 대신 static 키워드를 사용할 수 있습니까?

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() {
            ...
        };

    }();

}

IMHO 우리는 개인 클래스 필드를 사용할 수 있고, 이것을 기본적으로 구현하지 않는 특정 이전 브라우저에 대해 이전 패턴으로 롤업/바벨을 변환할 수 있습니다...

IMHO 우리는 개인 클래스 필드를 사용할 수 있고, 이것을 기본적으로 구현하지 않는 특정 이전 브라우저에 대해 이전 패턴으로 롤업/바벨을 변환할 수 있습니다...

나는 이 전략에 동의하지만, 물론 결정은 해당 코드를 유지 관리해야 하는 핵심 유지 관리자에 따라 다릅니다.

시원한. 먼저 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의 구문 생각과 일치하는 것을 출력하지 않을 것이라고 확신합니다 😅

오른쪽으로.

그리고 죄송합니다. 내 두뇌는 어디에... examples 폴더 변환을 시작하려면 병합할 #20527 또는 #20529(또는 기타) 중 하나가 필요합니다. examples/js 는 예측 가능한 미래에 계속 붙어 있습니다. 즉, examples/js 폴더에 클래스를 만지는 것은 절대 아니오입니다. 그것은 IE와의 호환성을 깨뜨릴 것입니다 ... 한숨.

롤업/바벨을 이전 패턴으로 변환

JS PR에 대한 JSM을 통해 생각하고 지원합니다. 일단 결정이 내려지면 examples/jsm 를 목표로 삼을 수 있습니다.

src 에 개인 변수를 추가하는 것은 "이 변수를 가지고 놀지 마세요. 특정 목적이 있습니다"라는 오랜 문제에 대한 좋은 해결책이 되기 때문에 여전히 좋은 생각입니다.

클래스가 있는 examples/js 폴더를 만지는 것은 절대 금지입니다.

죄송합니다. 물론 exemples/jsm 에 대해 이야기하고 있었습니다. exemples/js 는 가까운 장래에 "빌드" 버전이 될 것입니다...

그것은 IE와의 호환성을 깨뜨릴 것입니다 ... 한숨.

뭐??? 2020년에도 Internet Explorer에 대해 이야기하고 있습니까? 이 7년 된 공룡에 대한 WebGL 라이브러리의 호환성에 대해 이야기하고 있습니까? 진지하게 !! 1.4% ...
_(세 명의 사용자가 IE에서 사용할 계획인 경우 수집할 통계 수집기를 라이브러리에 추가해야 함)_

😞 큭큭큭큭큭큭큭큭큭큭큭...

three.js 및 three.min.js 빌드 파일과 $#$ examples/js #$의 모든 파일은 여전히 ​​IE 11과 같은 이전 브라우저를 지원해야 합니다.

작년에 IE 11(#18091)에 대한 지원을 중단해야 하는 PR이 있었지만 여전히 이 브라우저에 의존하는 사용자가 있는 것으로 나타났습니다. 그리고 프로젝트의 현재 정책은 사용자가 ES6에서 ES5로의 변환을 스스로 수행하지 않도록 각 파일을 사용자에게 제공하는 것입니다. 이것은 #20455에서도 논의되었습니다.

프로젝트의 현재 정책은 사용자가 ES6에서 ES5로의 변환을 스스로 수행하지 않도록 해당 파일을 사용자에게 제공하는 것입니다.

좋아, 소스가 현대적인 방식으로 개발될 수 있고 결과 빌드가 읽을 수 있는 것이 아니라 작동하는 것으로 가정하면 해당 정책에는 문제가 없습니다...
트랜스파일러가 그런 추악한 코드를 출력하기 때문입니다!
따라서 src 가 ESnext에 작성되는 데 문제가 없고 빌드가 보기 흉하지만 이 파일을 읽을 수 있고 주석 처리하고 형식이 잘 지정되어야 한다면 exemples/js 에 잠재적인 문제가 될 수 있습니다...

BTW 왜 일부 예는 예이고 주요 핵심 소스가 아닌지 스스로에게 여러 번 묻고 있습니다!?
예: 컨트롤은 일반적으로 있는 그대로 사용되며 선택적 애드온처럼 복사되며 예를 들어 회전하는 큐브 예제와 같이 프로젝트를 작성하기 위해 읽고 영감을 얻는 실제 예제로 사용되지 않습니다...

_(저는 "webgl 회전 큐브"를 검색하여 THREE와 함께 여행을 시작했으며 플랫폼에서 큐브가 움직이는 작은 게임 을 개발하는 1박 코드 마라톤으로 이어지는 그 예 ^^)_

적절한 빌드를 사용할 때 코어에 있는 파일과 예제 디렉토리에 있는 파일은 중요하지 않습니다. 트리 쉐이킹이 제대로 작동하는 한 실제로 필요한 소스 파일만 빌드에 있습니다.

나에게 핵심과 예제의 구분은 이러한 종류의 워크플로가 아직 제공되지 않았던 시대에서 비롯됩니다. 코어를 단일 구성 요소로 완전히 가져와야 했기 때문에 코어는 작고 컴팩트해야 합니다. 가장 _중요한_ 파일만 포함해야 합니다. 어떤 파일이 코어에 포함되는지는 어떤 면에서 케이스 바이 케이스 결정이었습니다.

적절한 빌드를 사용할 때 코어에 있는 파일과 예제 디렉토리에 있는 파일은 중요하지 않습니다. 트리 쉐이킹이 제대로 작동하는 한 실제로 필요한 소스 파일만 빌드에 있습니다.

이것은 ES 모듈 사용자에게만 해당됩니다 ;)