three.js学习( 6.25更新)

基础知识

• 右手坐标系
  three.js中使用的都是右手坐标系，即图示右手大拇指指向x轴正向，食指指向y轴正向，中指指向z轴正向，这样的一个三维坐标系。具体来说，x,y坐标用于控制浏览器平面，如果不改变z坐标则物体只在浏览器平面上运动，因此z坐标控制的就是远近。
  

引入three.js(webpack搭建的环境）

• 搭建webpack项目
• 运行npm i three
• 在js中引入import * as THREE from 'three'，编写代码
• 打包运行

webpack.config.js

const { resolve } = require('path');
//下载html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './js/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
        {
            test: /\.(jpg|png|gif|gltf|bin)$/,
            // 使用一个loader
            // 下载 url-loader file-loader
            loader: 'url-loader',
            options: {
              limit: 8*1028,
              esModule: false
            }
          },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ],
  mode: 'development',

  // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }
};

three.js核心组成

1. 场景（secne)

   创建场景： var scene = new THREE.Scene();
   放置物体对象的环境

2. 相机 (camera)

   创建透视相机

   var camera = new THREE.PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
   fov — 摄像机视锥体垂直视野角度 (相机的拍摄视角大小）
   aspect — 摄像机视锥体长宽比 （相机拍摄区域的长宽比）
   near — 摄像机视锥体近端面 （相机拍摄范围近端距离）
   far — 摄像机视锥体远端面 （相机拍摄范围远端距离）
   常用：var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
   效果：相机拍摄的画面具有近小远大的特性，距离相机近的物体显示的大，距离相机远的物体显示的小。

   创建正交相机

   var camera = new THREE.OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
   left — 摄像机视锥体左侧面。
   right — 摄像机视锥体右侧面。
   top — 摄像机视锥体上侧面。
   bottom — 摄像机视锥体下侧面。
   near — 摄像机视锥体近端面。
   far — 摄像机视锥体远端面。
   各参数如图所示：

   
   效果：相机拍摄的画面是相机对物体的正投影，无论物体远近都不会影响它在相机画面中的大小。

   总结：

   两种相机均继承基类Camera的属性和方法
   注意：默认相机位置在（0, 0，0）点处，即场景中心，如果物体也在该点则拍摄不到，需要将camera.position.z增大，即远离物体才能拍摄到物体
   透视相机：近大远小
   正交相机：远近一致
   

3. 渲染器 (render)

   创建渲染器：

   var renderer = new THREE.WebGLRenderer();
document.body.appendChild( renderer.domElement );
   实例化一个渲染器，然后将它的dom元素插入到body中，即插入了一个canvas。
   也可以将其插入到其他元素中，比如html中有一个<div id='canvas'></div>,就可以写成
   document.getElementById('canvas').appendChild( renderer.domElement );这样场景就在这个div中加载了。
   注意设置渲染器的大小，常用的为renderer.setSize( window.innerWidth, window.innerHeight );，如果不设就是默认大小

4. 物体对象

   创建物体对象

   var geometry = new THREE.BoxGeometry( 1, 1, 1 );//创建立方体对象
   var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );//创建材质
   var mesh= new THREE.Mesh( geometry, material );//创建网格，网格=对象+材质
   scene.add( mesh);//将网格添加到场景中
   

   3d物体由点->线->面组成，mesh网格就是由大量的面组成的网格图，再加上材质就创建成物体,几何体geometry和材质material的介绍在下面，新建几何体和材质后，就可以将该物体对象添加到场景中了。更多物体对象自查官方文档three.js
   

   常用几何体

   三维

   构造函数	说明
   THREE.BoxGeometry	立方几何体
   THREE.SphereGeometry	球几何体
   HREE.ConeGeometry	圆锥几何体
   HREE.CylinderGeometry	圆柱几何体
   HREE.TorusGeometry	圆环几何体
   HREE.TextGeometry	文本几何体

   二维

   构造函数	说明
   THREE.CircleGeometry	圆形几何体
   HREE.PlaneGeometry	平面几何体（长方形）
   HREE.RingGeometry	圆环几何体

   常用材质

   

   纹理贴图（texture)

   用于在物体表面贴上纹理和贴图，使其跟接近真实的物体。
   传送门

5. 灯光

   灯光用来为场景添加光源，照明物体，虽然部分材质（如MeshBasicMaterial）不会受到灯光的影响，无需添加灯光也能看见，但是这种材质的物体没有质感，也没有明暗变化；如果想让物体更接近真实场景的物体，就需要可以被灯光影响的材质，如MeshLamberMaterial，如果不添加光源就无法看到物体。
   灯光分为点光源，线光源，面光源等，可依据实际场景进行选择，正如真实场景的光源情况，three.js允许添加多个灯光从而对真实场景进行模拟。
   添加灯光方法:

   var light = new THREE.AmbientLight( 0x404040 ); 
   scene.add( light );
   

   

   基本完整代码

   import * as THREE from 'three'
   
   //场景
   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 );
   document.body.appendChild( renderer.domElement );
   
   //场景中添加基本体和网格
   var geometry = new THREE.BoxGeometry();
   var material = new THREE.MeshBasicMaterial( { color: 0x00fff0 } );
   var cube = new THREE.Mesh( geometry, material );
   scene.add( cube );
   
   camera.position.z = 5;
   
   var animate = function () {
   requestAnimationFrame( animate );
   renderer.render( scene, camera );
   };
   
   animate();