So erstellen Sie eine Szene in Three.js
Im vorherigen Abschnitt wird das Hinzufügen von Objekten zur Szene beschrieben. In diesem Artikel möchte ich einerseits jeden Funktionspunkt detailliert beschreiben, um mein Verständnis zu vertiefen. Andererseits hoffe ich
den Bedürftigen zu helfen.
1. Wenn Sie WEBGL lernen, sollten Sie zunächst die Schritte verstehen, die zum Erstellen eines WebGL-Programms erforderlich sind. Welche Schritte sind genau wie bei der Zubereitung von geschmortem Schweinefleisch mit eingelegtem Gemüse erforderlich?
WebGL-Zeichnungskontext initialisieren
Shader-Programm initialisieren
Modell und Datencache erstellen
Vollständige Zeichnung und Animation
Dies ist eine prozessorientierte Programmierung. Three.js ist jedoch anders. Es handelt sich um eine objektorientierte Programmierung. Konstruieren Sie hauptsächlich drei Objekte: Szene (Szene), Kamera (Kamera) Renderer (Renderer).
Was bedeuten diese drei Dinge? Es hört sich nicht so an, als wüsste ich überhaupt, was es ist. Um ein kleines Beispiel zu geben: Nehmen Sie Filme als Beispiel. Die Szene ist wie der gesamte Layoutraum und die Kamera ist wie der
Aufnahmezeitraum. Der Renderer entspricht der Umwandlung des gefilmten Films in einen Film, der den Computerbildschirm darstellt.
Szenen und Räume enthalten 3D- und Datenmodelle, während Renderer Shader und WebGL-Zeichnungskontexte enthalten.
2. THREE.JS erstellt Szene, Kamera, Renderer
<!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>Der Film, die Szene und der Film sind alle fertig, wie können wir also die Schauspieler zeigen? ? Das heißt, wie fügt man der Szene Objekte hinzu, wie im obigen Artikel erwähnt?
3. Schauspieler hinzufügen (3D-Würfel).
//演员进场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); //把画面转换成相机，并播放
Auf diese Weise ist der Schauspieler im Bild.
4. Wie bringt man diesen Schauspieler dazu, sich zu bewegen?
//懂动起来。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。
简直就是动画神奇 */
Der Schauspieler kam ins Bild und hatte eine beeindruckende Wirkung. Die erste Kurzgeschichte ist fast fertig.
5. Der gesamte Code (wollte ursprünglich auf GitHup gehostet werden). Fand es zu langsam.
<!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>6. Three.js spielt eine wichtige Rolle in WebGL, aber es gibt wirklich wenige chinesische APIs. Es sammelt sich nur langsam eins nach dem anderen an.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Szene in Three.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1677
14
1431
52
1333
25
1278
29
1257
24
Generieren Sie PPT mit einem Klick! Kimi: Lassen Sie zuerst die „PPT-Wanderarbeiter' populär werden
Aug 01, 2024 pm 03:28 PM
Kimi: In nur einem Satz, in nur zehn Sekunden ist ein PPT fertig. PPT ist so nervig! Um ein Meeting abzuhalten, benötigen Sie einen PPT; um einen wöchentlichen Bericht zu schreiben, müssen Sie einen PPT vorlegen, auch wenn Sie jemanden des Betrugs beschuldigen PPT. Das College ähnelt eher dem Studium eines PPT-Hauptfachs. Man schaut sich PPT im Unterricht an und macht PPT nach dem Unterricht. Als Dennis Austin vor 37 Jahren PPT erfand, hatte er vielleicht nicht damit gerechnet, dass PPT eines Tages so weit verbreitet sein würde. Wenn wir über unsere harte Erfahrung bei der Erstellung von PPT sprechen, treiben uns Tränen in die Augen. „Es dauerte drei Monate, ein PPT mit mehr als 20 Seiten zu erstellen, und ich habe es Dutzende Male überarbeitet. Als ich das PPT sah, musste ich mich übergeben.“ war PPT.“ Wenn Sie ein spontanes Meeting haben, sollten Sie es tun
Ein Diffusionsmodell-Tutorial, das Ihre Zeit wert ist, von der Purdue University
Apr 07, 2024 am 09:01 AM
Diffusion kann nicht nur besser imitieren, sondern auch „erschaffen“. Das Diffusionsmodell (DiffusionModel) ist ein Bilderzeugungsmodell. Im Vergleich zu bekannten Algorithmen wie GAN und VAE im Bereich der KI verfolgt das Diffusionsmodell einen anderen Ansatz. Seine Hauptidee besteht darin, dem Bild zunächst Rauschen hinzuzufügen und es dann schrittweise zu entrauschen. Das Entrauschen und Wiederherstellen des Originalbilds ist der Kernbestandteil des Algorithmus. Der endgültige Algorithmus ist in der Lage, aus einem zufälligen verrauschten Bild ein Bild zu erzeugen. In den letzten Jahren hat das phänomenale Wachstum der generativen KI viele spannende Anwendungen in der Text-zu-Bild-Generierung, Videogenerierung und mehr ermöglicht. Das Grundprinzip dieser generativen Werkzeuge ist das Konzept der Diffusion, ein spezieller Sampling-Mechanismus, der die Einschränkungen bisheriger Methoden überwindet.
Wie lässt sich das Long-Tail-Problem in autonomen Fahrszenarien lösen?
Jun 02, 2024 pm 02:44 PM
Gestern wurde ich während des Interviews gefragt, ob ich irgendwelche Long-Tail-Fragen gestellt hätte, also dachte ich, ich würde eine kurze Zusammenfassung geben. Das Long-Tail-Problem des autonomen Fahrens bezieht sich auf Randfälle bei autonomen Fahrzeugen, also mögliche Szenarien mit geringer Eintrittswahrscheinlichkeit. Das wahrgenommene Long-Tail-Problem ist einer der Hauptgründe, die derzeit den betrieblichen Designbereich intelligenter autonomer Einzelfahrzeugfahrzeuge einschränken. Die zugrunde liegende Architektur und die meisten technischen Probleme des autonomen Fahrens wurden gelöst, und die verbleibenden 5 % der Long-Tail-Probleme wurden nach und nach zum Schlüssel zur Einschränkung der Entwicklung des autonomen Fahrens. Zu diesen Problemen gehören eine Vielzahl fragmentierter Szenarien, Extremsituationen und unvorhersehbares menschliches Verhalten. Der „Long Tail“ von Randszenarien beim autonomen Fahren bezieht sich auf Randfälle in autonomen Fahrzeugen (AVs). Randfälle sind mögliche Szenarien mit geringer Eintrittswahrscheinlichkeit. diese seltenen Ereignisse
Alle CVPR 2024-Auszeichnungen bekannt gegeben! Fast 10.000 Menschen nahmen offline an der Konferenz teil und ein chinesischer Forscher von Google gewann den Preis für den besten Beitrag
Jun 20, 2024 pm 05:43 PM
Am frühen Morgen des 20. Juni (Pekinger Zeit) gab CVPR2024, die wichtigste internationale Computer-Vision-Konferenz in Seattle, offiziell die besten Beiträge und andere Auszeichnungen bekannt. In diesem Jahr wurden insgesamt 10 Arbeiten ausgezeichnet, darunter zwei beste Arbeiten und zwei beste studentische Arbeiten. Darüber hinaus gab es zwei Nominierungen für die beste Arbeit und vier Nominierungen für die beste studentische Arbeit. Die Top-Konferenz im Bereich Computer Vision (CV) ist die CVPR, die jedes Jahr zahlreiche Forschungseinrichtungen und Universitäten anzieht. Laut Statistik wurden in diesem Jahr insgesamt 11.532 Arbeiten eingereicht, von denen 2.719 angenommen wurden, was einer Annahmequote von 23,6 % entspricht. Laut der statistischen Analyse der CVPR2024-Daten des Georgia Institute of Technology befassen sich die meisten Arbeiten aus Sicht der Forschungsthemen mit der Bild- und Videosynthese und -generierung (Imageandvideosyn
So erstellen Sie eine Familie mit Gree+
Mar 01, 2024 pm 12:40 PM
Viele Freunde haben geäußert, dass sie wissen möchten, wie man eine Familie in der Gree+-Software erstellt. Hier ist die Vorgehensweise für Sie. Freunde, die mehr wissen möchten, schauen Sie sich das an. Öffnen Sie zunächst die Gree+-Software auf Ihrem Mobiltelefon und melden Sie sich an. Klicken Sie dann in der Optionsleiste unten auf der Seite ganz rechts auf die Option „Mein“, um die Seite mit dem persönlichen Konto aufzurufen. 2. Nachdem ich auf meine Seite gekommen bin, gibt es unter „Familie“ die Option „Familie erstellen“. Nachdem Sie sie gefunden haben, klicken Sie darauf, um sie aufzurufen. 3. Wechseln Sie als nächstes zur Seite zum Erstellen einer Familie, geben Sie den festzulegenden Familiennamen gemäß den Eingabeaufforderungen in das Eingabefeld ein und klicken Sie nach der Eingabe auf die Schaltfläche „Speichern“ in der oberen rechten Ecke. 4. Abschließend erscheint unten auf der Seite die Meldung „Erfolgreich speichern“, die anzeigt, dass die Familie erfolgreich erstellt wurde.
Wie erstelle ich einen Ordner auf Realme Phone?
Mar 23, 2024 pm 02:30 PM
Titel: Realme Phone-Einsteigerhandbuch: Wie erstelle ich Ordner auf dem Realme Phone? In der heutigen Gesellschaft sind Mobiltelefone zu einem unverzichtbaren Hilfsmittel im Leben der Menschen geworden. Als beliebte Smartphone-Marke wird Realme Phone von Nutzern wegen seines einfachen und praktischen Betriebssystems geliebt. Bei der Verwendung von Realme-Telefonen können viele Menschen auf Situationen stoßen, in denen sie Dateien und Anwendungen auf ihren Telefonen organisieren müssen, und das Erstellen von Ordnern ist eine effektive Möglichkeit. In diesem Artikel erfahren Sie, wie Sie Ordner auf Realme-Telefonen erstellen, um Benutzern die bessere Verwaltung ihrer Telefoninhalte zu erleichtern. NEIN.
Von Bare-Metal bis hin zu einem großen Modell mit 70 Milliarden Parametern finden Sie hier ein Tutorial und gebrauchsfertige Skripte
Jul 24, 2024 pm 08:13 PM
Wir wissen, dass LLM auf großen Computerclustern unter Verwendung umfangreicher Daten trainiert wird. Auf dieser Website wurden viele Methoden und Technologien vorgestellt, die den LLM-Trainingsprozess unterstützen und verbessern. Was wir heute teilen möchten, ist ein Artikel, der tief in die zugrunde liegende Technologie eintaucht und vorstellt, wie man einen Haufen „Bare-Metals“ ohne Betriebssystem in einen Computercluster für das LLM-Training verwandelt. Dieser Artikel stammt von Imbue, einem KI-Startup, das allgemeine Intelligenz durch das Verständnis der Denkweise von Maschinen erreichen möchte. Natürlich ist es kein einfacher Prozess, einen Haufen „Bare Metal“ ohne Betriebssystem in einen Computercluster für das Training von LLM zu verwandeln, aber Imbue hat schließlich erfolgreich ein LLM mit 70 Milliarden Parametern trainiert der Prozess akkumuliert
KI im Einsatz |. AI hat einen Lebens-Vlog eines allein lebenden Mädchens erstellt, der innerhalb von drei Tagen Zehntausende Likes erhielt
Aug 07, 2024 pm 10:53 PM
Herausgeber des Machine Power Report: Yang Wen Die Welle der künstlichen Intelligenz, repräsentiert durch große Modelle und AIGC, hat unsere Lebens- und Arbeitsweise still und leise verändert, aber die meisten Menschen wissen immer noch nicht, wie sie sie nutzen sollen. Aus diesem Grund haben wir die Kolumne „KI im Einsatz“ ins Leben gerufen, um detailliert vorzustellen, wie KI durch intuitive, interessante und prägnante Anwendungsfälle für künstliche Intelligenz genutzt werden kann, und um das Denken aller anzuregen. Wir heißen Leser auch willkommen, innovative, praktische Anwendungsfälle einzureichen. Videolink: https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ Vor kurzem wurde der Lebens-Vlog eines allein lebenden Mädchens auf Xiaohongshu populär. Eine Animation im Illustrationsstil, gepaart mit ein paar heilenden Worten, kann in nur wenigen Tagen leicht erlernt werden.
