three.js
बनावट और सामग्री

aframe Angular 2 CSS HTML html5-canvas JavaScript jQuery Node.js SVG TypeScript

परिचय

सामग्री और बनावट के लिए एक अच्छा परिचय।

डिफ्यूज़, बम्प, स्पेक्युलर और ट्रांसपेरेंट टेक्सचर।

पैरामीटर

पैरामीटर	विवरण
रंग	रंग के आरजीबी घटक का संख्यात्मक मूल्य।
तीव्रता	प्रकाश की शक्ति / तीव्रता का संख्यात्मक मान।
FOV	देखने के लिए कैमरा फ्रेट ऊर्ध्वाधर क्षेत्र।
पहलू	कैमरा फ्रेज़म पहलू अनुपात।
पास में	प्लेन के पास कैमरा फ्राम।
दूर	कैमरा फ्रुम दूर तल।
त्रिज्या	क्षेत्र त्रिज्या। डिफ़ॉल्ट 50 है।
widthSegments	क्षैतिज खंडों की संख्या। न्यूनतम मान 3 है, और डिफ़ॉल्ट 8 है।
heightSegments	ऊर्ध्वाधर खंडों की संख्या। न्यूनतम मान 2 है, और डिफ़ॉल्ट 6 है।
phiStart	क्षैतिज प्रारंभिक कोण निर्दिष्ट करें। डिफ़ॉल्ट 0 है।
phiLength	क्षैतिज स्वीप कोण आकार निर्दिष्ट करें। डिफ़ॉल्ट Math.PI * 2 है।
thetaStart	ऊर्ध्वाधर शुरुआती कोण निर्दिष्ट करें। डिफ़ॉल्ट 0 है।
thetaLength	ऊर्ध्वाधर स्वीप कोण आकार निर्दिष्ट करें। डिफ़ॉल्ट मैथ है।

टिप्पणियों

डेमो लिंक

एक मॉडल पृथ्वी बनाना

इस उदाहरण के लिए टेक्स्ट यहां उपलब्ध हैं: http://planetpixelemporium.com/planets.html

स्थापना या सेटअप

आप npm के माध्यम से तीन स्थापित कर सकते हैं

npm install three

या इसे अपने HTML पेज पर स्क्रिप्ट के रूप में जोड़ें

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js" />

HTML:

<html>
<head>
    <meta charset=utf-8>
    <title>Earth Model</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js" />
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

दृश्य बनाना

वास्तव में तीन.js के साथ कुछ भी प्रदर्शित करने में सक्षम होने के लिए, हमें तीन चीजें चाहिए: एक दृश्य, एक कैमरा और एक रेंडरर। हम कैमरे के साथ दृश्य को प्रस्तुत करेंगे।

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

क्षेत्र का निर्माण

क्षेत्र के लिए ज्यामिति बनाएँ
एक फोंग सामग्री बनाएँ
एक 3D ऑब्जेक्ट बनाएँ
इसे दृश्य में जोड़ें

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshPhongMaterial();
var earthmesh = new THREE.Mesh(geometry, material);

डिफ्यूज़ टेक्सचर जोड़ें

फैलाना बनावट सतह का मुख्य रंग निर्धारित करता है। जब हम इसे एक क्षेत्र में लागू करते हैं, तो हमें निम्नलिखित छवि मिलती है।

material.map    = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

एक टक्कर नक्शा बनावट जोड़ना

इसका प्रत्येक पिक्सेल सतह पर ऊंचाई के रूप में कार्य करता है।
पहाड़ अपनी छाया की बदौलत अधिक स्पष्ट दिखाई देते हैं।
यह बदलना संभव है कि मैप बम्पस्केल पैरामीटर के साथ प्रकाश को कितना प्रभावित करता है।
बम्प मैप (विस्थापन मानचित्र के विपरीत) का उपयोग करने के लिए कोई अतिरिक्त कोने नहीं बनाए गए या आवश्यक नहीं हैं

material.bumpMap   = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');     
material.bumpScale = 0.05;

एक Specular Texture जोड़ना

किसी बनावट के साथ किसी वस्तु की 'चमक' को बदल देता है।
प्रत्येक पिक्सेल स्पेक्युलैरिटी की तीव्रता निर्धारित करता है।
इस मामले में, केवल समुद्र ही स्पेक्युलर है क्योंकि पानी पृथ्वी की तुलना में प्रकाश को दर्शाता है।
आप स्पेक्युलर रंग को स्पेक्युलर पैरामीटर से नियंत्रित कर सकते हैं।

material.specularMap = THREE.ImageUtils.loadTexture('images/earthspec1k.jpg')
material.specular  = new THREE.Color('grey')

क्लाउड लेयर जोड़ना

हम बनाने canvasCloud एक कैनवास के साथ, और एक बनावट के रूप में इसका इस्तेमाल करते हैं।
हम ऐसा इसलिए करते हैं क्योंकि jpg एक अल्फा चैनल को हैंडल नहीं करता है। (हालांकि, पीएनजी की एक छवि है)
हमें निम्नलिखित छवियों के आधार पर बनावट बनाने के लिए कोड बनाने की आवश्यकता है।

var geometry   = new THREE.SphereGeometry(0.51, 32, 32)
var material  = new THREE.MeshPhongMaterial({
  map         : new THREE.Texture(canvasCloud),
  side        : THREE.DoubleSide,
  opacity     : 0.8,
  transparent : true,
  depthWrite  : false,
});
var cloudMesh = new THREE.Mesh(geometry, material)
earthMesh.add(cloudMesh)

हम cloudMesh को cloudMesh से earthMesh ताकि वे एक साथ आगे बढ़ें।
हम depthWrite अक्षम depthWrite और transparent: true सेट करते हैं transparent: true तीन बताने के लिए transparent: true है। क्लाउड स्पष्ट रूप से पारदर्शी है।
हम दोनों पक्षों को सेट THREE.DoubleSide इसलिए दोनों पक्ष दिखाई देंगे।
- यह पृथ्वी के किनारे पर कलाकृतियों को बनाने से बचता है।
अंत में, हम opacity: 0.8 सेट करते हैं opacity: 0.8 बादलों को अधिक पारभासी बनाने के लिए opacity: 0.8

घूर्णी आंदोलन को जोड़ना

अपने रेंडर लूप में, आप बस रोटेशन को बढ़ाते हैं

अंतिम स्पर्श के रूप में, हम क्लाउड लेयर को चेतन करेंगे ताकि यह अधिक यथार्थवादी दिखाई दे।

updateFcts.push(function(delta, now) {
    cloudMesh.rotation.y += 1 / 8 * delta;
    earthMesh.rotation.y += 1 / 16 * delta;
  })

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow