جافاسكريبت - تحويل قيمة زاوية الرؤية إلى قيمة منظور CSS3D

إذا كنت أرغب في الحصول على كاميرا بزاوية رؤية 60°، فكيف يمكن حساب قيمة منظور CSS3D؟

perspective: ?;
perspective-origin: center center;

لقد وجدت وصفًا حول كيفية حساب مصفوفة الإسقاط من قيمة المنظور، لكنني ما زلت لا أفهمه حقًا: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation

لذلك إذا كان لدي مجال رؤية محدد، وأعلم عرض/ارتفاع الإزاحة للعنصر، فكيف يجب أن أحسب قيمة المنظور المطلوبة؟

أين الطائرة القريبة والطائرة البعيدة؟

الإجابة رقم 1

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

إذا كنت أقرأها بشكل صحيح، لديك هرم بقاعدة على بعد [perspective px] من المشاهد. لذا إذا كنت تريد مجال رؤية 60°، لديك مثلث بزاوية 30° من المركز إلى الزوايا وتحتاج إلى إيجاد طول الضلع المجاور:

Math.pow( w/2*w/2 + h/2*h/2, 0.5 ) / Math.tan( 30 * Math.PI / 180 )

أعتقد ;) يعطي منظورًا بقيمة 968 لعرض 1000x500، ويبدو هذا صحيحًا بعد أن لعبت بشكل عشوائي مع -webkit-perspective كثيرًا

مسودة عمل وحدة تحويلات CSS ثلاثية الأبعاد تقدم الشرح التالي:

منظور(<رقم>)

يحدد مصفوفة الإسقاط المنظوري. تقوم هذه المصفوفة برسم خريطة لمكعب المشاهدة على هرم قاعدته بعيدة بلا نهاية عن المشاهد وقمته تمثل موقع المشاهد. المنطقة القابلة للعرض هي المنطقة المحصورة بين الحواف الأربع لواجهة العرض (الجزء من نافذة المتصفح المستخدم لعرض صفحة الويب بين موقع المشاهد ونقطة على مسافة لانهائية من المشاهد). العمق، المقدم كمعامل للدالة، يمثل مسافة مستوى z=0 من المشاهد. القيم المنخفضة تعطي هرمًا أكثر تسطحًا وبالتالي تأثير منظور أكثر وضوحًا. تُعطى القيمة بالبكسل، لذلك فإن القيمة 1000 تعطي مقدارًا متوسطًا من تقصير المنظور والقيمة 200 تعطي مقدارًا شديدًا. تُحسب المصفوفة بالبدء بمصفوفة الوحدة واستبدال القيمة في الصف 3، العمود 4 بالقيمة -1/العمق. يجب أن تكون قيمة العمق أكبر من صفر، وإلا تكون الدالة غير صالحة.