suchen

Heim >Web-Frontend >js-Tutorial >So erstellen Sie eine Szene in Three.js

So erstellen Sie eine Szene in Three.js

零下一度
零下一度Original
2017-06-25 09:21:161873Durchsuche

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der js-Sprungmethoden und -CodesNächster Artikel：Zusammenfassung der js-Sprungmethoden und -Codes

In Verbindung stehende Artikel

Mehr sehen