Three.js之如何创建一个场景
上一面讲述了向场景中添加物体对象。这一篇准备把每个功能点细细的讲述一遍，一方面是为了加深自己的理解。另一方面希望能够
帮助到有需要的人。
一、在学习WEBGL的时候，你应该先了解要创建一个WebGL程序需要哪些步骤。就跟弄梅菜扣肉一样，需要哪些步骤。
初始化WebGL绘图上下文
初始化着色器程序
建立模型和数据缓存
完成绘制和动画
这是一个面向过程编程。然而three.js不一样，是一个面向对象编程。主要构建三个对象 scene(场景) camera(相机) renderer(渲染器).。
这三个东西是什么意思呢？听起来完全不懂是啥。举个小列子：就拿电影来说。场景（scene)就好比整个布局空间，相机(camera)相当于
拍摄期。而渲染器相当于(renderer)把拍摄的电影转换成胶卷也就是电脑的屏幕。
场景和空间包含了3D和数据模型，而renderer包含了着色器和WebGL绘图上下文。
二、THREE.JS创建场景，相机，渲染器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Demo1(three入门第一篇)</title></head><body></body><script type="text/javascript" src="js/three.js?1.1.11"></script><script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
远景相机，相当于人眼观察模式
肯定有人会有疑问，这几个参数是什么意思呢？
第一个 75 是 视角
width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
的width/height图形就不会被压变形。
下面两个是近裁剪面。和远裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);</script></html>电影，场景，胶卷都准备好了，那如何才能展示演员呢？也就是上面一篇说 的如何向场景中添加物体对象呢？
三、添加演员（3D立方体）。
//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh); //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。renderer.render(scene,camera); //把画面转换成相机，并播放
这样这个演员就入镜了。
四、如何让这个演员动起来呢？
//懂动起来。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X选择mesh.rotation.y += 0.1; //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放 }
loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
比如浏览器Tab切换后停止渲染以节约资源、
和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
简直就是动画神奇 */
演员入镜，并有了，打动效果。第一个小短篇算完成了吧。
五、整个代码(本来想托管到githup上)。发现太慢了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1(three入门第一篇)</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/three.js?1.1.11"></script>
<script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
远景相机，相当于人眼观察模式
肯定有人会有疑问，这几个参数是什么意思呢？
第一个 75 是 视角
width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
的width/height图形就不会被压缩。
下面两个是近裁剪面。和远裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh); //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。//懂动起来。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X选择mesh.rotation.y += 0.1; //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放 }
loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
比如浏览器Tab切换后停止渲染以节约资源、
和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
简直就是动画神奇 */</script>
</html>六、在WebGL中three.js扮演了重要的角色，然而中文api真的少。只有一个一个的慢慢累积。
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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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
1662
14
1418
52
1311
25
1261
29
1234
24
Tutorial Model Penyebaran Bernilai Masa Anda, dari Universiti Purdue
Apr 07, 2024 am 09:01 AM
Penyebaran bukan sahaja boleh meniru lebih baik, tetapi juga "mencipta". Model resapan (DiffusionModel) ialah model penjanaan imej. Berbanding dengan algoritma yang terkenal seperti GAN dan VAE dalam bidang AI, model resapan mengambil pendekatan yang berbeza. Idea utamanya ialah proses menambah hingar pada imej dan kemudian secara beransur-ansur menolaknya. Cara mengecilkan dan memulihkan imej asal adalah bahagian teras algoritma. Algoritma akhir mampu menghasilkan imej daripada imej bising rawak. Dalam beberapa tahun kebelakangan ini, pertumbuhan luar biasa AI generatif telah membolehkan banyak aplikasi menarik dalam penjanaan teks ke imej, penjanaan video dan banyak lagi. Prinsip asas di sebalik alat generatif ini ialah konsep resapan, mekanisme pensampelan khas yang mengatasi batasan kaedah sebelumnya.
Hasilkan PPT dengan satu klik! Kimi: Biarlah 'pekerja migran PPT' menjadi popular dahulu
Aug 01, 2024 pm 03:28 PM
Kimi: Hanya dalam satu ayat, dalam sepuluh saat sahaja, PPT akan siap. PPT sangat menjengkelkan! Untuk mengadakan mesyuarat, anda perlu mempunyai PPT; untuk menulis laporan mingguan, anda perlu mempunyai PPT untuk membuat pelaburan, anda perlu menunjukkan PPT walaupun anda menuduh seseorang menipu, anda perlu menghantar PPT. Kolej lebih seperti belajar jurusan PPT Anda menonton PPT di dalam kelas dan melakukan PPT selepas kelas. Mungkin, apabila Dennis Austin mencipta PPT 37 tahun lalu, dia tidak menyangka satu hari nanti PPT akan berleluasa. Bercakap tentang pengalaman sukar kami membuat PPT membuatkan kami menitiskan air mata. "Ia mengambil masa tiga bulan untuk membuat PPT lebih daripada 20 muka surat, dan saya menyemaknya berpuluh-puluh kali. Saya rasa ingin muntah apabila saya melihat PPT itu." ialah PPT." Jika anda mengadakan mesyuarat dadakan, anda harus melakukannya
Bagaimana untuk menyelesaikan masalah ekor panjang dalam senario pemanduan autonomi?
Jun 02, 2024 pm 02:44 PM
Semalam semasa temu bual, saya telah ditanya sama ada saya telah membuat sebarang soalan berkaitan ekor panjang, jadi saya fikir saya akan memberikan ringkasan ringkas. Masalah ekor panjang pemanduan autonomi merujuk kepada kes tepi dalam kenderaan autonomi, iaitu, kemungkinan senario dengan kebarangkalian yang rendah untuk berlaku. Masalah ekor panjang yang dirasakan adalah salah satu sebab utama yang kini mengehadkan domain reka bentuk pengendalian kenderaan autonomi pintar satu kenderaan. Seni bina asas dan kebanyakan isu teknikal pemanduan autonomi telah diselesaikan, dan baki 5% masalah ekor panjang secara beransur-ansur menjadi kunci untuk menyekat pembangunan pemanduan autonomi. Masalah ini termasuk pelbagai senario yang berpecah-belah, situasi yang melampau dan tingkah laku manusia yang tidak dapat diramalkan. "Ekor panjang" senario tepi dalam pemanduan autonomi merujuk kepada kes tepi dalam kenderaan autonomi (AVs) kes Edge adalah senario yang mungkin dengan kebarangkalian yang rendah untuk berlaku. kejadian yang jarang berlaku ini
Semua anugerah CVPR 2024 diumumkan! Hampir 10,000 orang menghadiri persidangan itu di luar talian dan seorang penyelidik Cina dari Google memenangi anugerah kertas terbaik
Jun 20, 2024 pm 05:43 PM
Pada awal pagi 20 Jun, waktu Beijing, CVPR2024, persidangan penglihatan komputer antarabangsa teratas yang diadakan di Seattle, secara rasmi mengumumkan kertas kerja terbaik dan anugerah lain. Pada tahun ini, sebanyak 10 kertas memenangi anugerah, termasuk 2 kertas terbaik dan 2 kertas pelajar terbaik Selain itu, terdapat 2 pencalonan kertas terbaik dan 4 pencalonan kertas pelajar terbaik. Persidangan teratas dalam bidang visi komputer (CV) ialah CVPR, yang menarik sejumlah besar institusi penyelidikan dan universiti setiap tahun. Mengikut statistik, sebanyak 11,532 kertas telah diserahkan tahun ini, 2,719 daripadanya diterima, dengan kadar penerimaan 23.6%. Menurut analisis statistik data CVPR2024 Institut Teknologi Georgia, dari perspektif topik penyelidikan, bilangan kertas terbesar ialah sintesis dan penjanaan imej dan video (Imageandvideosyn
Bagaimana untuk membuat folder pada Telefon Realme?
Mar 23, 2024 pm 02:30 PM
Tajuk: Panduan Pemula Telefon Realme: Bagaimana Membuat Folder pada Telefon Realme? Dalam masyarakat hari ini, telefon bimbit telah menjadi alat yang sangat diperlukan dalam kehidupan manusia. Sebagai jenama telefon pintar popular, Telefon Realme digemari pengguna kerana sistem pengendaliannya yang ringkas dan praktikal. Dalam proses menggunakan telefon Realme, ramai orang mungkin menghadapi situasi di mana mereka perlu mengatur fail dan aplikasi pada telefon mereka, dan mencipta folder ialah cara yang berkesan. Artikel ini akan memperkenalkan cara membuat folder pada telefon Realme untuk membantu pengguna mengurus kandungan telefon mereka dengan lebih baik. Tidak.
Daripada logam kosong kepada model besar dengan 70 bilion parameter, berikut ialah tutorial dan skrip sedia untuk digunakan
Jul 24, 2024 pm 08:13 PM
Kami tahu bahawa LLM dilatih pada kelompok komputer berskala besar menggunakan data besar-besaran Tapak ini telah memperkenalkan banyak kaedah dan teknologi yang digunakan untuk membantu dan menambah baik proses latihan LLM. Hari ini, perkara yang ingin kami kongsikan ialah artikel yang mendalami teknologi asas dan memperkenalkan cara menukar sekumpulan "logam kosong" tanpa sistem pengendalian pun menjadi gugusan komputer untuk latihan LLM. Artikel ini datang daripada Imbue, sebuah permulaan AI yang berusaha untuk mencapai kecerdasan am dengan memahami cara mesin berfikir. Sudah tentu, mengubah sekumpulan "logam kosong" tanpa sistem pengendalian menjadi gugusan komputer untuk latihan LLM bukanlah proses yang mudah, penuh dengan penerokaan dan percubaan dan kesilapan, tetapi Imbue akhirnya berjaya melatih LLM dengan 70 bilion parameter proses terkumpul
Cara mencipta keluarga dengan Gree+
Mar 01, 2024 pm 12:40 PM
Ramai rakan menyatakan bahawa mereka ingin tahu cara membuat keluarga dalam perisian Gree+ Berikut adalah kaedah operasi untuk anda Rakan yang ingin mengetahui lebih lanjut, datang dan lihat dengan saya. Mula-mula, buka perisian Gree+ pada telefon mudah alih anda dan log masuk. Kemudian, dalam bar pilihan di bahagian bawah halaman, klik pilihan "Saya" di hujung kanan untuk memasuki halaman akaun peribadi. 2. Selepas datang ke halaman saya, terdapat pilihan "Buat Keluarga" di bawah "Keluarga". 3. Seterusnya lompat ke halaman untuk mencipta keluarga, masukkan nama keluarga yang akan ditetapkan dalam kotak input mengikut gesaan, dan klik butang "Simpan" di penjuru kanan sebelah atas selepas memasukkannya. 4. Akhir sekali, gesaan "simpan berjaya" akan muncul di bahagian bawah halaman, menunjukkan bahawa keluarga telah berjaya dibuat.
AI sedang digunakan |. AI mencipta vlog kehidupan seorang gadis yang tinggal bersendirian, yang menerima berpuluh ribu suka dalam masa 3 hari
Aug 07, 2024 pm 10:53 PM
Editor Laporan Kuasa Mesin: Yang Wen Gelombang kecerdasan buatan yang diwakili oleh model besar dan AIGC telah mengubah cara kita hidup dan bekerja secara senyap-senyap, tetapi kebanyakan orang masih tidak tahu cara menggunakannya. Oleh itu, kami telah melancarkan lajur "AI dalam Penggunaan" untuk memperkenalkan secara terperinci cara menggunakan AI melalui kes penggunaan kecerdasan buatan yang intuitif, menarik dan padat serta merangsang pemikiran semua orang. Kami juga mengalu-alukan pembaca untuk menyerahkan kes penggunaan yang inovatif dan praktikal. Pautan video: https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ Baru-baru ini, vlog kehidupan seorang gadis yang tinggal bersendirian menjadi popular di Xiaohongshu. Animasi gaya ilustrasi, ditambah dengan beberapa perkataan penyembuhan, boleh diambil dengan mudah dalam beberapa hari sahaja.
