Saya akan memanggil dibs di folder audio lainnya

hey @mrdoob , bisakah Anda menjelaskan bagaimana Anda ingin kami menangani skrip di dalam folder contoh?

Saya menyukai #19989 langsung untuk konversi tetapi saya menyadari dalam melakukannya utils/modularize.js tidak dapat lagi digunakan pada folder examples/js tanpa menimpa pekerjaan itu. Apakah ini menandai akhir dari kita mempertahankan examples/js dan awal dari hanya examples/jsm ?

edit: lihat komentar

Bisakah saya mengerjakan sisa folder matematika?

Bisakah saya mengerjakan sisa folder matematika?

Saya semua untuk Anda mencobanya. Saya ingat mencoba beberapa waktu yang lalu tetapi @Mugen87 akhirnya menyuruh saya untuk itu. Ringkasan cepat itu adalah tes saat Anda pergi karena mengonversi seluruh folder dalam sekali jalan mungkin menyiapkan diri Anda untuk perjalanan yang sulit. Sebagian, atau bahkan file demi file, saya yakin akan diterima.

@PastiMungkin saya akan melihat apa lagi yang bisa dimigrasikan di bawah src/animation/

bagian dari src/core : https://github.com/mrdoob/three.js/pull/20008

baik. Saya pikir folder itu hampir selesai. Mungkin hanya tersisa src/core/Object3D.js dan src/core/BufferGeometry.js ?

Mungkin hanya tersisa src/core/Object3D.js dan src/core/BufferGeometry.js ?

Ya, Ada banyak kelas ES5 bergantung pada Object3D dan BufferGeometry .

penyaji: https://github.com/mrdoob/three.js/pull/20011

Tembak, ada beberapa kemajuan luar biasa dalam hal ini

Akan memanggil dibs pada src/lights . Membuka src/extras dan src/renderers dalam daftar di atas, ternyata ada beberapa folder di masing-masing untuk dikerjakan.

Hai semua,

apa yang kita lakukan sehubungan dengan pola ini?

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

apakah sekarang:

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

atau

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

saat ini, saya telah melakukan yang kedua tetapi melihatnya, saya akan mengatakan niat ini mungkin lebih dekat dengan yang pertama.

adakah yang tahu apa yang menggunakan variabel-variabel ini sejak awal?

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

️ Ini benar. isDirectionalLight adalah contoh yang baik, digunakan seperti ini:

