我的three.js学习记录(一)
2017-10-16 15:48
330 查看
在之前因为项目需要使用WebGL技术做网页应用,但是苦于自己没有接触,只是使用过OpenGL。然后接触到了thre.js这个第三方库之后我突然心情很愉快,这将节省我很多时间。
过了这个项目之后,就再也没有看过它了,最近翻开我的个人记录发现了在角落边缘堆尘的three.js决定再看一下,然后记录下来以便以后翻看,毕竟多一个技能也挺好的。
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。
这个项目的目标是创建一个易于使用的,轻量级,3 d库。这个库提供
以上来自百度百科和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/
除了一个空间,当然还要一个摄像机(camera),这个相当于我们的眼睛,我们能看到东西不仅仅是因为它的存在,而是我们还看到了,这点很重要,但是在three.js中照相机的坐标表示是使用的右手坐标
当然了看的到的也需要真实的存在,这里就需要我们加入物体。
加入了物体之后就需要我们渲染出我们的这个三维世界了,这里就需要用到我们的渲染器(renderer)它可以将我们的场景渲染出来
这里的代码显得有点乱,不过具体的流程已经给出来了,并且有注释,入门应该是很方便的,最后我也会贴出代码
以上的代码已经上传Github
过了这个项目之后,就再也没有看过它了,最近翻开我的个人记录发现了在角落边缘堆尘的three.js决定再看一下,然后记录下来以便以后翻看,毕竟多一个技能也挺好的。
three.js简介
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。
这个项目的目标是创建一个易于使用的,轻量级,3 d库。这个库提供
<canvas>,
< svg >,
CSS3D和
WebGL渲染器。
以上来自百度百科和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);
产品展示
经过奋战,入门了点和线之后结果如下显示以上的代码已经上传Github
相关文章推荐
- Three.js学习记录——TrackballControls控制器
- 我的three.js学习记录(三)
- 我的three.js学习记录(一)
- 我的three.js学习记录(二)
- Three.js 学习记录 之 几何体(一)
- Three.js学习记录--html5的编辑和第一个场景
- Three.js 学习记录 之 纹理加载
- 我的three.js学习记录(三)
- JQuery.Tmpl.js学习记录
- Three.js学习笔记---我和小伙伴都惊呆了
- JS纵深学习记录
- three.js学习笔记(二)-基础知识①
- 学习记录--js中的五种继承方式
- Cocos2d-js 学习:cc.LabelTTF 简单API记录
- JS学习记录(一)
- Backbone.js 学习过程记录
- three.js学习笔记 obj模型加载问题
- Three.js学习笔记03--光
- [webGL学习]基于three.js构建WebGL实例讲解大纲
- JS学习记录