我的three.js学习记录(一)

时间:2021-09-14 04:22:33

在之前因为项目需要使用WebGL技术做网页应用,但是苦于自己没有接触,只是使用过OpenGL。然后接触到了thre.js这个第三方库之后我突然心情很愉快,这将节省我很多时间。
过了这个项目之后,就再也没有看过它了,最近翻开我的个人记录发现了在角落边缘堆尘的three.js决定再看一下,然后记录下来以便以后翻看,毕竟多一个技能也挺好的。

three.js简介

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。

这个项目的目标是创建一个易于使用的,轻量级,3 d库。这个库提供<canvas>,< svg >,CSS3DWebGL渲染器。

以上来自百度百科和Github上面的简介(如果我没有翻译错)
https://baike.baidu.com/item/three.js/7896801?fr=aladdin
https://github.com/mrdoob/three.js/blob/dev/README.md

本人入门three.js时的链接地址
http://www.hewebgl.com/
https://threejs.org/examples/
http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html
https://www.qcloud.com/community/article/924964?fromSource=gwzcw.149972.149972.149972
http://www.ituring.com.cn/book/1272
http://www.cnblogs.com/zjf-1992/p/6276779.html
http://www.cnblogs.com/amy2011/

基础知识

首先三维的存在需要有一个空间可以让我们的物体加载进去,这就是我们three.js中的场景(scene),这个是我们三维的空间,比如我们画一个立方体,画完了就放在这个场景中给渲染出来。

除了一个空间,当然还要一个摄像机(camera),这个相当于我们的眼睛,我们能看到东西不仅仅是因为它的存在,而是我们还看到了,这点很重要,但是在three.js中照相机的坐标表示是使用的右手坐标

当然了看的到的也需要真实的存在,这里就需要我们加入物体。

加入了物体之后就需要我们渲染出我们的这个三维世界了,这里就需要用到我们的渲染器(renderer)它可以将我们的场景渲染出来

入门之一个点

经过以上的陈述自己也知道有些什么是必备的,所以现在我们来画出一个点

初始化渲染器

            var renderer, width = window.innerWidth, height = window.innerHeight;

//创建一个div可供放置渲染器
var container = document.createElement('div');
//将这个div置入body
document.body.appendChild(container);
//新建渲染器,其中设置antialias为true
renderer = new THREE.WebGLRenderer({
antialias: true //这里是抗锯齿,比如我们看到一条斜线有很多跟锯子形状的齿,这里可以弱化那些锯齿
});
//设置渲染器的尺寸
renderer.setSize(width, height);
//将我们的渲染器嵌入之前创建的div容器
container.appendChild(renderer.domElement);
//设置渲染器的颜色(白色)以及alpha值(这里可以理解为透明度,颜色深浅)
renderer.setClearColor(0xFFFFFF, 1.0);

初始化相机

            var camera;
//这里采用了透视投影相机,看到的东西类似于人眼,越远越小
//参数1: fov 广角,也就是看到的平面的大小到你眼睛的角度,越大看到的越多
//参数2: aspect 平面的宽高比
//参数3: near 近处你可以看见的距离
//参数4: far 远处可以看见的距离
camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
//设置相机的位置
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
//设置相机的朝向,z为1跟我们头朝上一样(这里是右手坐标系)
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
//设置相机对焦的点,跟我们眼球盯住的点一样
camera.lookAt({
x: 0,
y: 0,
z: 0
});

初始化场景和点并渲染

var scene;
scene = new THREE.Scene();
//new THREE.CubeGeometry(5, 5, 5)确定我们的形状,这是一个几何体,画出来是正方形,这里我们用足够小的正方形表示一个点
//new THREE.MeshBasicMaterial({color: 0xFF0000})确定我们的材质
//new THREE.Mesh(geometry, material)这就是我们的物体了,这是用网格来体现的
//点成线,线成面,面成体Mesh就是由很多点线组成的
var point = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), new THREE.MeshBasicMaterial({
color: 0xFF0000
}));
//向场景中添加物体point
scene.add(point);
//渲染场景
renderer.render(scene, camera);

这里的代码显得有点乱,不过具体的流程已经给出来了,并且有注释,入门应该是很方便的,最后我也会贴出代码

入门之一条线

画一条线跟一个点的差别不大,只需要改变创建物体的那一段代码就行,如下:

var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});
var color1 = new THREE.Color(0x444444), color2 = new THREE.Color(0xFF0000);

// 线的材质可以由2点的颜色决定
var p1 = new THREE.Vector3(-100, 0, 100);
var p2 = new THREE.Vector3(100, 0, -100);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push(color1, color2);

var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);

产品展示

经过奋战,入门了点和线之后结果如下显示

我的three.js学习记录(一)

我的three.js学习记录(一)

以上的代码已经上传Github