ホームページ > 記事 > ウェブフロントエンド > Three.js の基本的な入門学習チュートリアル

Three.js の基本的な入門学習チュートリアル

小云云オリジナル: 2018-01-18 14:22:343930ブラウズ

この記事では主に Three.js の基本学習チュートリアルを詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。

1. Three.js公式サイトとThree.jsを利用するために必要な3つの条件

1. Three.js公式サイト https://threejs.org/

2. Three.jsを利用するために必要な3つの条件条件

(実際に Three.js で何かを表示できるようにするには、シーン、カメラ、カメラでシーンをレンダリングできるレンダラーの 3 つが必要です。)

大まかな意味表示されるものを実現するには、three.js を使用します。シーン、カメラ、レンダラーの 3 つの条件を満たす必要があります。この 3 つはすべて必須です。

2. Three.jsを使用するために必要な3つの条件(シーンシーン、カメラカメラ、レンダラーレンダラー)の関係

上の図のように、シーンを説明します。シーン、カメラ、レンダラの関係renderer[/code]

1.シーンはオブジェクトのコンテナです[物を保持するという一般的な意味を理解しています]。開発者は必要な文字をオブジェクトに配置できます。リンゴやブドウなどのシーン。同時に、キャラクター自体もシーン内での位置を管理します。

2.カメラの機能は、シーンに直面し、シーン内の適切なシーンを選択し、写真を撮ることです。【大人の目を想像できます】

3. レンダラの機能は、カメラで撮影した写真をブラウザに入れて表示することです

3. 上記の理論を使用して、公式Webサイトのケースを実践してください

以下の通り

公式サイトのケースの実装ソースコード

<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="./lib/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 );
  //设置画布色
   renderer.setClearColor(0x00AABB, 1.0);
   //将渲染画布添加到浏览器中，以便后面剩放相机拍下的景
  document.body.appendChild( renderer.domElement );
  
  //创建一个几何体长、宽、高分别为1几何体对象
  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  //材料、皮肤
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  //将material材料添加到几何体geometry，产生新的对象几何体cube
  var cube = new THREE.Mesh( geometry, material );
  //将几何体添加至场景中
  scene.add( cube );
  //设置相机z轴，垂直电脑屏幕位置
  camera.position.z = 5;
   
  var render = function () {
  /*requestAnimationFrame( render ); //循环渲染
  cube.rotation.x += 0.1; //x轴每秒旋转60次
  cube.rotation.y += 0.1;//y轴每秒旋转60次*/
  renderer.render(scene, camera); //实时将相机拍下的几何体渲染到场景中
  };
  render();
</script>
 </body>
</html>

公式サイトのケースを通して、カメラのデフォルトの視線方向が画面の方向（Z軸の負の方向）であることを見つけるのは難しくありません) 座標を変更するときは、カメラを向ける必要があります。オブジェクトの z 軸の負の方向にのみ原点が観察できますか? ? ?したがって、ここでは（下図のように）3次元座標について話す必要があります

カメラは原点を指していますか？ ? ?カメラについて話しましょう (非常に重要です!! 人が物が見えないときにどのような感じになるかを想像してください)

このケースでは透視カメラが使用されています (オブジェクトが視点から近づくほど、大きくなります)。遠くの物体は小さく描かれます。日常生活での物体の見方と一致する方法です)

var Camera = new THREE.PerspectiveCamera(fov、aspect、near、far)

new THREE .PerspectiveCamera(fov 、アスペクト、near、far) パースペクティブカメラ

視野角: fov 視野角 (場所によっては撮影距離と呼ばれます) が大きくなるほど、シーン内のオブジェクトが小さくなり、視野も小さくなります。視野角、シーン内のオブジェクトが大きくなる

アスペクト比：aspect カメラと表示ボリュームの間の最も近い距離: 近く
カメラと表示ボリュームの間の最も遠い距離: 遠い
まとめると、次のようになると思います。上記の 3 次元座標とカメラの図に基づいてカメラを理解するのは非常に簡単です。次に、上記のケースを変更します (以下のケースにおけるマウスのスクロール、ズーム、および 3 次元の回転はすべてに基づいていることを説明します)。カメラ)

4 番目に、公式 Web サイトのケースを変更し、カメラの向きとカメラの位置を設定します

[lookAt] メソッドを使用して、カメラの視野の中心を設定します。「lookAt()」のパラメータは、中心座標「x」「y」「z」を属性とするオブジェクトである。

カメラの上方向を正の y 軸に設定します。 Camera.up.z = 0;

5. 回転立方体の実装

回転アニメーションの原理カメラは Y 軸を中心に回転し、カメラの X 軸と Z 軸の位置を常に変更し、オブジェクトをカメラの視野にシーンを配置し、カメラで捉えた写真をリアルタイムでキャプチャし、ブラウザに入れて表示します

//相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中
//实时渲染成像
function animation(){
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100;
  camera.position.z = Math.sin(timer)*100;
  camera.lookAt(scene.position); //设置相机视野中心
  renderer.render(scene, camera);
  requestAnimationFrame(animation);//渲染回调函数
}

実装レンダリングは以下のとおりです

Rotating Cube - Case Sourceコード

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>旋转立方体 </title>
 <style>
  #canvas-frame {
  width: 100%;
  height: 600px;
  }
 </style>
 </head>
 <body onload="threeStart()">
 <p id="canvas-frame" ></p>
 </body>
 <script type="text/javascript" src="./lib/three.js" ></script>
 <script type="text/javascript">
  var renderer, //渲染器
  width = document.getElementById(&#39;canvas-frame&#39;).clientWidth, //画布宽
  height = document.getElementById(&#39;canvas-frame&#39;).clientHeight; //画布高
  //初始化渲染器
  function initThree(){
  renderer = new THREE.WebGLRenderer({
   antialias : true
   //canvas: document.getElementById(&#39;canvas-frame&#39;)
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0xFFFFFF, 1.0);
  document.getElementById(&#39;canvas-frame&#39;).appendChild(renderer.domElement);
  renderer.setClearColor(0xFFFFFF, 1.0);
  }
  //初始化场景
  var scene;
  function initScene(){
  scene = new THREE.Scene();
  }
  var camera;
  function initCamera() { //透视相机
  camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
  camera.position.x = 50;
  camera.position.y = 150;
  camera.position.z =150;
  camera.up.x = 0;
  camera.up.y = 1; //相机朝向--相机上方为y轴
  camera.up.z = 0;
  camera.lookAt({ //相机的中心点
   x : 0,
   y : 0,
   z : 0
  });
   
  // camera 正交相机
  /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000);
  camera.position.x = 250;
  camera.position.y = 100;
  camera.position.z = 1800;
  camera.up.x = 0;
  camera.up.y = 1; //相机朝向--相机上方为y轴
  camera.up.z = 0;
  camera.lookAt({ //相机的中心点
   x : 0,
   y : 0,
   z : 0
  });*/
  }
  
  function initLight(){
  // light--这里使用环境光
  //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
  //light.position.set(600, 1000, 800);
  var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
  light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
  scene.add(light);
  }
  function initObject(){ //初始化对象
   
  //初始化地板
  initFloor();
  }
  function initGrid(){ //辅助网格
  var helper = new THREE.GridHelper( 1000, 50 );
  helper.setColors( 0x0000ff, 0x808080 );
  scene.add( helper );
  }
  
  function initFloor(){
  //创建一个立方体
  var geometry = new THREE.BoxGeometry(80, 20, 80);
   for ( var i = 0; i < geometry.faces.length; i += 2 ) {
   var hex = Math.random() * 0xffffff;
   geometry.faces[ i ].color.setHex( hex );
   geometry.faces[ i + 1 ].color.setHex( hex );
  }
  var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
  //将material材料添加到几何体geometry
  var mesh = new THREE.Mesh(geometry, material);
  mesh.position = new THREE.Vector3(0,0,0);
  scene.add(mesh);
  }
 
  
  //初始化页面加载
  function threeStart(){
  //初始化渲染器
  initThree();
  //初始化场景
  initScene();
  //初始透视化相机
  initCamera();
  //初始化光源
  //initLight();
  //模型对象
  initObject();
  //初始化网格辅助线
  initGrid();
  //renderer.render(scene, camera);
  //实时动画
  animation();
  
  }
  /*
  * 旋转原理
  * 相机围绕y轴旋转
  * 不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中，
  * 实时将相机拍摄下来的图片，放到浏览器中去显示
  */
  function animation(){
  //渲染成像
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100; //相机位置x轴方向
  camera.position.z = Math.sin(timer)*100; //相机位置y轴方向
  //设置相机视野中心
  camera.lookAt(scene.position);
  //渲染成像
  renderer.render(scene, camera);
  //渲染回调animation函数
  requestAnimationFrame(animation);
  }
 </script>
</html>

これで完成です。個人的な描画アイデアのフローチャートも添付されています

Three.js の基本的な入門学習チュートリアル

関連記事