Three.js: r73: لا شيء يعمل!؟!

ما الذي لا يعمل؟ ماهي الاخطاء التي حصلت عليها؟ أنا دائما أتأكد من أن جميع الأمثلة لا تزال تعمل. إذا حدث شيء ما ، يجب أن نضيف مثالًا يختبر ذلك.

ما الذي لا يعمل؟

لا شيء يعمل !!!
مجرد مثال (لك):
http://necromanthus.com/Test/html5/dog_r72.html
http://necromanthus.com/Test/html5/dog_r73.html
الأخطاء:

• THREE.MorphAnimMesh غير محدد
• Load.load ليس وظيفة

لماذا أطلقتم شيئا كهذا ؟؟؟

آه! أنا أرى.

لقد استبدلنا نظام الرسوم المتحركة تمامًا ولا يزال SEA3D يعتمد على النظام القديم (تعمل sunag على تحديث على ما أعتقد).

في غضون ذلك ، تحتاج إلى تضمين نظام الرسوم المتحركة القديم في مشروعك:

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

ستجد الملفات في المجلد examples .

لقد استبدلنا نظام الرسوم المتحركة بالكامل

ومرة أخرى ، لقد أفسدت التوافق مع الإصدارات السابقة ... OMG

على أي حال ، هناك شيء آخر (بدون رسوم متحركة ومحمل):
http://necromanthus.com/Test/html5/koolmoves_r72.html
http://necromanthus.com/Test/html5/koolmoves_r73.html
الأخطاء:

• لم يتم تعريف _typeface_js
• ثالثا: قياس النص ليس منشئ

بصراحة ، r73 عبارة عن فوضى كاملة ويجب إزالتها.
في صحتك

لقد كنت أعتمد على Three.js لـ ChiliPeppr منذ حوالي 1.5 عام حتى الآن. هذا الصباح ، يبدو أن THREE.FontUtils غير معرَّف لذا تعطلت جميع عمليات عرض الخطوط في ChiliPeppr. أظن أنها نفس مشكلة r73 التي يشير إليها

تمت أيضًا إزالة الأدوات المساعدة FontUtils و TextGeometry من النواة.

عليك الآن تضمين الملفات بشكل منفصل:

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

قررت إخراجها من المركز لأنه كان على المستخدم تضمين *.typeface.js أي حال.

RemusMar نحن لا نضمن التوافق مع الإصدارات السابقة بين الإصدارات. لكننا نضيف رمزًا انتقاليًا يخطر المستخدم ويحافظ على عمل الكود متى وأينما نستطيع.

تمت إزالة أدوات FontUtils و TextGeometry أيضًا من النواة.

لماذا لا تقوم بإزالة كل شيء من القلب؟
لا يلزم تنزيل نواة بصفر بايت على الإطلاق.

لا نضمن التوافق مع الإصدارات السابقة بين الإصدارات.

هذه خطوة سيئة ريكاردو.
كما قلت منذ البداية:

التوافق مع الإصدارات السابقة أمر لا بد منه في أي مشروع جاد.
وبخلاف ذلك ، سيكون هناك عدد أقل وأقل من الناس مهتمين بهذا المشروع.

في صحتك

لماذا لا تقوم بإزالة كل شيء من القلب؟
لا يلزم تنزيل نواة بصفر بايت على الإطلاق.

أجمع أنك رجل عاطفي. ومع ذلك ، يمكنك البقاء هنا ، لذلك أجمع أيضًا أنه في نهاية اليوم تجد المشروع مفيدًا 😉

التوافق مع الإصدارات السابقة أمر لا بد منه في أي مشروع جاد.

ربما هذا ليس بجدية المشروع كما تعتقد؟ أنا لست Adobe كما تعلم؟

وبخلاف ذلك ، سيكون هناك عدد أقل وأقل من الناس مهتمين بهذا المشروع.

