前言:在接着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/
今天的分享就到这里了,日后会一直更新文章,写错的地方可以提示一下!