Three.js: r73: tidak ada yang berhasil!?!

Apa yang tidak berhasil? Kesalahan apa yang Anda dapatkan? Saya selalu memastikan semua contoh masih berfungsi. Jika ada yang rusak kita harus menambahkan contoh yang menguji itu.

Apa yang tidak berhasil?

Tidak ada yang berhasil !!!
Sekadar contoh (untuk Anda):
http://necromanthus.com/Test/html5/dog_r72.html
http://necromanthus.com/Test/html5/dog_r73.html
Kesalahan:

• THREE.MorphAnimMesh tidak ditentukan
• loader.load bukanlah sebuah fungsi

Mengapa Anda merilis sesuatu seperti itu ???

Ah! Saya melihat.

Kami telah sepenuhnya mengganti sistem animasi dan SEA3D masih mengandalkan yang lama ( menurut saya @sunag sedang mengerjakan pembaruan).

Sementara itu, Anda perlu menyertakan sistem animasi lama dalam proyek Anda:

<script src="js/MorphAnimMesh.js"></script>
<script src="js/loaders/collada/Animation.js"></script>
<script src="js/loaders/collada/AnimationHandler.js"></script>
<script src="js/loaders/collada/KeyFrameAnimation.js"></script>

Anda akan menemukan file tersebut di folder examples .

Kami telah sepenuhnya mengganti sistem animasi

Dan sekali lagi, Anda mengacaukan kompatibilitas ke belakang ... OMG

Bagaimanapun, ini adalah hal lain (tanpa animasi dan pemuat):
http://necromanthus.com/Test/html5/koolmoves_r72.html
http://necromanthus.com/Test/html5/koolmoves_r73.html
Kesalahan:

• _typeface_js tidak ditentukan
• TIGA.TextGeometry bukanlah konstruktor

Sejujurnya, r73 benar-benar berantakan dan harus disingkirkan.
Bersulang

Saya telah mengandalkan Three.js untuk ChiliPeppr selama sekitar 1,5 tahun sekarang. Pagi ini muncul THREE.FontUtils tidak terdefinisi sehingga semua rendering font rusak di ChiliPeppr. Saya menduga itu adalah masalah r73 yang sama dengan yang

FontUtils dan TextGeometry utils juga telah dihapus dari inti.

Anda sekarang harus menyertakan file secara terpisah:

<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>

Saya memutuskan untuk memindahkannya keluar dari inti karena bagaimanapun pengguna harus menyertakan *.typeface.js .

@RemusMar Kami tidak menjamin kompatibilitas mundur antar versi. Tapi kami menambahkan kode transisi yang memberi tahu pengguna dan membuat kode tetap berfungsi kapan / di mana kami bisa.

Util FontUtils dan TextGeometry juga telah dihapus dari inti.

Mengapa Anda tidak menghapus semuanya dari intinya?
Inti dengan NOL byte tidak perlu diunduh sama sekali.

Kami tidak menjamin kompatibilitas mundur antar versi.

Itu langkah yang buruk Ricardo.
Seperti yang saya katakan sejak awal:

Kompatibilitas ke belakang adalah HARUS dalam proyek serius apa pun.
Jika tidak, semakin sedikit orang yang tertarik dengan proyek itu.

Bersulang

Mengapa Anda tidak menghapus semuanya dari intinya?
Inti dengan NOL byte tidak perlu diunduh sama sekali.

Saya pikir Anda seorang pria emosional. Namun, Anda tetap tinggal jadi saya juga mengumpulkan bahwa pada akhirnya Anda menemukan proyek berguna 😉

Kompatibilitas ke belakang adalah HARUS dalam proyek serius apa pun.

Mungkin ini proyek yang tidak seserius yang Anda pikirkan? Saya bukan Adobe, Anda tahu?

Jika tidak, semakin sedikit orang yang tertarik dengan proyek itu.

Orang yang kehilangan minat bukanlah sesuatu yang saya khawatirkan. Alih-alih, saya fokus untuk membuat API yang indah yang mengabstraksikan gangguan grafik komputer dan, pada saat yang sama, saya ingin pustaka muat dalam 100kb gzip. Tidak mungkin untuk selamanya menyertakan semua fitur yang ditambahkan orang.