لا أشعر بالقلق من فقدان الناس للاهتمام. بدلاً من ذلك ، أركز على إنشاء واجهة برمجة تطبيقات جميلة تجرد مضايقات رسومات الكمبيوتر ، وفي الوقت نفسه ، أريد أن تتناسب المكتبة مع حجم 100 كيلوبايت مضغوط. من المستحيل تضمين جميع الميزات التي يضيفها الأشخاص إلى الأبد.

توافق RemusMar مع الإصدارات السابقة ، إذا كنت تستخدم js libs من هذا القبيل ، فيجب أن تكون قادرًا على إصلاح المشكلة بنفسك إذا لم يعد هناك شيء مدعوم. إذا لم يكن كذلك ، اسأل بطريقة أكثر تعاونًا ، يسعد الجميع بالمساعدة. إذا تم كسر الأمثلة ، فلا تتردد في إصلاحها ...

RemusMar من أول الأشياء التي تعلمتها عن three.js ، عندما بدأت البرمجة ثلاثية الأبعاد في JavaScript ، كانت حقيقة أنها ليست متوافقة مع الإصدارات السابقة.

أعتقد ، بشكل عام ، أن هذا لا يمثل مشكلة على الإطلاق ، لأنه لا يتعين عليّ سوى التأكد من أنه في مشروعي أقوم بالربط بنفس الإصدار من three.js التي أنشأت الكود الخاص بي بها.

كانت سياسة عدم أخذ التوافق العكسي في الاعتبار هي بالتأكيد الأساس لفرصة تطوير three.js بهذه الطريقة الديناميكية ، مع هذه الإمكانيات الرائعة للغاية ، حتى الآن.

هذه خطوة سيئة ريكاردو

مذهل كيف يلاحظ الناس ذلك بعد 70+ مراجعة)

ولكن للإضافة إلى هذه النقطة ، كان أحدهم يكتب لي مؤخرًا "آخر مستقر three.js هو r72" ، لول. لا يوجد ثلاثة مستقر. لا يقومون بتحديث المراجعات القديمة مع إصلاحات الأخطاء ، بدلاً من ذلك هناك إصدار جديد به إصلاحات الأخطاء _ و _ تغيير التغييرات أو الأخطاء الجديدة.

ثم مرة أخرى ، تعمل بعض الأشياء بطريقة سحرية من خلال الإصدارات حتى إذا تم قلب الكود الأساسي رأسًا على عقب. مثل الجلود باستخدام هندسة العازلة)

بينما نحن في موضوع تغيير التغييرات ، فإن أكثر ما يزعجني هو تغييرات json. شخص ما لديه مكون إضافي قديم للتصدير في 3dmax الخاص به ، وأنا أقضي الأعمار في تعديل json يدويًا لجعل الرسوم المتحركة تعمل.

ثم مرة أخرى ، تعمل بعض الأشياء بطريقة سحرية من خلال الإصدارات حتى إذا تم قلب الكود الأساسي رأسًا على عقب. مثل الجلود باستخدام هندسة العازلة)

استغرق ذلك بعض الجهد! 😅

بينما نحن في موضوع تغيير التغييرات ، فإن أكثر ما يزعجني هو تغييرات json. شخص ما لديه مكون إضافي قديم للتصدير في 3dmax الخاص به ، وأنا أقضي الأعمار في تعديل json يدويًا لجعل الرسوم المتحركة تعمل.

نعم. تحتاج الرسوم المتحركة إلى الاستقرار في أسرع وقت ممكن. أعتقد أن نظام الرسوم المتحركة الجديد يعد خطوة رائعة في الاتجاه الصحيح.

يبدو أن هذه العينة معطلة نظرًا لتغييرات r73. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

يا! انسى دائمًا العينات الموجودة في المستندات ...

mrdoob
ما الذي يجب علي استخدامه لاستبدال فئة THREE.Animation "القديمة"؟
هل توجد أمثلة تستخدم نظام الرسوم المتحركة الجديد؟ ليس من الواضح ما هو الجديد في صفحة الأمثلة.

بينما نحن في موضوع تغيير التغييرات ، فإن أكثر ما يزعجني هو تغييرات json. شخص ما لديه مكون إضافي قديم للتصدير في 3dmax الخاص به ، وأنا أقضي الأعمار في تعديل json يدويًا لجعل الرسوم المتحركة تعمل.

