3 डी क्षेत्र कैसे आकर्षित करें?

Question

मैं एचटीएमएल 5.0 कैनवास में 3 डी बॉल या गोलाकार बनाना चाहता हूं। मैं 3 डी क्षेत्र को आकर्षित करने के बारे में एल्गोरिदम को समझना चाहता हूं। यह मेरे साथ कौन साझा कर सकता है?

Answer 1

ठीक है, किसी क्षेत्र की एक छवि हमेशा आपकी स्क्रीन पर एक गोलाकार आकार रखती है, इसलिए केवल एक चीज जो छायांकन करती है वह छायांकन है। यह निर्धारित किया जाएगा कि आप अपना प्रकाश स्रोत कहां रखते हैं।

एल्गोरिदम का सवाल है, ray tracing सरल है, लेकिन यह भी अब तक — द्वारा धीमी तो आप शायद नहीं इसका इस्तेमाल करने के लिए कुछ भी करने में बहुत जटिल क्या करना चाहते हैं एक <CANVAS> (विशेष रूप से है कि वातावरण में उपलब्ध ग्राफिक्स त्वरण के अभाव को देखते हुए), लेकिन यदि आप केवल एक ही क्षेत्र करना चाहते हैं तो यह तेज़ हो सकता है।

Answer 2

आपको एक क्षेत्र का मॉडल करने की आवश्यकता होगी, और यह अलग-अलग रंग होनी चाहिए ताकि जब यह घूमता है तो आप देख सकते हैं कि यह केवल एक क्षेत्र नहीं है, बल्कि इसे प्रस्तुत किया जा रहा है।

अन्यथा, अंतरिक्ष में एक क्षेत्र, इसके चारों ओर संदर्भ बिंदु के साथ एक सर्कल की तरह दिखता है, अगर यह सब एक ठोस रंग है।

आपके साथ शुरू करने के लिए आयत के साथ एक सर्कल ड्राइंग करने की कोशिश करना चाहेंगे, क्योंकि यह आपके पास मुख्य आदिम है।

एक बार जब आप इसे समझें, या पथ विधि का उपयोग करके एक त्रिकोण जैसे एक नया आदिम बनाएं, और एक सर्कल बनाएं, तो आप इसे 3 डी पर ले जाने के लिए तैयार हैं।

3 डी सिर्फ एक चाल है, क्योंकि आप अपने मॉडल को ले लेंगे, शायद एक समीकरण द्वारा उत्पन्न किया गया है, और फिर इसे फ़्लैट करें, जैसा कि आप निर्धारित करते हैं कि कौन से हिस्सों को देखा जाएगा, और फिर इसे प्रदर्शित करें।

लेकिन, आप प्रकाश के स्रोत से कितने दूर हैं, साथ ही प्रकाश के स्रोत के कोण के आधार पर त्रिकोणों का रंग बदलना चाहते हैं।

यह वह जगह है जहां आप ऑप्टिमाइज़ेशन करना शुरू कर सकते हैं, जैसे कि यदि आप पिक्सेल द्वारा यह पिक्सेल करते हैं तो आप रेट्रैसिंग कर रहे हैं। यदि आपके पास बड़े ब्लॉक हैं, और प्रकाश का एक बिंदु स्रोत है, और ऑब्जेक्ट घूर्णन कर रहा है लेकिन चारों ओर नहीं बढ़ रहा है तो आप पुन: गणना कर सकते हैं कि रंग प्रत्येक त्रिभुज के लिए कैसे बदलता है, फिर यह घूर्णन अनुकरण करने के लिए रंग बदलने का मामला है।

एल्गोरिदम इस बात पर निर्भर करेगा कि आप कौन सी सरलीकरण करना चाहते हैं, ताकि आप अनुभव प्राप्त कर सकें और पूछ सकें कि आपने अब तक क्या किया है।

यहां ऐसा करने का एक उदाहरण दिया गया है, और नीचे मैंने 3 डी क्षेत्र भाग की प्रतिलिपि बनाई है, लेकिन कृपया पूरे article देखें।

function Sphere3D(radius) { 
this.point = new Array(); 
this.color = "rgb(100,0,255)" 
this.radius = (typeof(radius) == "undefined") ? 20.0 : radius; 
this.radius = (typeof(radius) != "number") ? 20.0 : radius; 
this.numberOfVertexes = 0; 

// Loop from 0 to 360 degrees with a pitch of 10 degrees ... 
    for(alpha = 0; alpha <= 6.28; alpha += 0.17) { 
    p = this.point[this.numberOfVertexes] = new Point3D(); 

    p.x = Math.cos(alpha) * this.radius; 
    p.y = 0; 
    p.z = Math.sin(alpha) * this.radius; 

    this.numberOfVertexes++; 
} 

// Loop from 0 to 90 degrees with a pitch of 10 degrees ... 
// (direction = 1) 

// Loop from 0 to 90 degrees with a pitch of 10 degrees ... 
// (direction = -1) 

for(var direction = 1; direction >= -1; direction -= 2) { 
    for(var beta = 0.17; beta < 1.445; beta += 0.17) { 

    var radius = Math.cos(beta) * this.radius; 
    var fixedY = Math.sin(beta) * this.radius * direction; 

    for(var alpha = 0; alpha < 6.28; alpha += 0.17) { 
     p = this.point[this.numberOfVertexes] = new Point3D(); 

     p.x = Math.cos(alpha) * radius; 
     p.y = fixedY; 
     p.z = Math.sin(alpha) * radius; 

     this.numberOfVertexes++; 
    } 
    } 
} 
} 

