THREE.JS: कैमरे के संबंध में ऑब्जेक्ट आकार प्राप्त करें और स्क्रीन पर ऑब्जेक्ट स्थिति

Question

मैं 3 डी प्रोग्रामिंग के लिए नौसिखिया हूं, मैंने वेबजीएल से 3 डी वर्ल्ड को तीन.जेएस के साथ एक्सप्लोर करना शुरू कर दिया।

मैं कैमरा.position.z और ऑब्जेक्ट की "Z" स्थिति बदलते समय ऑब्जेक्ट आकार को पूर्व निर्धारित करना चाहता हूं।

उदाहरण के लिए: मेरे पास 100x100x100 के आकार पर घन जाल है।

cube = new THREE.Mesh(
     new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),  
     new THREE.MeshFaceMaterial() 
    ); 

और 1,8311874

camera = new THREE.PerspectiveCamera(45, aspect_ratio, 1, 30000); 

मैं आकार जानना चाहता हूँ की पहलू अनुपात के साथ कैमरा स्क्रीन पर कि घन वस्तु के (2 डी & ऊंचाई चौड़ाई) जब,

camera.position.z = 750; 
cube.position.z = 500; 

क्या इसे खोजने/पूर्व निर्धारित करने का कोई तरीका है?

Answer 1

आप Three.js - Width of view में बताए गए सूत्रों का उपयोग करके कैमरे से दी गई दूरी के लिए दृश्य ऊंचाई की गणना कर सकते हैं। कैमरा क्षेत्र के देखने FOV Three.js में खड़ी एक, नहीं क्षैतिज है:

var vFOV = camera.fov * Math.PI/180;  // convert vertical fov to radians 
var height = 2 * Math.tan(vFOV/2) * dist; // visible height 

आपके मामले में कैमरा FOV 45 डिग्री

vFOV = PI/4. 

(नोट है, इसलिए ।! इसलिए 50 = 200, आपके मामले में दिखाई ऊंचाई

है - 500 - एक)

कैमरे से घन के सामने चेहरा (महत्वपूर्ण) के लिए दूरी 750 है

height = 2 * tan(PI/8) * 200 = 165.69. 

के बाद से घन के सामने चेहरा 100 x 100 है, दिखाई ऊंचाई घन द्वारा प्रतिनिधित्व के अंश

fraction = 100/165.69 = 0.60. 

तो अगर आप पिक्सल में कैनवास ऊंचाई पता है, तो की ऊंचाई है पिक्सेल में घन 0.60 गुणा मूल्य है।

मेरे द्वारा प्रदान किया गया लिंक दिखाता है कि दृश्य चौड़ाई की गणना कैसे करें, ताकि यदि आप इसकी आवश्यकता हो तो आप उसी गणना में उसी गणना कर सकते हैं।