three.js
geometries
खोज…
टिप्पणियों
उदाहरण तीन.js R79 (संशोधन 79) के रूप में काम करते हैं।
THREE.BoxGeometry
THREE.BoxGeometry cuboids और cubes जैसे बक्से बनाता है।
क्यूब्स
THREE.BoxGeometry का उपयोग करके बनाए गए क्यूब्स सभी पक्षों के लिए समान लंबाई का उपयोग करेंगे।
जावास्क्रिप्ट
//Creates scene and camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//Creates renderer and adds it to the DOM
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//The Box!
//BoxGeometry (makes a geometry)
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//Material to apply to the cube (green)
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
//Applies material to BoxGeometry
var cube = new THREE.Mesh( geometry, material );
//Adds cube to the scene
scene.add( cube );
//Sets camera's distance away from cube (using this explanation only for simplicity's sake - in reality this actually sets the 'depth' of the camera's position)
camera.position.z = 5;
//Rendering
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
'रेंडर' फंक्शन को नोटिस करें। यह घन को दूसरी बार 60 गुना बढ़ाता है।
पूर्ण कोड (HTML के साथ)
<!DOCTYPE html>
<html>
<head>
<title>THREE.BoxGeometry</title>
<script src="http://threejs.org/build/three.js"></script>
</head>
<body>
<script>
//Above JavaScript goes here
</script>
</body>
</html>
घनाभ
लाइन var geometry = new THREE.BoxGeometry( 1, 1, 1 ); हमें एक घन देता है। घनाभ बनाने के लिए, बस मापदंडों को बदलें - वे क्रमशः घन की लंबाई, ऊंचाई और गहराई को परिभाषित करते हैं।
उदाहरण:
...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...
अधिक (घन सिद्ध करना त्रि-आयामी है)
क्यूब सिर्फ एक वर्ग प्रतीत हो सकता है। यह साबित करने के लिए कि यह, बिना किसी संदेह के, त्रि-आयामी है, कोड की निम्नलिखित पंक्तियों को 'रेंडर' फंक्शन में जोड़ें:
...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...
और मीरा घन के रूप में देखो गोल ... और गोल ... और गोल ...
रंग बिरंगा
डरपोक के लिए नहीं...
पूरे घन के लिए समान रंग है ... हरा। उबाऊ। प्रत्येक चेहरे को एक अलग रंग बनाने के लिए, हमें ज्यामिति के चेहरे को खोदना होगा।
var geometry = new THREE.BoxGeometry(3, 3, 3, 1, 1, 1);
/*Right of spawn face*/
geometry.faces[0].color = new THREE.Color(0xd9d9d9);
geometry.faces[1].color = new THREE.Color(0xd9d9d9);
/*Left of spawn face*/
geometry.faces[2].color = new THREE.Color(0x2196f3);
geometry.faces[3].color = new THREE.Color(0x2196f3);
/*Above spawn face*/
geometry.faces[4].color = new THREE.Color(0xffffff);
geometry.faces[5].color = new THREE.Color(0xffffff);
/*Below spawn face*/
geometry.faces[6].color = new THREE.Color(1, 0, 0);
geometry.faces[7].color = new THREE.Color(1, 0, 0);
/*Spawn face*/
geometry.faces[8].color = new THREE.Color(0, 1, 0);
geometry.faces[9].color = new THREE.Color(0, 1, 0);
/*Opposite spawn face*/
geometry.faces[10].color = new THREE.Color(0, 0, 1);
geometry.faces[11].color = new THREE.Color(0, 0, 1);
var material = new THREE.MeshBasicMaterial( {color: 0xffffff, vertexColors: THREE.FaceColors} );
var cube = new THREE.Mesh(geometry, material);
नोट: चेहरों को रंगने का तरीका सबसे अच्छा तरीका नहीं है, लेकिन यह अच्छी तरह से (पर्याप्त) काम करता है।
टिप्पणियाँ
HTML दस्तावेज़ के शरीर में canvas कहाँ है?
मैन्युअल रूप से शरीर में एक canvas जोड़ने की आवश्यकता नहीं है। निम्नलिखित तीन लाइनें
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
रेंडरर, उसका canvas बनाएं और canvas को DOM में जोड़ें।
THREE.CylinderGeometry
THREE.CylinderGeometry सिलिंडर का निर्माण।
सिलेंडर
पिछले उदाहरण से जारी, बॉक्स बनाने के लिए कोड नीचे से बदला जा सकता है।
//Makes a new cylinder with
// - a circle of radius 5 on top (1st parameter)
// - a circle of radius 5 on the bottom (2nd parameter)
// - a height of 20 (3rd parameter)
// - 32 segments around its circumference (4th parameter)
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//Yellow
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
खरोंच से निर्माण करने के लिए, यहां कोड है।
//Creates scene and camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//Creates renderer and adds it to the DOM
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//The Cylinder!
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//Yellow
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
//Sets camera's distance away from cube (using this explanation only for simplicity's sake - in reality this actually sets the 'depth' of the camera's position)
camera.position.z = 30;
//Rendering
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
अधिक (सिलेन्डर साबित करना त्रि-आयामी है)
सिलेंडर बस लग सकता है ... द्वि-आयामी। यह साबित करने के लिए कि यह, बिना किसी संदेह के, त्रि-आयामी है, कोड की निम्नलिखित पंक्तियों को 'रेंडर' फंक्शन में जोड़ें:
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
और खुश उज्ज्वल सिलेंडर एक अंधेरे, काले रंग की पृष्ठभूमि के बीच बेतरतीब ढंग से घूमेगा ...