لقد كان هذا مصدر قلق لي أيضًا. أنا حقًا لا أرغب في إعادة تصدير مئات النماذج.

تضمين التغريدة
كانت سياسة عدم أخذ التوافق العكسي في الاعتبار هي بالتأكيد الأساس لفرصة تطوير three.js بهذه الطريقة الديناميكية ، مع هذه الإمكانيات الرائعة للغاية ، حتى الآن.

هذا بيان خاطئ.
في الواقع ، فإن كسر التوافق مع الإصدارات السابقة طوال الوقت يجعل مطوري الطرف الثالث يتخلون عن THREE.js
من ناحية أخرى ، لا تعني الميزات الجديدة وإصلاحات الأخطاء كسر التوافق مع المشاريع القديمة.
إذا استمر ريكاردو في هذا الطريق ، فسيخبرنا الوقت ما إذا كنت على صواب أم لا.
في صحتك

لقد كان هذا مصدر قلق لي أيضًا. أنا حقًا لا أرغب في إعادة تصدير مئات النماذج.

متفق عليه! تنسيق json هو شيء أعتقد أن التوافق مع الإصدارات السابقة مهم للغاية. ليس من الصعب القيام به على أي حال.

متفق عليه! تنسيق json هو شيء أعتقد أن التوافق مع الإصدارات السابقة مهم للغاية. ليس من الصعب القيام به على أي حال.

تنهد كبير =]

يبدو أنه من السابق لأوانه بعض الشيء إطلاق إصدار بدون تحديث دليل الترحيل عند إدخال تغييرات. لحسن حظي منذ أن تابعت هذه اللوحات ، كنت على دراية بتغيير الرسوم المتحركة. لن أراهن أن جميع المستخدمين كانوا مستعدين بشكل متساوٍ.

أتفق مع Remus حول إزالة الأشياء من جوهرها فقط للحفاظ على حد الحجم البالغ 100 كيلوبايت. أنا شخصياً أهتم بالوظائف أكثر من 10000 مرة من حلق بضع بايتات. أعلم أنه يمكنني الحصول على الملفات الضرورية من الأمثلة ، لكن يبدو أنه نوع من الألم غير الضروري في المؤخرة (خاصة الاضطرار إلى تحديثها في كل إصدار).

على أي حال ما يكفي من الشكوى مني. بغض النظر عن هذه الانتقادات القليلة ، عمل رائع يا رفاق!

يبدو أنه من السابق لأوانه بعض الشيء إطلاق إصدار بدون تحديث دليل الترحيل عند إدخال تغييرات.

يتطلب القيام بالإفراج بضع خطوات. أحيانا ينفد صبري / تفاني ... 😕
يمكن لأي شخص تحديث صفحة الترحيل. أود الحصول على بعض المساعدة هناك.

يبدو أن هذه العينة معطلة نظرًا لتغييرات r73. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

ثابت!

أين يمكنني أن أجد FontUtils في r74؟ يبدو أنه تمت إزالته في r74 ...

تضمين التغريدة

نعم ، آسف لذلك ، تغيرت واجهة برمجة التطبيقات TextGeometry مرة أخرى. لقد عادت إلى القلب رغم ذلك!

الرجاء استخدام http://threejs.org/examples/webgl_shadowmap.html كمرجع.

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

} );

إذا كان أي شخص مهتمًا ، فهذه هي الطريقة التي قمت بتحميل الخط بها بدون طلب غير متزامن ، باستخدام الوحدة النمطية NPM [email protected] وحزمة الويب: https://gist.github.com/pjanik/49c03c02c66341a26904
إذا كنت تستخدم أي أداة بناء أخرى ، فإن الشيء الأساسي هو تحميل ملف الخط كسلسلة. ربما يمكن استخراج هذا التحليل المضحك لبعض الطرق المساعدة في المستقبل؟

