文章目录
- 前言
- 一、引入three.js
- 二、第一个案例
- 1.展示3D效果
- 2.旋转动画效果
- 3.利用鼠标控制动画三维场景
- 4.插入新的几何体
- 4.1 常用几何体
- 4.2 辅助坐标系
- 4.3 插入新的几何体
- 5.设置光源
- 6.设置材质
- 总结
前言
学习内容参考Three.js电子书,http://www.webgl3d.cn/Three.js/
Three.js是基于原生WebGL封装运行的三维引擎,因项目需要,现开始学习。
一、引入three.js
打开前端编译软件新建HTML(我使用的是WebStorm)。在.html文件中引入three.js就像前端经常使用的jquery.js一样引入即可。
将js文件下载到本地,相对地址:
<!--相对地址加载-->
<script src="./three.js"></script>
用别人远程的js文件,绝对地址:
<!--http绝对地址远程加载-->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
二、第一个案例
1.展示3D效果
效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个three.js文件_WebGL三维场景</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隐藏body窗口区域滚动条 */
}
</style>
<!--引入three.js三维引擎-->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<!-- <script src="./three.js"></script> -->
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
/**
* 创建网格模型
*/
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
renderer.render(scene, camera);
</script>
</body>
</html>
THREE.BoxGeometry()是立体,THREE.SphereGeometry()是球体。
相机表示好像用一个相机拍摄物体,后面的参数可以调整缩放(大小)和角度。
2.旋转动画效果
效果如下:
在上面基础上添加代码如下:
let T0 = new Date();//上次时间
function render() {
let T1 = new Date();//本次时间
let t = T1-T0;//时间差
T0 = T1;//把本次时间赋值给上次时间
requestAnimationFrame(render);
renderer.render(scene,camera);//执行渲染操作
mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
}
render();
每执行一次渲染器对象WebGLRenderer的渲染方法.render(),浏览器就会渲染出一帧图像并显示在Web页面上,按照周期不停地调用渲染方法.render()就可以不停地生成新的图像覆盖原来的图像。只要一边旋转立方体,一边执行渲染方法.render()重新渲染,就可以实现立方体的旋转效果。
为了实现周期性渲染可以通过浏览器全局对象window对象的一个方法setInterval(),可以通过window对象调用该方法window.setInterval(),也可以直接以函数形式调用setInterval()。
setInterval()是一个周期性函数,就像一个定时器,每隔多少毫秒ms执行一次某个函数。
在实际执行程序的时候,可能requestAnimationFrame(render)请求的函数并不一定能按照理想的60FPS频率执行,两次执行渲染函数的时间间隔也不一定相同,如果执行旋转命令的rotateY的时间间隔不同,旋转运动就不均匀,为了解决这个问题需要记录两次执行绘制函数的时间间隔。
使用下面的渲染函数替换原来的渲染函数即可,rotateY()的参数是0.001t,也意味着两次调用渲染函数执行渲染操作的间隔t毫秒时间内,立方体旋转了0.001t弧度,很显然立方体的角速度是0.001弧度每毫秒(0.0001 rad/ms = 1 rad/s = 180度/s)。CPU和GPU执行一条指令时间是纳秒ns级,相比毫秒ms低了6个数量级,所以一般不用考虑渲染函数中几个计时语句占用的时间,除非你编写的是要精确到纳秒ns的级别的标准时钟程序。
3.利用鼠标控制动画三维场景
效果如下:
需要借助three.js控件之一OrbitControls.js。先引入OrbitControls.js,可以引用本地的,也可以和这里一样引用别人远程的。
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
在上面基础上添加代码如下:
function render() {
renderer.render(scene,camera);//执行渲染操作
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件
不要又用鼠标控制,同时旋转。即不要同时使用requestAnimationFrame()或controls.addEventListener(‘change’, render)调用同一个函数。
4.插入新的几何体
4.1 常用几何体
//长方体 参数:长,宽,高
var geometry = new THREE.BoxGeometry(100, 100, 100);
// 球体 参数:半径60 经纬度细分数40,40
var geometry = new THREE.SphereGeometry(60, 40, 40);
// 圆柱 参数:圆柱面顶部、底部直径50,50 高度100 圆周分段数
var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
// 正八面体
var geometry = new THREE.OctahedronGeometry(50);
// 正十二面体
var geometry = new THREE.DodecahedronGeometry(50);
// 正二十面体
var geometry = new THREE.IcosahedronGeometry(50);
4.2 辅助坐标系
// 辅助坐标系 参数250表示坐标系大小,可以根据场景大小去设置
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);
4.3 插入新的几何体
按自己所需创建新的网格模型即可,网格模型对象.translateY(n); 可以将该网格模型沿Y轴正方向平移n,网格模型对象.position.set(x,y,z);可以直接设置该网格模型对象的坐标为xyz。
// 立方体网格模型
var geometry1 = new THREE.BoxGeometry(100, 100, 100);
var material1 = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材质对象Material
var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
scene.add(mesh1); //网格模型添加到场景中
// 球体网格模型
var geometry2 = new THREE.SphereGeometry(60, 40, 40);
var material2 = new THREE.MeshLambertMaterial({
color: 0xff00ff
});
var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
scene.add(mesh2);
// 圆柱网格模型
var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
var material3 = new THREE.MeshLambertMaterial({
color: 0xffff00
});
var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
// mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
scene.add(mesh3); //
效果如下:
5.设置光源
这里以点光源举例。上面例子中添加了一个点光源,设置光的颜色、位置,我们可以继续增加第二个点光源。
//点光源2
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(-400, -200, -300); //点光源位置
scene.add(point2); //点光源添加到场景中
6.设置材质
在材质对象构造函数THREE.MeshLambertMaterial()中可以设置下列属性。
同时也可以直接在构造函数参数中设置。
材质属性如下:
将wireframe属性设置为true效果如下:
材质类型:
以高光MeshPhongMaterial举例:
var material2=new THREE.MeshPhongMaterial({
color:0x0000ff,
specular:0x4488ee,
shininess:12
});//材质对象
效果如下:
总结
Three.js新手接触,学习了基本的建立几何体以及几何体材质、光源等属性。