Three.js adalah mesin 3D yang berjalan di browser. Anda dapat menggunakannya untuk membuat berbagai adegan tiga dimensi, termasuk kamera, cahaya dan bayangan, bahan dan benda lainnya. Anda dapat melihat banyak demonstrasi indah di berandanya. Namun, mesin ini masih dalam tahap pengembangan yang relatif belum matang. API yang tidak memadai dan kurangnya dokumentasinya telah meningkatkan kesulitan belajar untuk pemula (terutama kurangnya dokumentasi). Kode Three.js di -host di GitHub.
http://github.com/mrdoob/three.js/
Mari kita lihat contohnya
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> </title> </head> <script type = "text/javascript" src = "js/three.js"> </script> <tyle> div#canvas-frame {border: none; kursor: pointer; Lebar: 100%; Tinggi: 600px; latar belakang-warna: #eeeeee; } </tyle> <script> var renderer; function initthree () {width = document.geteLementById ('canvas-frame'). clientWidth; height = document.geteLementById ('canvas-frame'). clientheight; // Renderer menentukan hasil rendering dan elemen apa yang harus ditarik pada halaman dan cara menggambarnya. renderer = new three.webglrenderer ({antialias: true}); renderer.setsize (lebar, tinggi); // DomeLement mewakili kanvas di renderer, dan semua rendering ditarik pada document.getElementById ('Canvas-frame'). AppendChild (renderer.DomElement); renderer.setClearColor (0xfffff, 1.0); } // Kamera Perspektif Kamera Var Kamera; function initcamera () {kamera = baru tiga.PerSpectiveCamera (45, lebar/tinggi, 1.10000); camera.position.x = 0; kamera.position.y = 1000; kamera.position.z = 0; kamera.up.y = 0; kamera.up.y = 0; kamera.up.z = 1; kamera.lookat ({x: 0, y: 0, z: 0}); } // scene var scene; fungsi initscene () {scene = new three.scene (); } // cahaya var cahaya; function initlight () {light = new three.directionAllight (0xff0000, 1.0, 0); light.position.set (100, 100, 200); scene.add (ringan); } // Geometri var Cube; function initObject () {// Deklarasikan geometri, ada parameter simpul yang dapat digunakan untuk menyimpan titik var geometri = baru tiga.geometry (); // LinebasicMaerial (parameter) // Terjemahan Dasar: Dasar // Terjemahan Bahan: Bahan Baku // Parameter: adalah objek yang mendefinisikan penampilan suatu bahan. Ini berisi beberapa atribut untuk mendefinisikan materi. Atribut ini adalah // terjemahan: parameter // warna: warna garis, diwakili dalam hexadecimal, dan warna default putih. // Linewidth // Linecap: Penampilan kedua ujung garis adalah titik akhir bulat secara default. Efeknya hanya dapat dilihat ketika garis lebih tebal. // Terjemahan CAP: HAT // LINEJOIN: Penampilan titik koneksi antara dua jalur, sudut bulat secara default. // Bergabunglah dengan terjemahan: Ditambahkan // VertexColors: Tentukan apakah bahan garis menggunakan elemen vertex, ini adalah nilai boolean. Ini berarti bahwa warna setiap bagian dari garis diinterpolasi sesuai dengan warna titik. // Terjemahan Vertex: Vertex // Fog: Menentukan apakah warna bahan dipengaruhi oleh efek kabut global. // terjemahan: fog var material = new three.lineBasicMATerial ({vertexColors: true}); // Tentukan dua warna yang merupakan warna dari dua titik akhir var color1 = baru tiga. // Bahan garis dapat ditentukan oleh warna dua titik var p1 = baru tiga.vector3 (); var p2 = baru tiga.vector3 (); p1.set (-100,0,100); p2.set (100,0, -100); geometry.vertices.push (p1); geometry.vertices.push (p2); geometry.colors.push (Color1, Color2); // Tentukan garis dan tiga parameter akan diteruskan di sini // Yang pertama adalah geometri geometri, yang berisi dua simpul dan warna simpul // yang kedua adalah bahan dari garis // yang ketiga adalah metode koneksi dari sekelompok titik var line = baru tiga. // tambahkan baris ke scene.add (line); } function threeStart () {initThree (); initcamera (); initscene (); initlight (); initObject (); renderer.clear (); renderer.render (adegan, kamera); } </script> <body onload = "threeStArt ()"> <div id = "canvas-frame"> </div> </body> </html>Saya harap contoh ini dapat membantu Anda mempelajari tiga.js