Answer 3

अद्यतन: इस कोड को काफी पुरानी है और सीमित है। अब 3 डी क्षेत्रों करने के लिए पुस्तकालय हैं: http://techslides.com/d3-globe-with-canvas-webgl-and-three-js/

---

दस साल पहले मैं वास्तव में गणित करके एक बनावट क्षेत्र रेंडर करने के लिए बाहर काम करने के लिए एक जावा एप्लेट लिखा था जहां क्षेत्र की सतह के दृश्य में था (त्रिकोण का उपयोग नहीं)।

मैं कैनवास के लिए जावास्क्रिप्ट में यह फिर से लिख दिया और मुझे मिल गया है एक demo rendering the earth as a sphere:

alt text http://sam.haslers.info/render-sphere/JavaScript+Canvas.png

मैं मेरी मशीन पर चारों ओर 22 एफपीएस। जो कि जावा संस्करण जितना तेज़ है, उतना तेज़ नहीं है, अगर थोड़ा तेज़ नहीं है!

अब जावा कोड लिखने के बाद से यह काफी समय है - और यह काफी उलझन में था - इसलिए मुझे वास्तव में यह याद नहीं है कि यह कैसे काम करता है, मैंने अभी इसे जावास्क्रिप्ट पोर्ट किया है। हालांकि यह कोड के धीमे संस्करण से है और मुझे यकीन नहीं है कि तेज संस्करण जावा विधियों में ऑप्टिमाइज़ेशन के कारण था, मैं गणित में पिक्सल या स्पीडअप से हेरफेर करता था, यह काम करता है कि कौन से पिक्सेल को प्रस्तुत करना है बनावट। मैं उस समय भी इसी तरह से संबंधित था जिसने एक समान एप्लेट था जो कि मेरे मुकाबले बहुत तेज था लेकिन फिर मुझे नहीं पता कि जावास्क्रिप्ट में उनके द्वारा किए गए किसी भी गति में सुधार संभव होगा क्योंकि यह जावा पुस्तकालयों पर निर्भर हो सकता है। (मैंने कभी अपना कोड नहीं देखा है, इसलिए मुझे नहीं पता कि उन्होंने यह कैसे किया।)

तो गति पर सुधार करना संभव हो सकता है। लेकिन यह अवधारणा के सबूत के रूप में अच्छी तरह से काम करता है।

आप गति की तुलना में रुचि रखते हैं, जावा संस्करण यहां हैं:

इन मृत लिंक जब तक मैं अगले मेरी वेबसाइट को अपडेट कर रहे हैं

• Mine - Instant start, slower to render
• Mine - very slow to start, Much faster render - इस संस्करण में प्रकाश भी है। उस पर माउस खींचें अक्ष को घुमाएं।
• Someone else's - शुरू करने के लिए तेज़, प्रस्तुत करने के लिए बहुत तेज।

मैं अपने तेजी से संस्करण कुछ समय परिवर्तित करता है, तो मैं जावास्क्रिप्ट संस्करण में कोई गति सुधार प्राप्त कर सकते हैं देखने के लिए पर एक जाना होगा।

Answer 4

आप तीन.जेएस लाइब्रेरी के साथ प्रयास कर सकते हैं, जो कोर वेबग्ल प्रोग्रामिंग से बहुत सारे कोड को सारणीबद्ध करता है। three.js lib से अपने एचटीएमएल में तीन.जेएस लाइब्रेरी शामिल करें।

यू सफारी ब्राउज़र के लिए कैनवास रेंडरर का उपयोग कर सकते, WebGL क्रोम

लिए काम करता है कृपया JS FIDDLE FOR SPHERE

वर कैमरा, दृश्य, सामग्री, जाल, ज्यामिति, रेंडरर लगता है

function drawSphere() { 
    init(); 
    animate(); 

} 

function init() { 
    // camera 

    scene = new THREE.Scene() 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/innerHeight, 1, 1000); 
    camera.position.z = 300; 
    scene.add(camera); 

    // sphere object 
    var radius = 50, 
     segments = 10, 
     rings = 10; 
    geometry = new THREE.SphereGeometry(radius, segments, rings); 
    material = new THREE.MeshNormalMaterial({ 
     color: 0x002288 
    }); 
    mesh = new THREE.Mesh(geometry, material); 

    //scene 
    ; 
    scene.add(mesh); 


    // renderer 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

} 


function animate() { 
    requestAnimationFrame(animate); 
    render(); 

} 

function render() { 

    mesh.rotation.x += .01; 
    mesh.rotation.y += .02; 
    renderer.render(scene, camera); 


} 

// fn callin 
drawSphere();