1. Bentuk teks
Berbicara tentang teks 3D, saya ingat beberapa kata artistik dalam kata -kata di tahun -tahun awal saya:
Kemudian TextGeometry dapat digunakan untuk membuat bentuk teks tiga dimensi.
Menggunakan bentuk teks membutuhkan pengunduhan dan mengutip pustaka font tambahan. Di sini, mari kita ambil font helvetiker sebagai contoh.
Mengutip:
<script type = "text/javascript" src = "path/helvetiker_regular.typeface.json"> </script>
Konstruktor TextGeometry adalah:
Three.TextGeometry (Teks, Parameter)
Teks adalah string literal;
Parameter adalah objek yang terdiri dari parameter berikut:
・ Ukuran: Ukuran font, umumnya ketinggian huruf kapital
・ Tinggi: Ketebalan teks
・ Kurvei: Jumlah segmen busur membuat kurva teks lebih halus
・ Font: Font, default adalah 'helvetiker', dan file font yang perlu direferensikan
・ Berat: nilainya 'normal' atau 'tebal', menunjukkan apakah lebih tebal
・ Gaya: nilainya 'normal' atau 'miring', menunjukkan apakah italics itu miring
・ Bevelenabled: Nilai boolean, apakah akan menggunakan chamfer, artinya memotong miring di tepi
・ Bevelthickness: ketebalan talang
・ Bevelsize: Lebar talang
Buat teks tiga dimensi: new THREE.TextGeometry('Hello', {size: 1, height: 1})， efeknya adalah:
Bahan dan pencahayaan dapat disesuaikan dengan tepat untuk mencapai efek yang diinginkan:
// Objek bersinar logam bahan Bahan = baru tiga.MeshphongMaterial ({Color: 0xffff00, Specular: 0xffff00, // Tentukan kecerahan material dan warna bagian sorotan. Jika diatur ke warna yang sama dengan nilai warnanya, material lain yang lebih mirip dengan logam yang akan diperoleh. Jika diatur ke abu -abu, itu akan terlihat seperti plastik, plastik yang lebih mirip dengan logam. 30}); // Directional Light var light = baru tiga.directionAllight (0xffffff); light.position.set (-5, 10, 5); scene.add (light);Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js tes enam </ title> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </canvas> </body> <script type = "teks/javascript" script "script" script/javascript "script/javascript" Informasi lebih lanjut di https://github.com/mrdoob/three.js/tree/master/examples/fonts -> <script type = "text/javascript"> function init () {var renderer = new three.webglenderer ({canvas: document.getelementByid ('maincanVas') ({{{{{{{{{{{{{canvas: document. renderer.setClearColor (0x0000000); var scene = new three.scene (); // kamera var kamera = tiga.othographycamera baru (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.position.set (5, 5, 20); kamera.lookat (tiga.vector3 baru (1, 0, 0)); scene.add (kamera); // var material = new three.MeshBasicMATerial ({// warna: 0xffff00, // wireframe: true //}); // Objek Metal Shining Var Material = baru Three.MeshphongMaterial ({Color: 0xffff00, Specular: 0xFFFFF00, // Tentukan kecerahan material dan warna bagian sorotan. Jika diatur ke warna yang sama dengan properti warna, 0/ Bahan yang lebih baik akan diperoleh. Jika diatur ke abu-abu abu-abu, itu akan terlihat seperti plastik seperti plastik: 0/ Bahan akan diperoleh. Jika diatur ke abu-abu abu-abu, itu akan terlihat seperti plastik shinines: 0/ // Direction Light var Light = New Three.DirectionAllight (0xFFFFFF); light.position.set (-5, 10, 5); scene.add (ringan); // Muat font var loader = new three.fontloader (); loader.load ('./ helvetiker_regular.typeface.json', function (font) {var mesh = baru tiga.mesh (tiga.textgeometry baru ('hello', {font: font, ukuran: 1, tinggi: 1}), materi); scene.add (mesh); // size: renderer: 1}), scene.add (mesh); // renderer. } </script> </html>2. Bentuk khusus
Untuk bentuk yang tidak disediakan oleh tiga.js, bentuk khusus dapat disediakan untuk dibuat.
Karena bentuk khusus memerlukan spesifikasi manual dari setiap posisi titik dan koneksi titik, jika bentuknya sangat kompleks, perhitungan programmer akan relatif besar. Dalam hal ini, disarankan untuk membuat model dalam perangkat lunak pemodelan seperti 3DS MAX dan kemudian mengimpornya ke adegan menggunakan Three.js, yang akan lebih efisien dan nyaman.
Bentuk khusus menggunakan kelas Geometry , yang merupakan kelas induk dari bentuk geometrik lainnya seperti CubeGeometry , SphereGeometry , dll., Dan konstruktornya adalah:
THREE.Geometry()
Inisialisasi geometri, lalu atur posisi simpul dan status koneksi simpul:
Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js menguji enam dua </ title> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </canvas> </body> <script type = "Text/Javascript"> </canvas> </body> <script type = "Text/Javascript"> </canvas> </body> <script type = "text/javascript" "script" </canvas> </body> <script type = "text/javascript" "script" "script" "script" "script" "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); var material = new Three.MeshBasicMaterial ({Color: 0xffff00, wireframe: true}); // inisialisasi geometri var geometry = baru tiga.geometry (); // atur posisi vertex // top 4 simpul geometry.vertices.push (tiga.vector3 baru (-1, 2, -1)); geometry.vertices.push (baru tiga.vector3 (1, 2, -1)); geometry.vertices.push (baru tiga.vector3 (1, 2, 1)); geometry.vertices.push (tiga.vector3 baru (-1, 2, 1)); geometry.vertices.push (tiga.vector3 baru (-1, 2, 1)); geometry.vertices.push (tiga.vector3 baru (-1, 2, 1)); geometry.vertices.push (tiga.vector3 baru (-1, 2, 1)); geometry.vertices.push (tiga.vector3 baru (-1, 2, 1)); // geometri 4 kalimat bawah.Vertices.push (baru tiga.vector3 (-2, 0, -2)); geometry.vertices.push (tiga.vector3 baru (2, 0, -2)); geometry.vertices.push (baru tiga.vector3 (2, 0, 2)); geometry.vertices.push (baru tiga.vector3 (2, 0, 2)); geometry.vertices.push (tiga.vector3 baru (-2, 0, 2)); // atur status koneksi vertex // Top geometry.faces.push (baru tiga.face3 (0, 1, 3)); geometry.faces.push (baru tiga.face3 (1, 2, 3)); // geometry.faces.push (baru tiga.face4 (0, 1, 2, 3)); // geometri bawah.faces.push (baru tiga.face3 (4, 5, 6)); geometry.faces.push (baru tiga.face3 (5, 6, 7)); // geometry.faces.push (baru tiga.face4 (4, 5, 6, 7)); // geometri samping.faces.push (tiga baru. Face3 (1, 5, 6)); geometry.faces.push (baru tiga.face3 (6, 2, 1)); geometry.faces.push (baru tiga.face3 (2, 6, 7)); geometry.faces.push (baru tiga.face3 (7, 3, 2)); geometry.faces.push (baru tiga.face3 (3, 7, 0)); geometry.faces.push (baru tiga.face3 (7, 4, 0)); geometry.faces.push (baru tiga.face3 (0, 4, 5)); geometry.faces.push (baru tiga.face3 (0, 4, 5)); geometry.faces.push (baru tiga.face3 (0, 4, 5)); geometry.faces.push (baru tiga.face3 (0, 5, 1)); // // wajah terdiri dari empat simpul // geometry.faces.push (baru tiga.face4 (0, 1, 5, 4)); // geometry.faces.push (baru tiga.face4 (1, 2, 6, 5)); // geometry.faces.push (baru tiga.face4 (2, 3, 7, 6)); // geometry.faces.push (baru tiga.face4 (3, 0, 4, 7)); var mesh = baru tiga.mesh (geometri, material); scene.add (mesh); // render renderer.render (adegan, kamera); } </script> </html> Perlu dicatat bahwa new THREE.Vector3(-1, 2, -1) menciptakan vektor yang ditambahkan ke geometry.vertices Array Vertiks sebagai posisi verteks.
Dan wajah yang terdiri dari tiga simpul dibuat oleh new THREE.Face3(0, 1, 2) dan menambahkannya ke array geometry.faces . Tiga parameter adalah nomor urutan dari tiga simpul dalam geometry.vertices . VERSICES. Jika Anda perlu mengatur tambalan yang terdiri dari empat simpul, Anda juga dapat menggunakan THREE.Face4 .
// Top geometry.faces.push (baru tiga. 5)); Geometry.faces.push (baru tiga.
Di atas adalah seluruh konten dari tiga.js belajar bentuk teks dan bentuk khusus yang disusun oleh editor. Editor juga telah menyusun beberapa artikel terkait tentang tiga.js. Jika Anda membutuhkannya, Anda dapat melihatnya melalui tautan artikel yang relevan di bawah ini. Saya berharap ini dapat membantu semua orang yang belajar tiga.js.