1. Kubus
Meskipun nama bentuk ini adalah Cubegegeometry, sebenarnya adalah kuboid, yaitu, panjang, lebar dan tinggi dapat diatur ke nilai yang berbeda. Konstruktornya adalah:
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
Lebar: panjang dalam arah x
Tinggi: Panjang ke arah Y
Kedalaman: panjang dalam arah z
Lebarsegments: Jumlah segmen dalam arah x (opsional, nilai default 1)
Heightsegments: Jumlah segmen dalam arah Y (sama seperti di atas)
Depthsegments: Jumlah segmen dalam arah z (sama seperti di atas)
Tidak berpartisi:
var material = new Three.MeshBasicMaterial ({Color: 0xffff00, wireframe: true}); drawcube (scene, material); function drawcube (scene, material) {var cube = baru tiga.Mesh (tiga.cubegeometry baru (1, 2, 3), material); scene.add (cube);}Posisi default suatu objek adalah asal, dan untuk kubus, posisi pusat geometriknya di titik asal.
Segmentasi:
var cube = baru tiga.
Mengapa ada begitu banyak garis jahat? Masalah versi. Versi R73:
Perhatikan bahwa segmentasi ini mensegmentasi enam wajah , bukan voxels dari kubus, sehingga tidak tersegmentasi di tengah kubus, dan hanya enam sisi yang tersegmentasi.
2. Pesawat
Pesawat di sini (Planegeometry) sebenarnya adalah persegi panjang, bukan bidang dengan ukuran tak terbatas dalam arti matematika. Konstruktornya adalah:
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
Lebar: panjang dalam arah x
Tinggi: Panjang ke arah Y
Lebarsegments: Jumlah segmen dalam arah x (opsional, nilai default 1)
Heightsegments: Jumlah segmen dalam arah Y (sama seperti di atas)
Tiga.planegeometry baru (2, 4); Pesawat yang dibuat berada di bidang di mana sumbu x dan sumbu y berada, dan efeknya adalah sebagai berikut:
3. Sphere
Konstruktor bola (spheregegeometry) adalah:
THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart,phiLength, thetaStart, thetaLength)// radius: Radius// segmentsWidth: Number of segments on longitude// segmentsHeight: Number of segments on latitude// phiStart: Radius at the beginning of longitude// phiLength: Radius at the beginning of longitude// thetaStart: Radius at the Awal Lintang // Panjangnya: Jari -jari di awal garis lintang
3.1 Jumlah Segmen Lintang dan Bujur
Pertama, mari kita pahami Segmentswidth dan SegmentSheight. Gunakan var sphere = baru tiga.
Segmentswidth setara dengan bujur dipotong menjadi beberapa kelopak, sedangkan SegmentSheight setara dengan garis lintang dipotong menjadi beberapa lapisan.
Efek Three.spheregeometry Baru (3, 5, 4):
Efek Three.spheregeometry Baru (3, 8, 6):
Efek Three.Spheregeometry Baru (3, 18, 12):
Dalam implementasi lapisan yang mendasari grafik, tidak ada konsep kurva, dan kurva semuanya terdiri dari beberapa perkiraan polyline. Untuk bidang, ketika kedua nilai ini besar, polyhedron yang terbentuk dapat kira -kira dianggap sebagai bidang.
3.2 Longitude Arc
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3) berarti bahwa bujur awal adalah matematika.pi / 6 dan rentang bujur adalah Math.pi / 3.
Efeknya adalah sebagai berikut:
Perhatikan bahwa segmentswidth di sini berarti bahwa bujur dibagi menjadi 8 blok di daerah di mana matematika.pi/6 melintasi matematika.pi/3, alih -alih bujur dari seluruh bola dibagi menjadi 8 blok sebelum menilai bagian dalam rentang bujur ini.
3.3 Latitude Radian
Hal yang sama berlaku untuk radian lintang. new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) berarti bahwa lintangnya mencakup dari Math.pi / 6 melalui matematika.pi / 3.
Efeknya adalah sebagai berikut:
Efek new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2) :
4. Kode Sumber
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js tes 4 </itement> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </canvas> </body> <script type = "text/javascript" script "script" script "script =" JAB. " type = "text/javascript"> function init () {var renderer = new three.webglrenderer ({canvas: document.geteLementById ('mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new three.scene (); // kamera var kamera = tiga.othographycamera baru (-5, 5, 3.75, -3.75, 0.1, 100); kamera.position.set (25, 25, 25); kamera.lookat (baru tiga.vector3 (0, 0, 0)); scene.add (kamera); // material var material = baru tiga.MeshBasicMaerial ({color: 0xffff00, wireframe: true}); drawcube (adegan, materi); // cube // drawplane (adegan, materi); // pesawat // drawsphere (adegan, materi); // sphere // renderer renderer.render (adegan, kamera); } function drawcube (adegan, material) {var cube = baru tiga.mesh (tiga.cubegeometry baru (1, 2, 3, 2, 2, 3), material); scene.add (kubus); } function drawplane (scene, material) {var plane = new three.mesh (baru tiga.planeGeometry (2, 4), material); scene.add (pesawat); } Fungsi drawsphere (adegan, material) {var sphere = baru tiga.mesh (tiga baru. 0, Math.pi * 2, Math.pi / 6, Math.pi / 3), materi); // var sphere = baru tiga.mesh (tiga baru. scene.add (sphere); } </script> </html>Di atas adalah seluruh konten bentuk geometris yang dipelajari oleh Three.js. Editor akan memperbarui artikel tentang tiga.js satu demi satu. Silakan terus perhatikan wulin.com.