في ملاحظة جانبية ، من الرائع أن تتضمن r74 /examples dir (r73 لم تفعل) ، يرجى الاستمرار في القيام بذلك. : wink: أخيرًا ، يمكنني استخدام حزمة three ، ولا توجد ملفات نصية خارجية بعد الآن (أنا أيضًا أستخدم examples/js/controls/OrbitControls ). سيكون الأمر أكثر روعة إذا تم نشر أمثلة باستخدام تنسيق UMD ، لذلك يمكنني طلب OrbitControls مباشرة دون تبعية ثلاثية عالمية (ليست مشكلة كبيرة ، حيث يمكن لمعظم أدوات البناء التعامل معها ، ولكن لا يزال).

شكر!

أو يمكنك فقط تحديد _typeface_js.loadFace محليًا وتقييمه؟

نعم ، آسف لذلك ، تغيرت TextGeometry API مرة أخرى. لقد عادت إلى القلب رغم ذلك!

كان هذا قرارًا حكيمًا يا ريكاردو.
يلزم إجراء تغيير بسيط في بناء الجملة للمحمل ، ولكنه متوافق مع الإصدارات السابقة.
r71: http://necromanthus.com/Test/html5/koolmoves.html
r74: http://necromanthus.com/Test/html5/koolmoves_r74.html
في صحتك

هل يجب علينا إضافة التحميل الخلفي لهندسة النص في ObjectLoader؟

fraguada حسنًا ، ليس بهذه السهولة ، يجب علينا أيضًا التعامل مع ملف الخط ...

لم يتم تعريف FontUtil في إصدار r74 الذي أحصل عليه: https://github.com/mrdoob/three.js/blob/master/build/three.js

يبدو أن هذا هو نفسه الذي يستخدمه http://threejs.org/examples/webgl_shadowmap.html (باستثناء المصغر) ولكني أيضًا لا أراه بشكل صريح متضمنًا FontUtils أو محرفًا ... ومع ذلك فإن نموذج الصفحة يعمل . (بينما ما زلت أحصل على "لم يتم تعريف _typeface_js") هل تفعل شيئًا بالإضافة إلى ما هو موضح في تعليقك (نموذج الشفرة 6 تعليقات فوق هذا التعليق)؟

تحتاج الوثائق إلى التحديث مع تغيير واجهة برمجة التطبيقات ، وهذا لم يعد ينطبق: http://threejs.org/docs/index.html#Reference/Extras.Geometries/TextGeometry

كان من المفيد للغاية أن يكون لديك مثال أساسي جدًا بدون كل الخطوط والأوزان والحواف المربعة لتسجيل ضغط المفاتيح. لا يعني ذلك أن امتلاكها ليس رائعًا أيضًا ، ولكن وجود واحد أساسي بسيط في أمثلةك كان سيوفر لي الكثير من الوقت.

كان من الممكن أن يساعد هذا المثال كثيرًا: http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry ، ولكن عندما تنظر إلى المصدر ، ينتهي الأمر برسم طارة أثناء سحبها في الموارد الخارجية إلى في الواقع أنجز العمل.

لقد جمعت هذا المثال البسيط على JSFiddle لأي شخص يجد هذا الموضوع.
https://jsfiddle.net/287rumst/1/

كان من المفيد للغاية أن يكون لديك مثال أساسي للغاية

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

سنتان فقط لأنني معجب أيضًا بالتوافق مع الإصدارات السابقة:

إذا تعذر ضمان التوافق ، فسيكون من الجيد أن يكون لديك مجلد upgrade (أو fixes ) في github يعرض الإصدار القديم والمعالجة الجديدة. مرجع.

بهذه الطريقة سيكون من السهل على المبرمجين مواكبة التغييرات.

ما زلت أستخدم r65 بسبب مثل هذه المشكلات "غير المعروفة" التي لا أملك وقتًا إضافيًا أقضيه ، لمعرفة كيفية إصلاح هذه المشكلات.

