थ्रीजेएस: एक पृष्ठभूमि छवि बनाना जो वास्तव में खिड़की से फिट बैठता है?

Question

थ्रीजेएस (जावास्क्रिप्ट/वेबजीएल) में मैं एक स्थिर पृष्ठभूमि छवि कैसे बना सकता हूं जो दृश्य का हिस्सा है लेकिन पूर्ण आंतरिक ब्राउज़र विंडो में फिट करने के लिए वास्तव में आकार बदलता है? जब मैं सीएसएस का उपयोग करता हूं तो यह काम करता है लेकिन फिर renderer.domElement.toDataURL ('image/png') के माध्यम से "स्क्रीनशॉट" बनाते समय पृष्ठभूमि छवि नहीं दिखाई देगी, जिसे मैं चाहता हूं। धन्यवाद!

Answer 1

आप पृष्ठभूमि छवि को प्रस्तुत करने के लिए एक अलग पृष्ठभूमि दृश्य का उपयोग कर सकते हैं।

var bg = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2, 0), 
    new THREE.MeshBasicMaterial({map: backgroundTexture}) 
); 

// The bg plane shouldn't care about the z-buffer. 
bg.material.depthTest = false; 
bg.material.depthWrite = false; 

var bgScene = new THREE.Scene(); 
var bgCam = new THREE.Camera(); 
bgScene.add(bgCam); 
bgScene.add(bg); 

फिर अपने रेंडर लूप में, अपने वास्तविक दृश्य से पहले बीजीएससीन बनाएं।

renderer.autoClear = false; 
renderer.clear(); 
renderer.render(bgScene, bgCam); 
renderer.render(scene, cam); 

Answer 2

यदि आप एक पैनोरमा दर्शक या ऐसा ही कुछ करने की कोशिश कर रहे हैं मेरे लिए स्पष्ट नहीं था ...

है कि आपके लक्ष्य था, यहाँ एक जवाब मैं की समस्या को हल करने के लिए दे दिया है गाया क्षेत्र के लिए एक equirectangular छवि डालने (जो माउस द्वारा नियंत्रित किया जा सकता है और/या deviceOrientation [स्मार्टफोन में accelerometer]):

https://stackoverflow.com/a/37129356/1920145