Kompatibilitas Mundur

@RemusMar Salah satu hal pertama yang saya pelajari tentang three.js, ketika saya memulai pemrograman 3D di JavaScript, adalah kenyataan bahwa itu tidak kompatibel ke belakang.

Saya pikir, secara umum itu sama sekali tidak masalah, karena saya hanya perlu memastikan, bahwa dalam proyek saya, saya menautkan ke versi yang sama dari three.js yang saya buat dengan kode saya.

Kebijakan untuk tidak memperhitungkan backward compability tentunya menjadi dasar peluang untuk mengembangkan three.js secara dinamis, dengan kemungkinan yang sangat fantastis, hingga saat ini.

Itu langkah yang buruk Ricardo

menakjubkan bagaimana orang-orang memperhatikan ini setelah 70+ revisi)

Tapi untuk menambah intinya, seseorang baru-baru ini menulis kepada saya "three.js stabil terbaru adalah r72", lol. tidak ada three.js yang stabil. mereka tidak memperbarui revisi lama dengan perbaikan bug, sebagai gantinya hadir versi baru dengan perbaikan bug _and_ perubahan yang melanggar atau bug baru.

Kemudian lagi, beberapa hal secara ajaib bekerja melalui versi bahkan jika kode yang mendasarinya terbalik. Seperti kulit menggunakan geometri penyangga)

Sementara kita sedang membahas perubahan yang melanggar, yang paling membuatku kesal adalah perubahan json. Seseorang memiliki plugin pengekspor lama di 3dmax-nya, dan saya menghabiskan waktu lama untuk mengedit json dengan tangan agar animasi berfungsi.

Kemudian lagi, beberapa hal secara ajaib bekerja melalui versi bahkan jika kode yang mendasarinya terbalik. Seperti kulit menggunakan geometri penyangga)

Itu butuh usaha! 😅

Sementara kita sedang membahas perubahan yang melanggar, yang paling membuatku kesal adalah perubahan json. Seseorang memiliki plugin pengekspor lama di 3dmax-nya, dan saya menghabiskan waktu lama untuk mengedit json dengan tangan agar animasi berfungsi.

Iya. Animasi harus stabil secepatnya. Saya pikir sistem animasi baru adalah langkah besar ke arah yang benar.

Sepertinya sampel ini rusak karena perubahan r73 Anda. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Oh! Selalu lupakan contoh di dokumen ...

@tokopedia
Apa yang harus saya gunakan untuk menggantikan kelas THREE.Animation "lama"?
Apakah ada contoh yang menggunakan sistem animasi baru? Tidak begitu jelas apa yang baru di halaman contoh.

Sementara kita sedang membahas perubahan yang melanggar, yang paling membuatku kesal adalah perubahan json. Seseorang memiliki plugin pengekspor lama di 3dmax-nya, dan saya menghabiskan waktu lama untuk mengedit json dengan tangan agar animasi berfungsi.

Ini juga menjadi perhatian saya. Saya benar-benar tidak ingin mengekspor ulang ratusan model.

@tokopedia
Kebijakan untuk tidak memperhitungkan backward compability tentunya menjadi dasar peluang untuk mengembangkan three.js secara dinamis, dengan kemungkinan yang sangat fantastis, hingga saat ini.

Itu pernyataan yang salah.
Faktanya, memecah kompatibilitas mundur sepanjang waktu membuat pengembang pihak ke-3 menyerah pada THREE.js
Di sisi lain, fitur baru dan perbaikan bug tidak berarti merusak kompatibilitas dengan proyek lama.
Jika Ricardo akan melanjutkan jalan ini, waktu akan memberi tahu apakah saya benar atau tidak.
Bersulang

Ini juga menjadi perhatian saya. Saya benar-benar tidak ingin mengekspor ulang ratusan model.

Sepakat! Format json adalah sesuatu yang menurut saya kompatibilitas mundur sangat penting. Tidak sulit untuk melakukannya.

Sepakat! Format json adalah sesuatu yang menurut saya kompatibilitas mundur sangat penting. Tidak sulit untuk melakukannya.

Sangat lega =]

