上一章介绍了webgl的入门级基础，这次打算讲一点稍微深一点层次的基础，当然是基础了，在写本文的时候，本人也是刚刚学会一点，就出来卖弄了。😄
本文也会介绍一个例子出来，因为我所学的东西都是从webgl入门指南上看来的，所以我所介绍的例子也会按照上面的来，对于厌烦了看书的人，网上看会博客也是不错的。我会用自己的语言介绍一下webgl上面的东西
在上一章介绍了一个2d矩形的渲染，那么本章节最起码得是一个3d的东西了吧，不然搞了这么长时间，看了这么多理论就搞会了一个2d图形，那么学来有啥用
好了废话不多说了。这次先贴代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个带背景旋转的立方体</title>
<style>
#container{
width:100%;
height:600px;
background: #ffffff;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../static/test/three.js"></script>
<script>
(function(win) {
win.onload = function() {
// 定义属性
var container = document.getElementById('container');
var width = container.clientWidth;
var height = container.clientHeight;
// 定义渲染器
var renderer = new THREE.WebGLRenderer({
antialias: true // 抗锯齿
});
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
renderer.setClearColor(0xffffff, 1.0);
// 定义相机
var camera = new THREE.PerspectiveCamera(45,width/height,1, 4000);
camera.position.set(0,0,3);
// 定义场景
var scene = new THREE.Scene();
// 定义光源
var light = new THREE.DirectionalLight(0xffffff,1.5);
light.position.set(0,0,2);
scene.add(light);
// 创建物体
var geometry = new THREE.CubeGeometry(1,1,1);// 创建大小为1个单位的正方体
var backgroundImg = THREE.ImageUtils.loadTexture('../static/image/timg.jpg');// 创建立方体上的图片
var material = new THREE.MeshPhongMaterial({
map: backgroundImg
});
var mesh = new THREE.Mesh(geometry,material);
//倾斜立方体，不然只能看到一个平面
mesh.rotation.x = Math.PI/5;
mesh.rotation.y = Math.PI/5;
scene.add(mesh);
function run() {
renderer.clear();
mesh.rotation.y -=0.01;
renderer.render(scene, camera);
requestAnimationFrame(run);
}
run();
}
})(window)
</script>
</body>
</html>
这个例子构建了一个自动旋转带背景图的立方体，代码很简单，大家可以保存下来运行一下看看效果，可以改一下里面的参数试试。
接下来我们解析一下上面的代码，大的流程我们就不说了在上一文已经说过了。
在本例子中用到了光源，也就是light，有关光源，在three.js中有好几种不同的光源，其中包括：
环境光(ambient light)：这是一种无论在任何位置都会照亮整个场景的常态光源。
点光源(point light)：这是一种从特定的点向周围所有方向照射光线的光源，光照受距离限制。
聚光灯(spot light)：这是一种从特定的点向一个特定的方向照射光线的光源，光照受距离限制(就像你在电影中看到的聚光灯一样)
平行光(directional light)：这是一种向一个特定防线照射光线的光源，但是不受光照距离的限制，并且与光源位置无关
👉在本例中使用的是平行光源
在上一章中埋了两个坑，就是有关相机的介绍和材质的介绍，在这里先做简单的说明，因为我也是初学者，所以有关知识可能讲的不是很全面，请大家多多斧正😁
有关相机：
threejs提供的相机有正交相机(OrthographicCamera)、透视相机(PerspectiveCamera)、全景相机(CubeCamera)和3D相机(StereoCamera)。
PerspectiveCamera: 透视相机，这是一个最接近大自然的视图，符合近大远小的规律。如下图
three2-7.png
调用方式
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
参数说明：
fov:上图中所表示的视场也就是角度
aspect:渲染结果输出去的宽高比，一般是容器的宽和高
near:此参数表示three.js从多近的距离开始渲染场景
far:此参数表示相机能够看多远。如果设置的太小的话一部分可能不会被渲染，太高的话会影响渲染的效率
说明：其他相机会在具体实例中具体介绍在本文就不具体介绍了(因为我还没用到其他相机,现在讲也讲不明白)
有关材质：
threejs提供的材质有MeshBasicMaterial(网格基础材质)、MeshDepthMaterial（网格深度材质）、 MeshNormalMaterial(网格法向材质)、 MeshFaceMaterial(网格面材质)、 MeshLambertMaterial(网格 Lambert 材质)、 MeshPhongMaterial(网格 Phong 式材质)、ShaderMaterial(着色器材质)、LineBasicMaterial(直线基础材质)、LineDashMaterial(虚线材质)。
相关解释：
MeshBasicMaterial：基础材质，用于给几何体赋予一种简单的颜色，或者显示几何体的线框。
MeshDepthMaterial： 这个材质使用从摄像机到网格的距离来决定如何给网格上色。
MeshNormalMaterial：这是一种简单的材质，根据法向向量计算物体表面的颜色。
MeshFaceMaterial：这是一个容器，可以为几何体的各个表面指定不同的材质。
MeshLambertMaterial：这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。
MeshPhongMaterial：这是一种考虑光照影响的材质，用于创建光亮的物体。
ShaderMaterial：这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式以及像素的着色方式。
LineBasicMaterial：这种材质可以用于 THREE.Line（直线）几何体，用来创建着色的直线。
LineDashMaterial： 这种材质与 LineBasicMaterial（直线基础材质）一样，但允许创建出一种虚线的效果。
材质解释来源:http://www.hangge.com/blog/cache/detail_1815.html
以上是我查看的一些给出的一些解释。虽然我也都看了，但是在实际开发当中，现在相信大家也不知道啥时候用啥材质，啥时候用啥相机之类的。我现在也不明白。相信在以后的学习中，在以后的文章中，我会发奋图强将这些东西弄明白告诉大家。
本文中还用到了图片的加载在webgl中被称为纹理(texture)，是一种将位图覆盖到3d网格表面的技术，使用纹理映射可以通过简单的方式定义网格表面的颜色，同时也可以通过纹理图片的组合应用创造出更加复杂的效果，如凹凸效果和高光效果。
好了本文也就到这里了，本文东西不多，但是对于一个初学者来理解也是蛮困难的，哈哈 我是这样认为的。 还是那句老话，如果有不对的，请大家多多指教😁
网友评论