Three.js: حساب مجال الرؤية لكاميرا المنظور

تم إنشاؤها على ٢ فبراير ٢٠١٢  ·  19تعليقات  ·  مصدر: mrdoob/three.js

نظرًا لعدم وجود خبرة سابقة في استخدام 3D ، فقد واجهت بعض المشكلات التي قد تكون معرفة عامة بالنسبة لك للمحترفين ثلاثي الأبعاد ؛).
لدي مجموعة متنوعة من أحجام المشاهد (800 × 600 ، 1200 × 100 وما إلى ذلك).
ما هي الصيغة التي يمكنني استخدامها للتأكد من أن كائنًا بموضع z يساوي 0 وعرضه وارتفاعه نفس المشهد يملأ المشهد بأكمله.

على سبيل المثال: Object Mesh A هي 1200x100 وهي على الموضع Z 0. المشهد هو 1200x100 أيضًا. الكاميرا في وضع z 1500. ما هو مجال الرؤية لجعل الكائن يملأ المشهد؟

أنا أبحث عن شيء ما على طول خط ((أ / ب) * ج): د.

كمية لا حصر لها من المجد لمن هو بارع بما يكفي للإجابة على سؤالي :)

Question

التعليق الأكثر فائدة

height المرئي بمجال الرؤية الرأسي vFOV والمسافة من الكاميرا dist هي

height = 2 * Math.tan( ( vFOV / 2 ) ) * dist;

width المرئي هو

aspect = window_width / window_height;
hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
width  = 2 * Math.tan( ( hFOV / 2 ) ) * dist;

معلمة مجال الرؤية للكاميرا في الملف THREE.js هي المعلمة الرأسية.

استخدم مجموعتي المعادلات لحساب vFOV المطلوب مرتين ، وحدد الإجابة الأكبر.

ال 19 كومينتر

height المرئي بمجال الرؤية الرأسي vFOV والمسافة من الكاميرا dist هي

height = 2 * Math.tan( ( vFOV / 2 ) ) * dist;

width المرئي هو

aspect = window_width / window_height;
hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
width  = 2 * Math.tan( ( hFOV / 2 ) ) * dist;

معلمة مجال الرؤية للكاميرا في الملف THREE.js هي المعلمة الرأسية.

استخدم مجموعتي المعادلات لحساب vFOV المطلوب مرتين ، وحدد الإجابة الأكبر.

شكرا على الرد :)
أنا في حيرة من أمري. من أين أحصل على المتغير vFOV؟
هل هو ارتفاع الجسم الذي يجب أن يملأ المشهد؟
إذا كان الأمر كذلك ، فأنا أحصل على أرقام غريبة (في النطاق 1000) ، فكيف يمكنني ترجمة ذلك إلى مجال الرؤية النهائي.

لقد أنشأت كمانًا http://jsfiddle.net/dmYgr/6/
هل يمكنك أن تريني هناك كيف أفعل هذا؟

شكرا جزيلا لك. من منشورك ، يمكنني بالفعل أن أشعر أنك عبقري أكثر مني ؛)

استخدم المعادلة الأولى وحلها من أجل vFOV ، ثم استخدمها كمعامل fov للكاميرا.

المشهد الخاص بي 800 * 600.
مسافة الكاميرا 1000.

كيف أستخدم هذه الأرقام في صيغتك.
لا أعرف ما الذي يجب ملؤه في vFOV.

الارتفاع = 2 * Math.tan ((vFOV / 2)) * dist ؛ <- أنت تخبرني أن أبدأ هنا ، ولكن ما هو الرقم الذي يجب أن يحل محل vFOV؟

استخدم المعادلة الأولى وحل من أجل vFOV هكذا

vFOV = 2 * Math.atan( height / ( 2 * distance ) );

ثم استخدم ذلك كمعامل fov للكاميرا.