Tampaknya agak terlalu dini untuk merilis build tanpa memperbarui panduan migrasi saat perubahan yang melanggar terlibat. Untungnya bagi saya sejak saya mengikuti papan ini, saya menyadari Perubahan Animasi. Saya tidak akan bertaruh bahwa semua pengguna sama-sama siap.

Saya setuju dengan Remus tentang menghapus sesuatu dari inti hanya untuk menjaga batas ukuran 100KB. Secara pribadi saya lebih mementingkan 10000x lebih banyak tentang fungsionalitas daripada memangkas beberapa byte. Saya tahu saya dapat mengambil file yang diperlukan dari contoh, tetapi sepertinya ada rasa sakit yang tidak perlu di pantat (terutama harus memperbaruinya setiap rilis).

Pokoknya cukup komplain dariku. Beberapa kritik ini dikesampingkan, kerja luar biasa guys!

Tampaknya agak terlalu dini untuk merilis build tanpa memperbarui panduan migrasi saat perubahan yang melanggar terlibat.

Melakukan rilis melibatkan beberapa langkah. Kadang kesabaran / dedikasinya habis ... 😕
Siapapun dapat memperbarui halaman migrasi. Saya ingin sekali mendapatkan bantuan di sana.

Sepertinya sampel ini rusak karena perubahan r73 Anda. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Tetap!

Di mana saya dapat menemukan FontUtils di r74? Tampaknya dihapus di r74 ...

@janjan

Ya, maaf soal itu, API TextGeometry berubah lagi. Itu kembali ke inti!

Harap gunakan http://threejs.org/examples/webgl_shadowmap.html sebagai referensi.

var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.js', function ( font ) {

    var textGeo = new THREE.TextGeometry( "THREE.JS", {

        font: font,

        size: 200,
        height: 50,
        curveSegments: 12,

        bevelThickness: 2,
        bevelSize: 5,
        bevelEnabled: true

    });

    textGeo.computeBoundingBox();
    var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

    var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );

    var mesh = new THREE.Mesh( textGeo, textMaterial );
    mesh.position.x = centerOffset;
    mesh.position.y = FLOOR + 67;

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    scene.add( mesh );

} );

Jika ada yang tertarik, beginilah cara saya memuat font tanpa permintaan async, menggunakan modul NPM [email protected] dan webpack: https://gist.github.com/pjanik/49c03c02c66341a26904
Jika Anda menggunakan alat build lainnya, kuncinya adalah memuat file font sebagai string. Mungkin parsing lucu ini bisa diekstraksi ke beberapa metode pembantu di masa depan?

Di samping catatan, kerennya r74 termasuk /examples dir (r73 tidak), silakan lanjutkan untuk melakukannya. : wink: Akhirnya, saya hanya dapat menggunakan three package, tidak ada file script eksternal lagi (saya juga menggunakan examples/js/controls/OrbitControls ). Akan lebih keren jika contoh dipublikasikan menggunakan format UMD, jadi saya bisa langsung memerlukan OrbitControls tanpa mengubah ketergantungan global TIGA (bukan masalah besar, karena sebagian besar alat build dapat menanganinya, tetapi tetap saja).

Terima kasih!

atau Anda bisa mendefinisikan _typeface_js.loadFace secara lokal dan mengevaluasinya?

Ya, maaf soal itu, API TextGeometry berubah lagi. Itu kembali ke inti!

Itu adalah keputusan bijak Ricardo.
Diperlukan sedikit perubahan sintaks untuk loader, tetapi kompatibel dengan versi sebelumnya.
r71: http://necromanthus.com/Test/html5/koolmoves.html
r74: http://necromanthus.com/Test/html5/koolmoves_r74.html
Bersulang

Haruskah kita menambahkan pemuatan kembali geometri teks di ObjectLoader?

@fraguada yah, tidak semudah itu, kita juga harus menangani file font ...

FontUtil tidak ditentukan dalam versi r74 yang saya dapatkan: https://github.com/mrdoob/three.js/blob/master/build/three.js