مرحبًا بالجميع ، لقد انتقلت للتو من r71 إلى r76 واكتشفت برنامج Animation.mixer الجديد. لذلك للحفاظ على عمل مكتبات كائنات json ثلاثية الأبعاد القديمة ، قمت بنسخ MorphAnimMesh.js Animation.js AnimationHandler.js و KeyFrameAnimation.js في مكتبة جافا سكريبت الخاصة بي. ولكن الآن أحصل على خطأ "التسلسل الهرمي للبيانات غير محدد". هل هذا يعني أنه يتعين علي إعادة تصدير جميع كائنات json ثلاثية الأبعاد السابقة من Blender أم أن هناك طريقة للحفاظ على عمل هذه الكائنات؟

مرحبًا ، لا أحد للمساعدة في "التسلسل الهرمي للبيانات غير المحددة"؟

من فضلك ، استخدم StackOverflow للحصول على المساعدة.

يتطلب القيام بالإفراج بضع خطوات. أحيانًا ينفد صبري / تفاني ...: مرتبك:
يمكن لأي شخص تحديث صفحة الترحيل. أود الحصول على بعض المساعدة هناك.

واجهت مؤخرًا هذه المشكلة باستخدام إصدار أقدم من three.js.

ولكن بعد قراءة التعليقات والإهانات التي تلقيتها ، بدلاً من طلب المساعدة ، أردت فقط أن أشكرك على الحفاظ على three.js.

أنت رجل متفان وصبور! : +1:

كان التحديث من r72 إلى r84 مجموعة من الأعمال (حوالي 3 ساعات لمشروع واحد).

معاون، مساعد، مفيد، فاعل خير:

• بالنسبة لمشكلة الخط: راجع التعليمات البرمجية المصدر لـ http://necromanthus.com/Test/html5/koolmoves.html (لم تعد تقوم بتحميل الخط بتنسيق HTML ، ولكن بدلاً من ذلك في JS ، قم بتعيين var وهذا يدخل في المعلمات. احترس من تعيين الخط فقط بعد تحميله)
• رؤية رسائل الخطأ في وحدة تحكم dev ، فهي تساعد كثيرًا ، لأنها تخبرك حتى بما يجب القيام به (عمل جيد mrdoob )
• ألق نظرة أيضًا على https://github.com/mrdoob/three.js/wiki/Migration-Guide

نتيجتي السعيدة: https://www.matheretter.de/geoservant/en/

بالتفصيل ما كنت بحاجة إلى القيام به من الإصدار 72 إلى الإصدار 84:

1. إزالة من ملف html الخاص بك:

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

2. قم بتشغيل مشهد threejs الخاص بك ، ربما تحصل على:

   Uncaught TypeError: c.generateShapes is not a function
   

3. يحدث هذا لأن العارض يبدأ بدون تحميل الخط. لنقم أولاً بتحميل الخط ثم استدعاء العارض عند بدء التشغيل:

   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. عندما أقوم بتعيين النص الجديد أثناء وقت التشغيل ، أحتاج إلى تحديد كائنات المرحلة على النطاق العالمي ، على سبيل المثال:

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

5. مثال على وظيفة البداية:

   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. لقد تلقيت أيضًا الخطأ THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead. لحل هذه المشكلة ، أزلت:

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

والإضافة (كانت الشبكة 1 من قبل ، ثم يلزم تعيين القيمة على 20 للحصول على نفس الشبكة):

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

1. ثم أحتاج إلى الاهتمام بتغيير threejs (تظهر كتحذير في وحدة تحكم Chrome):

6.1 THREE.MeshBasicMaterial: 'ambient' is not a property of this material. بإزالة ambient:color, من new THREE.MeshBasicMaterial();

6.2 تتغير المصابيح ، فقط استبدلها كما هو مذكور في التحذيرات:

    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. - قم بإزالته.

1. لقد غيرت أيضًا إعداد العارض:

   // 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. احتجت أيضًا إلى إضافة لون خلفية بيضاء إلى إعداد المشهد:

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

يعمل تطبيقي الآن كما هو الحال مع إصدار threejs القديم. حظا سعيدا لمشروعك أيضا!