var renderWidth = 800;
var renderHeight = 600;
var cameraPosition = 1000;
var vFOV = 2 * Math.atan( renderWidth / ( 2 * cameraPosition ) );
var height = 2 * Math.tan( ( vFOV / 2 ) ) * cameraPosition;
var aspect = renderWidth / renderHeight;
var hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
var width  = 2 * Math.tan( ( hFOV / 2 ) ) * cameraPosition;

نتيجة:
vFOV = 0.7610127542247298 وهو ليس مجال فوف صالح

var vFOV = 2 * Math.atan( renderHeight / ( 2 * cameraPosition ) );
var height = 2 * Math.tan( ( vFOV / 2 ) ) * cameraPosition;

var aspect = renderWidth / renderHeight;
var hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
var width  = 2 * Math.tan( ( hFOV / 2 ) ) * cameraPosition;

vFOV = 0.5829135889557342 وهو أيضًا ليس مجال رؤية صالح

هل يمكنك ملء المثال بالنسبة لي وإظهار مثال يعطي رقم FOV صالحًا؟
الرقم الصحيح للمثال أعلاه هو في مكان ما حول 37

في كمانك ،

الارتفاع = ارتفاع شبكة الطائرة الخاصة بك = 500.

المسافة = camera.z - plane.z = 1000-100 = 900.

vFOV = 2 * Math.atan (الارتفاع / (2 * المسافة)) = 0.5419 راديان ، أو 31.04 درجة.

2 * Math.atan (500 / (2 * 900)) = 0.5418937006768411 وفقًا لمتصفحي (google chrome)

عذرًا ، لقد أهملت إظهار التحويل من الراديان إلى الدرجات. لقد قمت بتحديث منشوري السابق.

شكرا جزيلا لك! :د
هاه ، استغرق الأمر 10 ردود لكنها تعمل الآن :).
شكرا لك مرة أخرى!

Tobiasartz :-)

ويست لانجلي. انت ملك. شكرا لك.

كان هذا مفيد للغاية !! شكرا @ WestLangley !

شكرا WestLangley !!
نظرًا لأن الأمر استغرق مني بعض الوقت لأدرك أنني بحاجة إلى إضافة تحويل من المشعات إلى درجات ، فأنا أضيف هنا مثالاً مع الكود النهائي:

var distance = 1000;
var FOV = 2 * Math.atan( window.innerHeight / ( 2 * distance ) ) * 180 / Math.PI;
var camera = new THREE.PerspectiveCamera( FOV, window.innerWidth/window.innerHeight, 0.1, distance );
camera.position.z = distance;

@ Emanuele-Spatola الصيغة الخاصة بك لا معنى لها. window.innerHeight على وحدات بكسل. distance الأرجح لا يفعل ذلك

لقد قمت بتحديث عبث Tobiasartz بهذه الصيغة ويبدو أنها تعمل:
http://jsfiddle.net/dmYgr/63/
حجم اللوحة القماشية 500 بكسل ، والطائرة 495 × 495 وهناك حوالي 5 بكسل من الحدود حولها.
لماذا 1000 بكسل ليست مسافة صحيحة؟

http://jsfiddle.net/dmYgr/65/

لماذا 1000 بكسل ليست مسافة صحيحة؟

هل سبق لك أن وضعت كاميرا 1000 بكسل أمام موضوعك؟

يمكنك وضع كاميرا حقيقية على بعد 10 أقدام لترى مشهدًا بعرض 10 أقدام. وبالمثل ، يمكنك وضع كاميرا افتراضية على بعد 1000 بكسل لعرض مشهد بعرض 1000 بكسل.

أستخدم هذا عندما أعرف ارتفاع وعرض المشهد ومسافة الكاميرا ...

var distance = 1000,height=window.innerHeight,width=window.innerWidth
var diag = Math.sqrt((height*height)+(width*width))
var FOV = 2 * Math.atan( diag / ( 2 * distance ) ) * 180 / Math.PI;
var camera = new THREE.PerspectiveCamera( FOV, window.innerWidth/window.innerHeight, 0.1, distance );
camera.position.z = distance;

بهذه الطريقة يتم التعامل أيضًا مع مواقف مثل الارتفاع> العرض ...

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات