随笔分类 -  three.js

该文被密码保护。
posted @ 2018-03-26 17:28 缘琪梦 阅读(1) 评论(0) 推荐(0) 编辑
摘要:设置一个Web服务器通过Node.js是很容易的,只需要3个步骤: (1)从安装Node.js网站,你可以使用默认安装设置。 (2)打开命令行,然后进入Cesium的根目录,通过npm install下载安装所需要的模块。最后,在根目录执行node server.js启动Web服务器。 (3)现在我 阅读全文
posted @ 2017-11-08 17:14 缘琪梦 阅读(2318) 评论(0) 推荐(0) 编辑
摘要:.js模型(JSON)的获取 方法一: 1、安装Python插件。安装完后配置环境变量,path中添加Python路径。 2、找到three.js\utils\converters\obj\convert_obj_three.py : 3、并保证 python convert_obj_three.p 阅读全文
posted @ 2016-11-23 17:21 缘琪梦 阅读(6017) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - geometry - cube</title> <meta charset="utf-8"> <meta name="viewport" content="width=de 阅读全文
posted @ 2016-11-22 15:52 缘琪梦 阅读(682) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - equirectangular panorama</title> <meta charset="utf-8"> <meta name="viewport" content= 阅读全文
posted @ 2016-11-22 15:38 缘琪梦 阅读(3000) 评论(1) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <script type="text/javascript" src="libs/three.js"></script> <script type="text/javascript" src="libs/OBJLoader.js"></sc 阅读全文
posted @ 2016-11-22 13:25 缘琪梦 阅读(23312) 评论(2) 推荐(0) 编辑
摘要:lambert材质 color是用来表现材质对散射光的反射能力,也是最常用来设置材质颜色的属性。除此之外,还可以用ambient和emissive控制材质的颜色。 ambient表示对环境光的反射能力,只有当设置了AmbientLight后,该值才是有效的,材质对环境光的反射能力与环境光强相乘后得到 阅读全文
posted @ 2016-11-21 16:43 缘琪梦 阅读(560) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascr 阅读全文
posted @ 2016-11-21 15:39 缘琪梦 阅读(513) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <title>Example 01.04 - Materials, light and animation</title> <script type="text/javascript" src="../libs/three.js"></sc 阅读全文
posted @ 2016-11-01 17:55 缘琪梦 阅读(1552) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <title>Example 01.03 - Materials and light</title> <script type="text/javascript" src="../libs/three.js"></script> <scri 阅读全文
posted @ 2016-11-01 17:54 缘琪梦 阅读(785) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <title>Example 01.02 - First Scene</title> <script type="text/javascript" src="../libs/three.js"></script> <script type= 阅读全文
posted @ 2016-11-01 17:53 缘琪梦 阅读(569) 评论(0) 推荐(0) 编辑
摘要:在Threejs中,光源用Light表示,它是所有光源的基类。它的构造函数是: THREE.Light ( hex ) 它有一个参数hex,接受一个16进制的颜色值。例如要定义一种红色的光源,我们可以这样来定义: Var redLight = new THREE.Light(0xFF0000); T 阅读全文
posted @ 2016-10-31 18:21 缘琪梦 阅读(479) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script type="text/javascript" script src="libs/three.js"></script> <scrip 阅读全文
posted @ 2016-10-31 17:51 缘琪梦 阅读(467) 评论(0) 推荐(0) 编辑
摘要:为什么要用three.js Three.js为我们封装了底层的WebGl接口,使我们在无需掌握繁冗的图形学知识的基础下可以轻松的创建三维场景。相比较使用底层的WebGL我们可以使用更少的代码,大大的降低了学习成本,使开发变的更高效。 新建HTML页面 首先新建一个HTML页面,引入Three.js文 阅读全文
posted @ 2016-10-31 10:48 缘琪梦 阅读(4326) 评论(1) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2016-10-28 15:32 缘琪梦 阅读(711) 评论(0) 推荐(0) 编辑
摘要:1、右手坐标系 Threejs使用的是右手坐标系,这源于opengl默认情况下,也是右手坐标系。下面是右手坐标系的图例,如果对这个概念不理解,可以百度一下,我保证你伸出手比划的那一瞬间你就明白了,如果不明白请给作者留言,我会尽快补上关于坐标系的知识。 图中右边那个手对应的坐标系,就是右手坐标系。在T 阅读全文
posted @ 2016-10-28 14:50 缘琪梦 阅读(9846) 评论(0) 推荐(0) 编辑
摘要:透视投影照相机(Perspective Camera)的构造函数是: 让我们通过一张透视照相机投影的图来了解这些参数。 [+]查看原图 透视图中,灰色的部分是视景体,是可能被渲染的物体所在的区域。fov是视景体竖直方向上的张角(是角度制而非弧度制),如侧视图所示。 aspect等于width / h 阅读全文
posted @ 2016-10-28 14:30 缘琪梦 阅读(1373) 评论(0) 推荐(0) 编辑
摘要:照相机又分为正交投影照相机与透视投影照相机 举个简单的例子来说明正交投影与透视投影照相机的区别。使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果(如下图中的(a)); 而使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果,对于在三维空间内平行的线,投影 阅读全文
posted @ 2016-10-28 13:15 缘琪梦 阅读(2446) 评论(0) 推荐(0) 编辑
摘要:Three框架 阅读全文
posted @ 2016-10-28 11:45 缘琪梦 阅读(943) 评论(0) 推荐(0) 编辑
摘要:第一个框架的效果是显示一个绿色的正方体 这个旋转的立方体算我们踏入WebGL这个神奇的世界的开始。借助于three.js,我们并没有写太多的代码就完成了这个示例。现在,我们来分析它。 在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)和渲染器(ren 阅读全文
posted @ 2016-10-28 11:44 缘琪梦 阅读(1850) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示