$ 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 ) {

Yang mengatakan, mungkin ada peningkatan kinerja dengan mempertahankan beberapa properti prototipe ...

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

Mungkin kita bisa mengulasnya di PR kasus per kasus.

Saya akan mencoba src/renderers/webgl 👍 👍

selamat mencoba, selamat bersenang-senang. yang satu punya sedikit yang adil terjadi di dalamnya

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

Hai semuanya- src/renderers/webgl saya sudah dikonversi. Itu gila. Saya akan terus meninjau semuanya dan menunggu #20039 sebelum saya mulai mendorong PR.

👍
menantikannya

Saya perhatikan @yomotsu menggunakan getter hanya-baca untuk properti is* dalam PR matematika... Mungkin itu yang terbaik!

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

hm mungkin saja. Saya tahu orang lain telah mencoba di beberapa tempat untuk membuat variabel tidak dapat diubah. Ini terlihat seperti pola yang cukup baik bagi saya.

kasus pertunjukan jsfiddle cepat

Sepertinya ini adalah cara untuk pergi:

foo.prototype.isDirectionalLight = true;

akan melihat ke src/objects . akan melihat seberapa jauh saya bisa mendapatkan tanpa merusak barang-barang.

Folder matematika baru saja selesai.
( Kelas interpolasi tidak termasuk. )

Hai semua,
Saya akan mundur untuk mengerjakan src/objects , orang lain dipersilakan untuk mengambilnya sementara itu.

Hei, kerja bagus dengan orang-orang ini! 💪.

Hanya satu masalah, foo.prototype.isDirectionalLight = true; masih tidak mengizinkan goyangan pohon, karena kelasnya sudah dimodifikasi.
Juga pada titik ini saya sangat menyarankan untuk tidak menyentuh prototipe lagi karena kami menggunakan kelas sekarang dan prototipe dapat diabstraksikan.

Bagaimana dengan pola ini? Itu terlihat paling eksplisit bagi saya.

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

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

Ada juga versi pendek, yang melakukan hal yang sama tetapi sedikit lebih implisit.

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

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

@marcofugaro versi pendeknya menurut saya bagus 👍

Oke, lakukan PR.

Juga, saya baru menyadari bahwa kami tidak dapat menggunakan bidang kelas karena kami diblokir oleh PR ini .

Saya dapat memperbarui pipa build untuk menggunakan @rollup/plugin-babel yang lebih populer

Saya dapat memperbarui pipa build untuk menggunakan @rollup/plugin-babel yang lebih populer
dan perbaiki masalah itu jika kalian mau.

Iya, alangkah bagusnya kalau bisa ngerjain PR 🙏

@marcofugaro , @mrdoob ya ! ya silahkan

Hai semuanya, pemberitahuan cepat bahwa saya telah memperbarui #20014 dengan Object.defineProperty dan juga memperbaiki subkelas dari AnimationClip . Jika ada yang punya waktu untuk mengulasnya, saya akan sangat menghargai tambahannya 🙇

Oke. Sekarang setelah r120 keluar... dapatkah seseorang memeriksa apakah semuanya telah diguncang dengan benar?

Sepertinya itu agak berhasil untuk saya, tapi sedikit.
Saya tidak melihat ArrowHelper lagi di file bundel saya dengan webpack. tetapi banyak kode yang tidak perlu masih ada😢

bagaimana dengan ukuran bundel? sebelum dan sesudah

Hai semuanya, saya punya ide dan menggunakan alat yang disebut shakediff . Anda dapat menjalankannya seperti ini:

$ shakediff builds/three.module.js Color

Itu akan menghasilkan modul kecil yang mengimpor Color , menggabungkannya dengan tiga, dan kemudian membuat perbedaan tiga dari metadata rollup. Anda dapat bekerja dengan diff mendetail atau hanya menyalurkannya ke diffstat untuk mendapatkan level tinggi:

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

Saat ini tidak ada paket, tetapi Anda dapat menginstalnya dari repo saya jika Anda ingin mencobanya. Umpan balik dihargai! ️

npm -g i ianpurvis/shakediff.git

hey @mrdoob , bisakah Anda menjelaskan bagaimana Anda ingin kami menangani skrip di dalam folder contoh?
Saya menyukai #19989 langsung untuk konversi tetapi saya menyadari dalam melakukannya utils/modularize.js tidak dapat lagi digunakan pada folder contoh/js tanpa menimpa pekerjaan itu. Apakah ini menandai akhir dari kita mempertahankan contoh/js dan awal dari contoh/jsm?

Apa vonis yang satu ini @mrdoob? Apakah masuk akal untuk menjadikan jsm sebagai sumber kebenaran sehingga kami dapat mengonversi contoh ke kelas ES6? Mungkin kita bisa membuat utils/demodularize.js untuk mendukung konversi ke arah lain?

Folder examples/js akan dihapus pada Desember 2020. Sampai saat itu, kita harus membiarkan folder apa adanya, tanpa memutakhirkan isinya — atau file examples/jsm yang dihasilkan dari isinya — ke Kelas ES6. Setelah tanggal tersebut, File examples/jsm akan menjadi sumber kebenaran, dan dapat diperbarui ke Kelas ES6.

Saya perhatikan bahwa variabel lingkup modul tidak dihapus selama pengocokan. Anda dapat melihat perilaku dengan empat vars ini, 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();

Sepertinya kita harus menandai ini murni dengan komentar khusus-

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

Apakah itu bekerja untuk semua orang?

Kedengarannya bagus untuk saya

Bagus, itu menghapus 144 baris lagi saat pohon bergoyang dengan Color

Tolong semua orang memberikan PR terbuka Anda perawatan /*@__PURE__*/ ketika Anda punya waktu!

@ianpurvis bagus! apakah Anda menggunakan rollup, kan? dapatkah Anda membagikan konfigurasi Anda?

@mrdoob Saya akhirnya sempat melakukan beberapa pengujian. Saya pribadi menggunakan webpack, jadi saya melakukan beberapa tes dengannya, konfigurasi saya adalah ini jika ada yang tertarik .

Saya menguji kode ini

import * as THREE from 'three'

console.log(THREE.WebGLRenderer)

0.119.1

0.120.1

Jadi ada sesuatu yang diguncang pohon, bagus!

Melihat lebih jauh, sepertinya kelas AudioListener tidak ada dalam bundel, berita bagus!

Webpack juga secara otomatis menghapus variabel yang tidak digunakan yang ditunjukkan oleh @ianpurvis.

Setelah ini, saya memutuskan untuk menguji metode statis yang ditentukan di luar kelas

dan sayangnya, ini membuat kelasnya tidak dapat digoyahkan

Setelah melakukan penggalian lagi, saya melihat kelas geometri seperti DodecahedronGeometry , yang tidak digunakan di mana pun, masih dalam bundel

Kemudian saya menemukan, ini karena objek Geometries three.module.js

Yang dihasilkan secara otomatis saat menggunakan pola seperti ini di ObjectLoader . Ini mungkin akan hilang ketika kita membuat ObjectLoader sebuah kelas, dan src/geometries akan menjadi tree-shakeable.

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

@marcofugaro Tidak masalah, inilah konfigurasi rollup

@marcofugaro Hai, saya menambahkan dukungan webpack ke shakediff... apakah konfigurasi webpack ini menurut Anda baik-baik saja? Karena terser bertanggung jawab atas penghapusan kode mati di tree-shaking webpack, sulit untuk mencegah beberapa artefak transformasi dalam output tersebut. Tetapi jika Anda membedakan menggunakan algoritme histogram dengan spasi putih dinonaktifkan, itu dapat dikelola. Dari tes cepat malam ini, webpack tampaknya menerima /*@__PURE__*/ dan /*#__PURE__*/ . Saya pikir kita dapat membuat standar pada satu atau yang lain. Besok lagi...

@ianpurvis Saya tidak berpikir saya diizinkan untuk menginstal shakediff di mesin saya...

Bagaimanapun, saya melakukan tes sederhana:

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

Dan perhatikan bahwa Geometry tidak diguncang pohon. https://github.com/mrdoob/three.js/pull/20394 memperbaikinya.

Saya kemudian mencoba melakukan:

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

Dan perhatikan bahwa rollup tidak menggoyahkan metode yang tidak digunakan...

@mrdoob sayangnya, di masa mendatang, metode kelas tidak akan pernah dapat digoyahkan oleh alat apa pun. Heck, mereka bahkan tidak bisa diperkecil!

Ini karena dalam javascript, Anda dapat mengakses metode seperti this['I am a string'] , sama seperti Anda dapat mengakses properti objek secara dinamis. Untuk alasan ini, alat tidak tahu sebelumnya jika dan bagaimana Anda akan memanggil metode (bisa this[variable] ).

Ini sama untuk Kelas ES6 dan kelas Fungsi. Misalnya, dalam three.min.js , metode dibiarkan tidak tersentuh, sama seperti properti objek lainnya

Dan tidak ada yang mengusulkan mode "ketat" pembangun, di mana Anda diharapkan untuk tidak memanggil metode seperti this['I am a string'] ?

Tidak ada ide ️

Berikut adalah diskusi tentang topik ini tentang rollup: https://github.com/rollup/rollup/issues/349

metode kelas tidak akan pernah dapat digoyahkan oleh alat apa pun. Heck, mereka bahkan tidak bisa diperkecil!

Maaf untuk keluar dari topik, tetapi Anda bisa membuat minifikasi berfungsi jika Anda memberi kompiler beberapa petunjuk tentang apa itu "publik" vs. "pribadi". Di masa lalu saya telah menggunakan awalan "_" pada metode untuk ini. Lihat https://github.com/developit/microbundle/wiki/mangle.json. Tapi, sayangnya, saya juga tidak tahu apakah hal serupa mungkin terjadi untuk goyangan pohon. 😕.

wah! #20395 digabungkan! barang bagus @marcofugaro

Berita luar biasa tentang babel dan geometri!

@ianpurvis Saya rasa saya tidak diizinkan menginstal shakediff di mesin saya ...

@mrdoob Hm, sepertinya Parcel memiliki ketergantungan pada versi fsevents itu... mungkin saya bisa menyematkannya ke sesuatu yang lebih tinggi.

Fyi, info bagus di sini tentang peningkatan goyangan pohon di Webpack 5 ...

Fyi, info bagus di sini tentang peningkatan goyangan pohon di Webpack 5 ...

Kemajuan ... Saya harap Rollup mengimplementasikan ini juga ...

Halo semua,

Apa sebenarnya tujuan dari properti .is**Classname** dan this.type = **Classname** ?
Bukankah ini sisa dari pola kelas semu lama?
Mengapa tidak menyingkirkannya sepenuhnya dan mengganti penggunaan ini dengan cara pemeriksaan tipe normal?

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

Maksud saya, sebagai bagian dari pindah ke kelas ES, objek akan memiliki tipe yang benar yang sudah dapat diperiksa...

Perpustakaan menggunakan obj instanceof Vector3 sebelumnya.
Tetapi Rich Harris menerapkan dan mengubah semua cek menjadi is* untuk memungkinkan tree-shaking: #9310

Perpustakaan menggunakan obj instanceof Vector3 sebelumnya.
Tetapi Rich Harris menerapkan dan mengubah semua cek menjadi is* untuk memungkinkan tree-shaking: #9310

Terima kasih atas jawabannya, saya telah membaca utasnya, tetapi saya tidak mengerti mengapa sebuah kelas harus dihindari untuk berada di output jika beberapa kelas lain perlu mengetik-periksa ... Maksud saya jika, kelas X yang dibundel perlu untuk menyadari bahwa suatu objek adalah kelas B, maka kelas B digunakan (setidaknya untuk membuat objek tersebut entah bagaimana) dan harus dibundel, bukan?

Misalnya, WebGLRenderer perlu memeriksa apakah geometri yang dirender adalah BufferGeometry atau Geometri, tetapi tidak pernah membuat instance Geometri. Sebagian besar aplikasi three.js hanya boleh menggunakan BufferGeometry, jadi kami ingin tree-shaking untuk menghilangkan Geometry (dan subkelasnya) dari bundel jika memungkinkan.

Secara visual...

Pola ini membuat WebGLRenderer selalu menyertakan Geometry saat bundling:

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

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

Pola ini tidak:

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

Hai semua,

mengingat ini , apa pendapat kita tentang bergerak maju dari sini?

Saya rasa belum ada perubahan. Apa pun yang (1) tidak ada di examples/js dan (2) tidak diperpanjang oleh sesuatu di examples/js dapat dikonversi ke Kelas ES6. Jika proses itu selesai, kita harus memutuskan kapan harus mulai mengalihkan examples/js ke kelas.

Dari ingatan, dan setelah melihat sekilas kami telah melakukan sedikit dan masih ada beberapa PR yang siap menunggu.

Saya mungkin mencoba mengkompilasi ulang daftar dependensi/extended-in-examples saya.

@PastiMungkin Hei! Kedengarannya bagus, daftar Anda sangat membantu. Dan strategi @donmccurdy masuk akal bagi saya. 👍 Saya pikir akan lebih baik untuk menutup pekerjaan yang telah kami lakukan. #20070 akan menjadi PR yang bagus untuk diserang karena dapat memberikan strategi untuk memigrasi private/hidden vars ke ES6 (kita membutuhkan ini untuk migrasi renderers/webgl ke ES6). Jika semua orang dapat menjalankan tolok ukur atau mengikuti diskusi di sana, saya akan sangat menghargainya. Saya pikir kami memiliki beberapa opsi yang layak, hanya perlu memastikan kinerjanya bagus.

Oke,
Saya dapat memulai beberapa PR untuk contoh menulis ulang ke kelas ES ...
@mrdoob apakah itu masalah bagi Anda melakukan skrip jsm ke js atau tidak? (Saya pikir tidak, tetapi beri tahu saya jika Anda lebih suka kami menunggu)

Sebelum mengonversi kode contoh ke kelas, #20527, #20529 atau solusi yang berbeda harus digabungkan terlebih dahulu. Kecuali untuk kode yang memenuhi ketentuan yang disebutkan di https://github.com/mrdoob/three.js/issues/19986#issuecomment -718308451.

@DefinitelyMungkin Anda mengatakan di komentar pertama :

• gunakan bidang kelas

1) Apakah itu berarti kita dapat menggunakan bidang kelas untuk semuanya?
Seperti:

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