Itu tampaknya sama dengan yang digunakan oleh http://threejs.org/examples/webgl_shadowmap.html (kecuali yang diperkecil) tetapi saya juga tidak melihatnya secara eksplisit termasuk FontUtils atau jenis huruf ... namun halaman contoh itu berfungsi . (Sedangkan saya masih mendapatkan "_typeface_js tidak ditentukan") Apakah Anda melakukan sesuatu selain apa yang ditampilkan dalam komentar Anda (contoh kode 6 komentar di atas yang satu ini)?

Dokumentasi perlu diperbarui saat API berubah, ini tidak berlaku lagi: http://threejs.org/docs/index.html#Reference/Extras.Geometries/TextGeometry

Akan sangat berguna untuk memiliki contoh yang sangat mendasar tanpa semua perekaman keystroke mengganti font, bobot dan kemiringan. Bukan berarti itu tidak terlalu bagus untuk dimiliki, tetapi contoh dasar sederhana dalam contoh Anda akan menghemat banyak waktu.

Contoh ini bisa sangat membantu: http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry , tetapi ketika Anda melihat sumbernya, itu hanya berakhir menggambar torus saat menarik sumber daya eksternal ke benar-benar melakukan pekerjaan itu.

Saya mengumpulkan contoh sederhana ini di JSFiddle untuk siapa saja yang menemukan utas ini.
https://jsfiddle.net/287rumst/1/

Akan sangat berguna jika memiliki contoh yang sangat mendasar

r75 dan r76dev:
http://necromanthus.com/Test/html5/koolmoves.html

Hanya dua sen saya karena saya juga penggemar kompatibilitas mundur:

Jika kompatibilitas tidak dapat dijamin, alangkah baiknya memiliki folder upgrade (atau fixes ) di github yang menunjukkan versi lama dan penanganan baru. Referensi.

Dengan cara ini akan mudah bagi pemrogram untuk mengikuti perubahan.

Saya masih menggunakan r65 karena masalah "tidak diketahui" sehingga saya tidak memiliki waktu ekstra untuk dihabiskan, mencari tahu cara memperbaiki masalah ini.

Halo semuanya, saya baru saja pindah dari r71 ke r76 dan menemukan animation.mixer baru. Jadi untuk menjaga librairies objek 3D json lama saya berfungsi, saya menyalin MorphAnimMesh.js Animation.js AnimationHandler.js dan KeyFrameAnimation.js ke dalam lib javascript saya. Tapi sekarang saya mendapatkan error "data hierarchy undefined". Apakah ini berarti saya harus mengekspor kembali semua objek 3D json saya sebelumnya dari Blender atau adakah cara agar ini tetap berfungsi?

Halo, Tidak ada yang bisa membantu dengan "undefined data.hierarchy"?

Harap gunakan StackOverflow untuk mendapatkan bantuan.

Melakukan rilis melibatkan beberapa langkah. Kadang kesabaran / dedikasinya habis ...: bingung:
Siapapun dapat memperbarui halaman migrasi. Saya ingin sekali mendapatkan bantuan di sana.

Saya baru-baru ini mengalami masalah ini menggunakan versi three.js yang lebih lama.

Tetapi setelah membaca komentar dan hinaan yang Anda terima, alih-alih meminta bantuan, saya hanya ingin mengucapkan terima kasih karena telah mempertahankan three.js.

Anda pria yang sangat berdedikasi dan sabar! : +1:

Pembaruan dari r72 ke r84 adalah sekumpulan pekerjaan (~ 3 jam untuk satu proyek).

Bermanfaat:

• Untuk masalah font: lihat kode sumber http://necromanthus.com/Test/html5/koolmoves.html (Anda tidak memuat font dalam HTML lagi, melainkan di JS, tetapkan var dan ini masuk ke parameter. Berhati-hatilah untuk hanya menetapkan font SETELAH telah dimuat)
• melihat pesan kesalahan di konsol dev, mereka sangat membantu, karena mereka bahkan memberi tahu Anda apa yang harus dilakukan (kerja bagus @mrdoob )
• lihat juga di https://github.com/mrdoob/three.js/wiki/Migration-Guide

Hasil bahagia saya: https://www.matheretter.de/geoservant/en/

Secara rinci apa yang perlu saya lakukan dari v72 ke v84:

1. Hapus dari file html Anda:

   <!-- OLD <script src="../../threejs/geometries/TextGeometry.js"></script>  -->
   <!-- <script src="../../threejs/helvetiker_regular.typeface.js"></script>  -->
   

