Comment créer une scène dans Three.js-js tutoriel-php.cn

Comment créer une scène dans Three.js

零下一度

Libérer： 2017-06-25 09:21:16

original

1859 Les gens l'ont consulté

La section précédente décrit l'ajout d'objets à la scène. Dans cet article, je prévois de décrire chaque point de fonction en détail, d'une part, pour approfondir ma compréhension. Par contre, j'espère

aider ceux qui en ont besoin.

1. Lors de l'apprentissage de WEBGL, vous devez d'abord comprendre les étapes requises pour créer un programme WebGL. Tout comme pour préparer du porc braisé avec des légumes marinés, quelles sont les étapes nécessaires.

Initialiser le contexte de dessin WebGL
Initialiser le programme de shader
Construire le modèle et le cache de données
Dessin et animation complets

Il s'agit d'une programmation orientée processus. Cependant, three.js est différent : il s'agit d'une programmation orientée objet. Construisez principalement trois objets : scène (scène), caméra (caméra), moteur de rendu (rendu).

Que signifient ces trois choses ? Il semble que je ne sache pas du tout ce que c'est. Pour donner un petit exemple : prenons les films comme exemple. La scène est comme tout l'espace de mise en page, et la caméra est comme la période de tournage

. Le moteur de rendu équivaut à convertir le film filmé en film, qui est l'écran de l'ordinateur.

Les scènes et les espaces contiennent des modèles 3D et de données, tandis que les moteurs de rendu contiennent des shaders et des contextes de dessin WebGL.

2. THREE.JS crée la scène, la caméra, le moteur de rendu

<!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>

Copier après la connexion

Le film, la scène et le film sont tous prêts, alors comment pouvons-nous montrer aux acteurs ? Autrement dit, comment ajouter des objets à la scène comme mentionné dans l'article ci-dessus ?

3. Ajouter des acteurs (cube 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); //把画面转换成相机，并播放

Copier après la connexion

De cette façon, l'acteur est dans le cadre.

4. Comment faire bouger cet acteur ?

    //懂动起来。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。
     简直就是动画神奇     */

Copier après la connexion

L'acteur est entré dans le cadre et a eu un effet impressionnant. La première nouvelle est presque terminée.

5. L'intégralité du code (à l'origine destiné à être hébergé sur GitHup). Je l'ai trouvé trop lent.

<!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>

Copier après la connexion

6. Three.js joue un rôle important dans WebGL, mais il existe vraiment peu d'API chinoises. Il s’accumule lentement, un par un.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!