... atau hanya untuk properti .is* ?

Jadi, 2) bagaimana dengan konstruktor kosong? Spesifikasi ES2015 mengatakan konstruktor dengan hanya panggilan super() implisit jika tidak disediakan, sehingga beberapa kelas anak dapat benar-benar didefinisikan dengan lebih mudah:

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

}

Dan 3) bagaimana dengan bidang kelas privat?

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 terbaru mendukung bidang kelas publik dan pribadi secara asli sekarang ...

20395

Kunci pertama adalah lulus semua tes.

Anda akan mengalami lebih sedikit masalah pada awalnya dengan mengubah lebih sedikit.

@marcofugaro Saya yakin masih ada beberapa variabel yang dapat diubah menjadi bidang kelas, bukan?
Saya melihat hal-hal seperti:

class EdgesGeometry extends BufferGeometry {

    constructor( geometry, thresholdAngle ) {

        super();

        this.type = 'EdgesGeometry';

diubah menjadi:

class EdgesGeometry extends BufferGeometry {

    type = 'EdgesGeometry';

    constructor( geometry, thresholdAngle ) {

        super();

Kemungkinan kita akan mengalami beberapa peringatan lain di sekitar tempat itu, seperti bagaimana saya mengalami " new this.contructor() != new Foo() ".

bidang kelas privat

ini adalah diskusi yang sedang berlangsung. Akan lama sebelum kita menggunakannya jika kita menggunakannya. Saya tidak yakin dengan masalah atau PR yang dapat saya arahkan kepada Anda.

@marcofugaro Saya yakin masih ada beberapa variabel yang dapat diubah menjadi bidang kelas, bukan?
Saya melihat hal-hal seperti:

Ya itu bisa dilakukan sekarang. Namun kami tidak dapat melakukannya untuk properti .is* karena mereka harus non-enumerable dan non-writable, untuk itu kami harus menggunakan Object.defineProperty(this, ... .

dicek lagi gimana? apakah mungkin bagi kita untuk menggunakan kata kunci static daripada Object.defineProperty(this, ... ?

dicek lagi gimana? apakah mungkin bagi kita untuk menggunakan kata kunci static daripada Object.defineProperty(this, ... ?

Saya rasa tidak, karena obj.is* harus ada di instance, bukan di kelas itu sendiri...

Saya tidak yakin apa yang babel transpile persis di konfigurasi saat ini, tetapi kami dapat menggunakan dekorator untuk menetapkan bidang kelas sebagai non-enumerable/non-writtable:

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

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

@DefinitelyMungkin properti static berbeda, mereka tidak dapat diakses dari instance, melainkan dari kelas itu sendiri.

class Test {
  static staticProp = true

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

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

hasil:

undefined true

Poin utama saya adalah bahwa jika kami menyesuaikan kode yang memeriksa properti ini, kami dapat beralih dari:

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

ke

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

Jadi saya bertanya-tanya di mana dan mengapa pemeriksaan ini dilakukan dan apakah kami dapat mengubahnya atau tidak.

@DefinitelyMungkin Masalahnya adalah mendapatkan informasi dari jenis contoh. Jadi, jika Anda dapat mengakses kelas instance untuk mendapatkan prop statis, lalu mengapa harus memiliki prop statis? Anda sudah memiliki nama kelas ...

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

Sunting: menulis ini, saya dapat mengetahui bahwa memiliki beberapa .is* dapat berguna untuk menguji pada setiap rantai pewarisan pada akhirnya, dibandingkan dengan hanya satu nama kelas akhir ...

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

Sunting2: ya juga hal yang sama dapat dicapai dengan nama kelas akhirnya, tetapi lebih rumit untuk diuji ...

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

dari contoh

ups. baca ulang yang itu. yup, tidak peduli apa yang saya katakan.

if ( scope.object.isPerspectiveCamera ) {
...
}

if ( geometry.isBufferGeometry ) {
...
}

if ( material.isShaderMaterial ) {
...
}

Baik. Dua hal.

• Apa yang kita punya?

kita harus memutuskan kapan harus mulai mengalihkan examples/js ke kelas.

• Semakin dekat dengan kebutuhan untuk mendiskusikan hal ini untuk kemajuan.

Saya tidak tahu apakah kita harus menunggu #20527 atau #20529 karena keduanya akan mencoba membuat ulang examples/js dalam bentuknya saat ini, yang bukan merupakan tujuan kita. Saran awal saya adalah mulai mengonversi examples/js apa adanya. Pertanyaannya adalah, masalah apa yang kita hadapi...

Saya juga ingin mengulangi sesuatu yang @mrdoob katakan baru-baru ini

Saya tidak suka memaksa pemula untuk belajar tentang polyfill atau bundler untuk membuat kubus pertama mereka.

Sebagai seseorang yang telah bekerja dengan modul selama beberapa waktu terakhir, alur kerjanya jelas dan saya memahami berbagai konsep yang diperlukan untuk membuat sesuatu berfungsi. Kami tidak membutuhkan bundler dan polyfill tetapi kami perlu menyesuaikan bagaimana Three.js awalnya dijelaskan .

Juga, mungkin penambahan REPL tetapi ditujukan untuk Three.js dapat membantu di area ini? Contohnya adalah svelte's

Kami juga perlu mengklarifikasi cara mengganti beberapa pola non-kelas seperti:

function Foo() {

    this.update = function () {

        var priv = 'foo'

        return function update() {
            ...
        };

    }();

}

IMHO kita bisa menggunakan bidang kelas pribadi, dan membuat rollup/babel transpile ke pola lama untuk browser lama tertentu tidak mengimplementasikan ini secara asli ...

IMHO kita bisa menggunakan bidang kelas pribadi, dan membuat rollup/babel transpile ke pola lama untuk browser lama tertentu tidak mengimplementasikan ini secara asli ...

Saya setuju dengan strategi ini, tetapi keputusannya tentu saja tergantung pada pengelola inti yang perlu mempertahankan kode itu.

dingin. Mungkin ide untuk memamerkan ini dalam src terlebih dahulu, yaitu temukan pola yang sama anehnya dengan apa yang dijelaskan oleh @devingfx dalam src , buat PR yang menggunakan variabel pribadi sebagai gantinya dan tunjukkan apa yang dilakukan babel dengan itu.

ada saran script yg mana?

pencarian: internal , private , readonly

tunggu, apakah semua variabel _* dimaksudkan untuk pribadi?

...

Seekor gajah di ruangan ini mungkin src/renderers/WebGLRenderer.js

Bagaimana dengan WebGLAnimation, ini adalah kelas kecil yang menyenangkan... https://github.com/mrdoob/three.js/pull/20070

ada saran script yg mana?

Saya fokus pada exemples/js dan saya menemukan ini di OrbitControls ...

tunjukkan apa yang babel lakukan dengannya.

Saya cukup yakin itu tidak akan menghasilkan sesuatu yang cocok dengan sintaksis mrDoob pikir

ke kanan.

dan ups. Dimana otak saya... kita akan membutuhkan salah satu #20527 atau #20529 (atau lainnya) untuk bergabung untuk mulai mengubah folder examples . examples/js bertahan untuk masa mendatang yang berarti menyentuh folder examples/js dengan kelas adalah mutlak tidak tidak. itu akan merusak kompatibilitas dengan IE ... menghela nafas.

buat rollup/babel transpile ke pola lama

Tebak pemikirannya dan dukung JSM ke JS PR tersebut. Kita dapat membidik examples/jsm setelah keputusan tercapai.

Menambahkan variabel pribadi ke src masih merupakan ide yang bagus karena ini akan menjadi solusi yang baik untuk masalah lama "tolong jangan bermain-main dengan variabel-variabel itu, mereka punya tujuan tertentu"

menyentuh folder examples/js dengan kelas adalah mutlak tidak tidak.

Ooops, buruk, saya berbicara tentang menggali exemples/jsm tentu saja, exemples/js akan menjadi versi "dibangun" dalam waktu dekat...

itu akan merusak kompatibilitas dengan IE ... menghela nafas.

Apa??? Apakah kita masih berbicara tentang Internet Explorer pada tahun 2020? Apakah kita berbicara tentang kompatibilitas perpustakaan WebGL pada dinosaurus berusia 7 tahun ini? Dengan serius !! 1,4% ...
_(kita harus menambahkan pengumpul statistik di lib untuk mengumpulkan jika ada TIGA pengguna yang merencanakan penggunaan di bawah IE)_

BTW, itu sebabnya babel ada ...

File build three.js dan three.min.js serta semua file di examples/js harus tetap mendukung browser lama seperti IE 11.

Ada PR tahun lalu yang seharusnya menghentikan dukungan untuk IE 11 (#18091) tetapi ternyata masih ada pengguna yang mengandalkan browser ini. Dan kebijakan proyek saat ini adalah menyediakan file masing-masing untuk pengguna sehingga mereka tidak melakukan konversi ES6 ke ES5 sendiri. Ini juga dibahas di #20455.

kebijakan proyek saat ini adalah menyediakan file masing-masing untuk pengguna sehingga mereka tidak melakukan konversi ES6 ke ES5 sendiri.

Oke, tidak ada masalah dengan kebijakan itu jika sumbernya dapat dikembangkan dengan cara modern, dan jika build yang dihasilkan tidak seharusnya dapat dibaca tetapi hanya berfungsi...
Karena transpiler mengeluarkan kode jelek seperti itu!
Jadi saya tidak melihat ada masalah untuk src yang ditulis di ESnext, dan build menjadi jelek, TETAPI kemungkinan masalah dengan exemples/js jika file ini harus dapat dibaca, dikomentari, dan dibentuk dengan baik...

BTW Saya bertanya pada diri sendiri beberapa kali mengapa beberapa contoh adalah contoh dan bukan sumber inti utama!?
Contoh: kontrol biasanya digunakan apa adanya, disalin seperti add-on opsional dan tidak digunakan sebagai contoh nyata yang Anda baca dan ambil inspirasi untuk menulis proyek Anda, seperti contoh kubus berputar misalnya...

_(Saya memulai perjalanan saya dengan TIGA dengan pencarian: "webgl rotating cube" dan contohnya yang mengarah ke maraton kode 1 malam mengembangkan game kecil dengan kubus bergerak di platform ^^)_

Saat menggunakan build yang tepat maka tidak masalah file apa yang ada di inti dan apa yang ada di direktori contoh. Selama goyangan pohon berfungsi dengan baik, Anda hanya memiliki file sumber di build Anda yang sebenarnya diperlukan.

Bagi saya, perbedaan inti dan contoh berasal dari saat alur kerja semacam ini belum tersedia. Inti harus kecil dan kompak karena Anda harus mengimpornya sepenuhnya sebagai satu komponen. Hanya file paling _penting_ yang harus disertakan. File apa yang berakhir di inti dalam beberapa hal merupakan keputusan kasus per kasus.

Saat menggunakan build yang tepat maka tidak masalah file apa yang ada di inti dan apa yang ada di direktori contoh. Selama goyangan pohon berfungsi dengan baik, Anda hanya memiliki file sumber di build Anda yang sebenarnya diperlukan.

Ini hanya berlaku untuk pengguna modul ES ;)