2. Jalankan adegan threejs Anda, Anda mungkin mendapatkan:

   Uncaught TypeError: c.generateShapes is not a function
   

3. Ini terjadi karena perender mulai tanpa font dimuat. Jadi, pertama-tama mari muat font dan kemudian panggil perender saat memulai:

   var text3dparams;
   var font_helvetiker;
   var fontload = new THREE.FontLoader();
   fontload.load( '/threejs/fonts/helvetiker_regular.typeface.json', function ( font ) {
       font_helvetiker = font;
       initStageText();
   
       // startup
       render(); 
   });
   

4. Saat saya menyetel teks baru selama runtime, saya perlu menentukan objek panggung pada scape global, misalnya:

   var text3d_r;
   var text3d_s;
   var text3d_h;
   var material1;
   var material_s;
   var material2;
   

5. Contoh fungsi start:

   function initStageText()
   {
       // 3D TEXT LABELS
       text3dparams = {
           font:           font_helvetiker, // font, important to change, before was "helvetiker", now the font directly!
           size:           0.3,    // size of the text
           height:         0.05,   // thickness to extrude text
           curveSegments:  2,      // number of points on the curves
           weight:         'normal',       // font weight (normal, bold)
           style:          'normal',       // font style  (normal, italics)
       }
   
       // label radius
       material1 = new THREE.MeshBasicMaterial({color: 0x009900});
       var text3dgeom_r = new THREE.TextGeometry('r = '+cone_radius, text3dparams);
       text3d_r = new THREE.Mesh(text3dgeom_r, material1);
       text3d_r.position.y = cone_height+0.1;
       text3d_r.position.z = cone_radius/2-0.35;
       text3d_r.rotation.y = -Math.PI/2;
       scene.add(text3d_r);
   }
   

6. Saya juga mendapat kesalahan THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead. Untuk mengatasi ini, saya menghapus:

   gridHelper.setColors( new THREE.Color(gridcolor), new THREE.Color(gridcolor) );
   

dan ditambahkan (gridstep adalah 1 sebelumnya, kemudian perlu mengatur nilai menjadi 20 untuk mendapatkan grid yang sama):

    var gridHelper = new THREE.GridHelper(gridplaneSize/2, gridstep, gridcolor, gridcolor);

1. Maka saya perlu menangani perubahan threejs (ditampilkan sebagai peringatan di konsol Chrome):

6.1 THREE.MeshBasicMaterial: 'ambient' is not a property of this material. Dipecahkan dengan menghapus ambient:color, dari new THREE.MeshBasicMaterial();

6.2 Lampu berubah, ganti saja seperti yang dinyatakan dalam peringatan:

    THREE.Light: .shadowMapWidth is now .shadow.mapSize.width.
    THREE.Light: .shadowMapHeight is now .shadow.mapSize.height.
    THREE.Light: .shadowCameraNear is now .shadow.camera.near.
    THREE.Light: .shadowCameraFar is now .shadow.camera.far.
    THREE.Light: .shadowCameraFov is now .shadow.camera.fov.
    THREE.Light: .shadowCameraVisible has been removed. Use new THREE.CameraHelper( 
    THREE.WebGLRenderer: .shadowMapEnabled is now .shadowMap.enabled.

6,3 THREE.Light: .shadowDarkness has been removed. - hapus.

1. Saya juga mengubah pengaturan penyaji:

   // OLD 
   var renderer = Detector.webgl ? new THREE.WebGLRenderer({ antialias: true }) : new THREE.CanvasRenderer({ antialias: true });
   
   // NEW
   var renderer;
   if(Detector.webgl)
   {
       renderer = new THREE.WebGLRenderer({ antialias: true });
   }
   else
   {
       renderer = new THREE.CanvasRenderer({ antialias: true });
   }
   

2. Saya juga perlu menambahkan warna latar belakang putih ke pengaturan pemandangan:

   var scene = new THREE.Scene();          
   scene.background = new THREE.Color( 0xffffff );
   

Sekarang aplikasi saya berjalan seperti versi threejs yang lama. Semoga berhasil juga untuk proyek Anda!