three.js创建场景实例详解
本文主要给大家介绍了three.js中文文档学习之创建场景的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
什么是Three.js？
如果你正在读这篇文章，你可能对Three.js有一定的了解，那我们来简单地介绍下Three.js是什么.
Three.js是一个库，使得WebGL的3D效果在浏览器中运用很容易。而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行，而一个Three.js只需要一点点代码.
本节目标是为 three.js 做简介。我们从使用旋转立方体来搭建场景开始。如果遇到困难需要帮助，页面底部有可参考的源码。
一个场景至少需要的三种类型组件
相机/决定哪些东西将在屏幕上渲染
光源/他们会对材质如何显示，以及生成阴影时材质如何使用产生影响
物体/他们是在相机透视图里主要的渲染队形：方块、球体等
开始前
在计算机中保存如下 HTML 代码，并在 js 目录下包含 three.js，然后在浏览器中打开
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>接下来的代码都会下载 script 标签中
创建示例场景
为了利用three.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 );
让我们花点时间来解释发生了什么。我们现在创建了场景，摄像机和渲染器。
在 three.js 中有几种摄像机。我们暂时用的是 PerspectiveCamera （透视摄像机）
它的第一个属性是视图角（FOV)，它 是能看见的视图范围，其值表示角度大小。
第二个属性是宽高比。大多数情况你想要使用被高除过之后的宽度，不然会发生像在宽屏电视上放旧电影的情况 —— 图像看起来被压扁了。
后面两个属性是近景面和远景面。只会渲染这两个面之间的区域。目前你不必关心这些，使用这些参数能提高性能。
接下来谈谈渲染器。这便是神奇之处。除了我们这里用的 WebGLRenderer 外， three.js 还提供一些渲染器用在不支持 WebGL 的老旧浏览器上。
除了创建渲染器实例，我们也需要设置应用渲染的尺寸。推荐使用填充整个应用的宽高 —— 本例中是浏览器窗口的宽高。对于性能优先的应用，你能使用 setSize 来设置更小的值，比如 window.innerHeight/2， window.innerWidth/2，会渲染一半的尺寸。
如果你想低分辨率地渲染整个尺寸，你可以设置 setSize 的第三个参数 — uodateStyle 为 false ，如果 canvas 元素宽高都为 100%，则会以 1/2 分辨率渲染应用。
再尔，我们需要在 HTML 中添加被渲染的元素。渲染器通过 canvas 来给我们展示场景。
“都很好，但之前说的立方体呢” 让我们现在添加。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;我们需要 BoxGeometry来创建立方体。这个对象包含立方体所有的点（顶点）和填充（面）。我们以后会讨论。
除了几何体外，我们还需要材质为其上色。three.js 提供了一些材质，但我们暂且使用 MeshBasicMaterial。所有材质接受并应用一个包含所有属性的对象。为简单起见，我们仅仅提供一个颜色属性： 绿色 —— 0x00ff00 。和 CSS 和 PS 里的一样采用十六进制的颜色。
我们需要的第三个要素是 Mesh。 mesh 是一个将材质应用到几何体上的对象，然后我们能将其放入场景中，并自由移动。
当我们调用 scene.add() ，我们添加的会默认显示在坐标（0，0,0,）处。这会导致摄像机和立方体内部重叠。为了避免这点，我们简单地把摄像机往外移一点。
渲染场景
如果你在 HTML 文件中复制了如上代码，屏幕不会显示东西。因为我们还没渲染场景。所以我们需要调用渲染器或者动画循环。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();这会创建一个让渲染器每秒绘制一帧的循环。如果你对网页游戏编程不了解，你可能会说“为什么不 写setInterval 函数呢？”事实上，我们可以，但是 requestAnimationFrame 好处更多。最重要的好处是当浏览器切换到另一个标签页时，requestAnimationFrame 会暂停渲染，因此不会浪费宝贵的处理能力和电池寿命。
让立方体动起来
如果你插入了我们刚刚创建的代码，你应该会看见一个绿色的立方体。让它旋转起来不至于单调。
在animate 函数中的 renderer.render 上添加如下代码：
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。
结果
恭喜！你现在创建好了第一个 three.js 应用。很简单，但总得突破。
完整代码参考如下。琢磨一下并深刻理解其工作机理
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
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 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>相关推荐：
Atas ialah kandungan terperinci three.js创建场景实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1381
52
Penjelasan terperinci tentang mendapatkan hak pentadbir dalam Win11
Mar 08, 2024 pm 03:06 PM
Sistem pengendalian Windows ialah salah satu sistem pengendalian yang paling popular di dunia, dan versi baharunya Win11 telah menarik perhatian ramai. Dalam sistem Win11, mendapatkan hak pentadbir adalah operasi penting Hak pentadbir membolehkan pengguna melakukan lebih banyak operasi dan tetapan pada sistem. Artikel ini akan memperkenalkan secara terperinci cara mendapatkan kebenaran pentadbir dalam sistem Win11 dan cara mengurus kebenaran dengan berkesan. Dalam sistem Win11, hak pentadbir dibahagikan kepada dua jenis: pentadbir tempatan dan pentadbir domain. Pentadbir tempatan mempunyai hak pentadbiran penuh ke atas komputer tempatan
Penjelasan terperinci tentang operasi bahagian dalam Oracle SQL
Mar 10, 2024 am 09:51 AM
Penjelasan terperinci tentang operasi bahagi dalam OracleSQL Dalam OracleSQL, operasi bahagi ialah operasi matematik yang biasa dan penting, digunakan untuk mengira hasil pembahagian dua nombor. Bahagian sering digunakan dalam pertanyaan pangkalan data, jadi memahami operasi bahagian dan penggunaannya dalam OracleSQL adalah salah satu kemahiran penting untuk pembangun pangkalan data. Artikel ini akan membincangkan pengetahuan berkaitan operasi bahagian dalam OracleSQL secara terperinci dan menyediakan contoh kod khusus untuk rujukan pembaca. 1. Operasi bahagian dalam OracleSQL
Penjelasan terperinci tentang peranan dan penggunaan pengendali modulo PHP
Mar 19, 2024 pm 04:33 PM
Operator modulo (%) dalam PHP digunakan untuk mendapatkan baki pembahagian dua nombor. Dalam artikel ini, kami akan membincangkan peranan dan penggunaan pengendali modulo secara terperinci, dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan pengendali modulo Dalam matematik, apabila kita membahagi integer dengan integer lain, kita mendapat hasil bagi dan baki. Sebagai contoh, apabila kita membahagi 10 dengan 3, hasil bahagi ialah 3 dan selebihnya ialah 1. Operator modulo digunakan untuk mendapatkan baki ini. 2. Penggunaan operator modulo Dalam PHP, gunakan simbol % untuk mewakili modulus
Penjelasan terperinci tentang fungsi sistem panggilan sistem linux().
Feb 22, 2024 pm 08:21 PM
Penjelasan terperinci tentang fungsi sistem panggilan sistem Linux() Panggilan sistem ialah bahagian yang sangat penting dalam sistem pengendalian Linux Ia menyediakan cara untuk berinteraksi dengan kernel sistem. Antaranya, fungsi system() adalah salah satu fungsi panggilan sistem yang biasa digunakan. Artikel ini akan memperkenalkan penggunaan fungsi system() secara terperinci dan memberikan contoh kod yang sepadan. Konsep Asas Panggilan Sistem Panggilan sistem ialah satu cara untuk atur cara pengguna berinteraksi dengan kernel sistem pengendalian. Program pengguna meminta sistem pengendalian dengan memanggil fungsi panggilan sistem
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Penjelasan terperinci tentang perintah curl Linux
Feb 21, 2024 pm 10:33 PM
Penjelasan terperinci tentang perintah curl Linux Ringkasan: curl ialah alat baris arahan yang berkuasa yang digunakan untuk komunikasi data dengan pelayan. Artikel ini akan memperkenalkan penggunaan asas perintah curl dan memberikan contoh kod sebenar untuk membantu pembaca memahami dan menggunakan arahan dengan lebih baik. 1. Apakah curl? curl ialah alat baris arahan yang digunakan untuk menghantar dan menerima pelbagai permintaan rangkaian. Ia menyokong berbilang protokol, seperti HTTP, FTP, TELNET, dll., dan menyediakan fungsi yang kaya, seperti muat naik fail, muat turun fail, penghantaran data, proksi
Analisis terperinci laluan pembelajaran bahasa C
Feb 18, 2024 am 10:38 AM
Sebagai bahasa pengaturcaraan yang digunakan secara meluas dalam bidang pembangunan perisian, bahasa C adalah pilihan pertama bagi ramai pengaturcara pemula. Mempelajari bahasa C bukan sahaja dapat membantu kita mewujudkan pengetahuan asas pengaturcaraan, tetapi juga meningkatkan kebolehan menyelesaikan masalah dan pemikiran kita. Artikel ini akan memperkenalkan secara terperinci pelan hala tuju pembelajaran bahasa C untuk membantu pemula merancang proses pembelajaran mereka dengan lebih baik. 1. Belajar tatabahasa asas Sebelum mula mempelajari bahasa C, kita perlu memahami peraturan tatabahasa asas bahasa C terlebih dahulu. Ini termasuk pembolehubah dan jenis data, operator, pernyataan kawalan (seperti pernyataan if,
Ketahui lebih lanjut tentang Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Penjelasan terperinci Promise.resolve() memerlukan contoh kod khusus Promise ialah mekanisme dalam JavaScript untuk mengendalikan operasi tak segerak. Dalam pembangunan sebenar, selalunya perlu untuk memproses beberapa tugas tak segerak yang perlu dilaksanakan mengikut turutan, dan kaedah Promise.resolve() digunakan untuk mengembalikan objek Promise yang telah dipenuhi. Promise.resolve() ialah kaedah statik kelas Promise, yang menerima a
