three.js学习的第一天——安装与基础

前言：在接着vue框架的学习之后，我们来学习下目前的web3.0的前沿技术three.js。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。

一.three.js项目成果展示（看到了这么炫酷的页面有没有学习的想法）

 二.three.js模块的引入

2.1我们先建立一个vue项目（不会可以观看我之前写过的vue学习）

2.2安装three包

 

 在项目中导入three包

 就这么简单就安装完了，但是vue的那套要是不会就先去学学vue吧

 三.three.js基础讲解

我们要是先建立一个3d页面我们需要按下列步骤一步步去了解

首先我们要先建立

1.页面的场景 

2.相机（作用于观察页面的，如人的眼睛）   

3.几何物体（如上图展示的房子）

4.渲染器（用于把相机观察到的东西渲染出来）

5.轨道控制器（用于改变展示页面缩放移动旋转）

6.坐标轴辅助器（展示xyz轴，方便定位去进行移动功能等）

3.1接下来我们进行一个详细写法

3.11   构建场景

const scene = new THREE.Scene(); 

3.12构建相机

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight
);//75为定义相机的角度为75°为初始，window.innerWidth / window.innerHeight为可视为屏幕的宽高比。

camera.position.set(0, 0, 10); //（0，0，10）为相机的位置属性分别对应（x，y，z）

scene.add(camera)  //最后还要把相机添加到场景中，不然无法使用。

3.13添加物体创几何体

const cubegeometry = new THREE.BoxGeometry(1, 1, 1); //创建一个盒子(BoxGeometry)宽高长为1，1，1

const cubegeomaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); //定义几何体的材质颜色

const cube = new THREE.Mesh(cubegeometry, cubegeomaterial);  //根据几何体和材质制作物体

scene.add(cube);   //将物体添加到场景中

3.14添加渲染器renderer

const renderer = new THREE.WebGLRenderer(); //初始化渲染器

renderer.setSize(window.innerWidth, window.innerHeight);  //渲染大小设置

document.body.appendChild(renderer.domElement);   //将webgl渲染到canvas内容添加到body

renderer.render(scene, camera);   //通过相机将场景渲染进来

这个时候就会有一个平面的正方形渲染出来了，为什么还不是3d的正方形，因为还缺少一个控制器去控制相机的位置去观察物体！

3.15添加控制器

先导入轨道控制器（OrbitControls为轨道控制器）（还有许多控制器的使用方法不一样）

const controls = new OrbitControls(camera, renderer.domElement); // eslint-disable-line no-unused-vars

以上的注释是要写入源码中的，因为此处的controls被定义了但是没有被使用，所以会报错。

加上后一段注释可以解决这个问题，上面这个源码的是在创建一个轨道控制器。

但是此时加入了控制器页面还是平面，为什么呢，因为渲染器只渲染出了刚开始的页面，我们需要让渲染器重新渲染下一帧

function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

通过移动鼠标可以观看正方体的不同位置！！！

 

 四.three.js官网文档查询

如上面我们可以发现，控制器就包含许多不同的控制器，轨道控制器只是其中的一种，而几何体BoxGeometry盒子也只是three内置的许多几何体的其中一种，那我们怎么样才能知道还有什么几何体呢？我们可以前往three的官网去查看详细的开发文档https://threejs.org/

 

 

今天的分享就到这里了，日后会一直更新文章，写错的地方可以提示一下！