threejs

Free HTML5 Bootstrap Template by FreeHTML5.co

100 Three.js使用VideoTexture实现视频Video更新纹理

threejs 点击数: 1922

简介既然我们可以使用canvas元素创建纹理,Three.js也给我们提供了可以实现video创建纹理的方法。我们通过Three.js提供的VideoTexture来实现创建视频纹理。案例实现 首先还是

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

99 Three.js使用canvas更新纹理

threejs 点击数: 1233

简介Three.js可以直接将canvas画布上的图像作为纹理绘制到模型上面。下面我们说一下如何实现案例实现 首先,我们创建了一个canvas对象,并使用js在上面循环绘制图像。在上面绘

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

98 Three.js 通过设置纹理属性来修改纹理贴图的位置和大小

threejs 点击数: 1088

简介前几节我们也了解了纹理一些用法,在这一节,我们进行自定义UV映射。并且还可以查看到wrapS和wrapT两个配置项不同的区别。实现原理要实现通过Three.js改变纹理的UV映射,我们

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

97 Three.js 使用 specularMap 设置高光贴图

threejs 点击数: 894

简介我们可以通过设置高光贴图来实现部分区域反光。通过设置高光贴图,我们会发现,只有海洋部分会有发光,而陆地部分没有高光的效果。
一般来讲,像素的值越高(从黑到白),物体表面就

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

96 Three.js 使用cubeCamera相机创建反光效果

threejs 点击数: 721

通过案例可以看到,中间的球体不但可以和上一节一样看到环境贴图的相关纹理,连两边的模型都实现了反光的效果。这主要得益于cubeCamera的强大功能。简介使用THREE.CubeCamera可

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

95 Three.js 使用设置envMap环境贴图创建反光效果

threejs 点击数: 893

简介计算环境的反光效果对CPU耗费是非常大,而且通常会使用光线追踪算法。在Three.js中你依然可以实现发光的效果,只不过是做一个假的。我们可以通过将纹理贴图到模型上面来模

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

94 Three.js 使用设置lightMap光照贴图创建阴影效果

threejs 点击数: 875

简介之前的阴影效果都是通过特定的法向贴图或者凹凸贴图再或者使用Three.js渲染生成的,这一节,我们使用另一种方法来创建阴影,也就是使用光照贴图。光照贴图是预先渲染好的的阴

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

93 Three.js 使用设置normalMap创建更加细致的凹凸和褶皱

threejs 点击数: 426

左边为设置normalMap后的效果,右边为正常效果。我们会发现设置了normalMap后的立体感非常的强烈。简介法线贴图保存的不是高度信息,二十法向量的方向。简单来讲,使用法向贴图只

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

92 Three.js 使用设置bumpMap凹凸贴图创建褶皱

threejs 点击数: 509

简介凹凸贴图用于为材质增加厚度。我们用到的凹凸贴图是一张灰度图,当然你也可以使用彩色图。像素的密集程度定义的是凹凸的高度,但是凹凸图只包含像素的相对高度,没有任何倾斜

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

91 Three.js Texture纹理属性详解

threejs 点击数: 790

构造函数Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )案例// load a texture, set wrap mode to repeatvar texture = new T

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

90 Three.js 对模型多个动画切换展示

threejs 点击数: 3439

简介上一节本想直接了结动画这一章。最后一想,没有做过模型动画切换的案例。就此,再加一章,关于模型多个动画之间如何切换的问题。案例实现首先,我们需要先将模型导入,之前案例

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

89 Three.js 导入dae格式的骨骼绑定动画模型

threejs 点击数: 976

简介上一节,我们导入了一个官方的FBX格式的骨骼模型,实现了动画效果。这一节,更换了dae格式的模型导入,主要是这个模型返回的数据和FBX的返回格式有一些区别,下面我们将在案例中

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

88 Three.js 导入FBX格式骨骼绑定模型

threejs 点击数: 1246

简介上一节,深入了解了一下SkinnedMesh模型对象的创建。这一节,我们导入外部骨骼绑定的模型,来实现动画显示。由于Three.js支持的三维格式非常多,由于导入模式大同小异,我们就选

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

87 Three.js 手动创建SkinnedMesh的骨骼和绑定动画

threejs 点击数: 731

简介这一节,为了提高自己对SkinnedMesh的理解,查看了官方文档里面的对于这一个功能的介绍。发现,官方竟然是通过手动创建了一个模型。并独自绑定了相关的骨骼,我们可以通过dat.

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

86 Three.js 通过SkinnedMesh来创建骨骼和蒙皮动画

threejs 点击数: 824

简介变形动画十分简洁。Three.js知道所有目标顶点的位置,实现变形动画所要做的就是将每一个顶点从一个位置变换到另一个位置。而骨骼和蒙皮则要复杂一些。当你使用骨骼创建动

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

85 Three.js 通过设置morphTargetInfluences属性来创建动画

threejs 点击数: 395

简介morphTargetInfluences属性是mesh对象上面所含有的属性,是专门作用域同等下标下的morphTargets顶点的值对当前默认的顶点值的影响权重。 官网的介绍:An array of weights

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

84 Three.js 使用AnimationMixer实现变形动画

threejs 点击数: 868

前言这几天一直在做一个小游戏案例。来巩固一下之前学到的东西。想看我制作出来的案例特效可以查看网址:http://www.wjceo.com/blog/demo/2018-04-09/144.html 下面开始这一

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

83 Three.js 使用PointerLockControls控制相机实现射击游戏视角

threejs 点击数: 2389

简历指针锁定API允许您在游戏界面中锁定鼠标或其他指针设备,以便您不用绝对定位光标就可以获得坐标变化值,从而准确地判断用户正在做什么,并且还可以防止用户意外地进入另一块

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

82 Three.js 使用第一视角控制器FirstPersonControls控制相机

threejs 点击数: 1637

简介顾名思义,通过第一视角控制器你可以像第一视角射击游戏那样控制摄像机。鼠标用于控制视角,键盘用于控制移动角色。本人感觉最类似的效果就是cs游戏死亡后,能够随意漂浮的

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

81 Three.js 使用TWEEN插件实现动画

threejs 点击数: 1184

简介Tween.js是一个轻量级的JavaScript库,中文官网是:http://www.createjs.cc/tweenjs/。通过这个库可以很容易地实现某个属性在两个值之间的进行过渡,而且起始值和结束值之间

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

80 Three.js 的基础动画

threejs 点击数: 797

简介模型导入到上一节也就先告一段落了,接下来,我将学习动画方面的知识。在这之前,我先复习了一下基础变化的相关知识。 基础动画就是缩放、位置和旋转,也就是配置模型的scale

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

79 Three.js 使用导入的模型生成粒子

threejs 点击数: 944

简介前几节我已经将现在一些经常使用的模型导入的方法。之前也接触粒子的创建。这个案例是把两者结合起来,通过导入模型获得几何体的数据,然后创建粒子。实现案例案例查看地

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

78 Three.js 导入PDB格式的模型

threejs 点击数: 357

简介PDB是一种非常特殊的格式,由Protein Data Bank(蛋白质数据银行)创建,用于定义蛋白质的形状。蛋白质数据银行(www.rcsb.org)包含了很多分子和蛋白质的详细信息,还可以用PDB格式

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

77 Three.js 导入BABYLON格式的模型

threejs 点击数: 314

简介Babylon是一个三维JavaScript游戏库,它以自己的内部格式存储模型。有关这方面的信息请访问http://www.babylonjs.com实现案例案例查看地址: 首先,引入script加载器<scr

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

76 Three.js 导入VRML格式的模型

threejs 点击数: 510

简介VRML是Virtual Reality Modeling Language的缩写。这是一种基于文本的格式,允许定义三维对象和世界。它已被X3D文件格式取代。Three.js不支持加载X3D模型,但这些模型可以

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

75 Three.js 导入ASSIMP格式的模型

threejs 点击数: 270

简介Open asset import library(也称为Assimp)是一种导入各种三维模型格式的标准方法,是用此加载程序,由assimp2json转换的大量三维格式都可以导入模型,更多详细信息请访问https

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

74 Three.js 导入AWD格式的模型

threejs 点击数: 214

简介AWD是一种用于三维场景的二进制格式,并且通常与http://away3d.com/引擎一起使用。请注意,此加载程序不支持压缩的AWD文件。实现案例案例查看地址: 首先,引入script加载

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

73 Three.js 导入PLY格式的模型

threejs 点击数: 463

简介PLY格式的全称是多边形(Polygon)文件格式,通常用来保存三维扫描仪的信息。这种格式只保存几何体数据,没有纹理颜色。实现案例案例查看地址: 首先,引入script加载器<script

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

72 Three.js 导入VTK格式的模型

threejs 点击数: 327

简介VTK是由Visualization Toolkit创建的一种格式,用来指定顶点和面。VTK有两种格式:二进制和基于文本的ASCII。Three.js只支持基于ASCII的格式。实现案例案例查看地址: 首

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

71 Three.js 导入CTM格式的模型

threejs 点击数: 278

简介CTM是由openCTM创建的一种文件格式,可以用来以压缩格式存储三维网格的三角形面片。实现案例案例查看地址: 首先,引入script加载器<script src="/lib/js/loaders/ctm/lz

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

70 Three.js 导入STL格式的模型

threejs 点击数: 932

简介STL是STLereoLithography(立体成型术)的缩写,广泛用于快速成型。例如三维打印机的模型文件通常是STL文件。 Three.js还有一个可定制的STL导出器,叫作OBJExporter.js,可以用

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

69 Three.js 导入Collada(.dae)格式的模型

threejs 点击数: 645

简介Collada是一种用基于XML的格式定义数字内容的格式。这也是一种被广泛使用的格式,差不多所有的三维软件和渲染引擎都支持这种格式。 Collada模型中不仅定义了几何体,也定

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

68 Three.js 导入OBJ格式和MTL的格式

threejs 点击数: 1244

简介OBJ和MTL是相互配合的两种格式,经常一起使用。OBJ文件定义几何体,而MTL文件定义所用的材质。OBJ和MTL都是基于文本的格式。 Three.js可以很好地理解OBJ文件和MTL文件,而且

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

67 Three.js 导入OBJ格式的模型

threejs 点击数: 1028

简介OBJ是一种简单的三维文件格式,由Wavefront Technologies创建。它是使用最广泛的三维文件格式,用来定义对象的几何体。MTL文件常同OBJ文件一起使用。 Three.js还有一个可

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

66 Three.js 导入blender生成的JSON文件

threejs 点击数: 861

简介有很多三维软件可以用来创建复杂的网格。我们今天将的是Blender(www.blender.org)。Three.js库有一个Blender(以及Maya和3D Studio Max)导出器,可以直接将文件导入为Three.j

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

65 Three.js 使用JSON格式保存和加载整个场景

threejs 点击数: 1201

前言本人是用开发指南里面的教程发现在新版本里面你的方法已经无法实现,所以,我们采用保存和加载模型的方法进行实现场景。实现案例查看地址: 首先,将scene场景转化为JSON对象,

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

64 Three.js 使用JSON格式保存和加载模型

threejs 点击数: 886

前言学习从外部资源中加载几何体,首先我们学会如何保存和加载Three.js的JSON格式文件。简单案例案例查看地址: 在Three.js中导出JSON文件非常容易,并且不需要引入额外的库。你

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

63 Three.js 将多个网格合并成一个网格

threejs 点击数: 983

简介多数情况下使用组可以很容易地操纵和管理大量网格。但是当对象的数量非常多时,性能就会成为一个瓶颈。使用组,每个对象还是独立的,仍然需要对它们分别进行处理和渲染。通

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

62 Three.js 使用对象组合

threejs 点击数: 476

简介将多个模型放到一个组里面,就是一个对象组合。 创建组非常简单,每个你创建的网格都可以包含子元素,子元素可以使用add函数来添加。在组中添加子元素的效果是:你可以移动、

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

61 Three.js 从高级几何体创建THREE.Points

threejs 点击数: 454

整如你所记得的,THREE.Points基于几何体的顶点来渲染每个粒子。也就是说,我们提供一个复杂的几何体(比如环状扭结或者管),我们就可以基于这个几何体的顶点创建出一个THREE.Point

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

60 Three.js 使用精灵贴图创建类似HUD层

threejs 点击数: 610

使用的案例还是上一节的案例代码,由于上一节我们使用了两个scene和两个camera进行渲染,所以,现在我们只要查看怎么实现精灵贴图。 查看案例代码sreateSprite方法,我们可以看到,一

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

59 Three.js 渲染两个场景和使用不同的相机,渲染在一个场景里面

threejs 点击数: 1046

前言以前的时候没有试过,能不能把两个不同scene内的内容,渲染在同一个场景内呢?并且使用不同的相机?实现实现上面的疑问很简单,只要用renderer分别渲染两次即可,顺序如下: 首先

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

58 Three.js 通过THREE.Raycaster给模型绑定点击事件

threejs 点击数: 4287

简介由于浏览器是一个2d视口,而在里面显示three.js的内容是3d场景,所以,现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标。好在three.js已经有了解决

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

57 Three.js 使用粒子实现下雪特效

threejs 点击数: 836

介绍由于实现了下雨的效果,实现下雪的效果就简单多了。首先就是更换一张图片,然后在渲染的时候,降低y轴的速度,就实现了下雪的效果。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

56 Three.js 使用粒子实现雨滴特效

threejs 点击数: 1149

以上是最终的效果,我们通过之前的学习的内容,完全可以实现这个效果。注意事项 当前的纹理使用的图片加载,图片加载生成纹理的方法为:var texture = new THREE.TextureLoade

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

55 Three.js 使用canvas样式化粒子

threejs 点击数: 442

简介使用canvas样式化粒子,那么我们首先需要先绘制一个canvas画布的纹理。比如: 这是教程使用canvas绘制的吃豆人里面的一个小怪物,而我们今天要实现的就是,使用它来样式化粒

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

54 Three.js 使用THREE.PointCloudMaterial(新版本改名:THREE.PointsMaterial)样式化粒子

threejs 点击数: 463

简介上一节我们介绍了一下THREE.PointCloud。THREE.PointCloud构造函数接收两个属性:几何体和材质。材质用来给粒子着色和添加纹理,而几何体则用来指定单个粒子的位置。每个

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

53 Three.js 使用THREE.PointCloud(新版本改名:THREE.Points)批量管理粒子

threejs 点击数: 309

简介当我们如果大量使用粒子时,会很快遇到性能问题,因为每添加一个粒子就是一个模型,因为每个粒子对象分别由THREE.js进行管理,所以,three.js提供了另一种方式来处理大量粒子,那

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

52 Three.js里面的粒子

threejs 点击数: 381

粒子的作用粒子(有时也精灵sprite),可以非常容易地创建很多细小的物体,可以用模拟雨滴、雪花、烟和其他有趣的效果。简单案例创建一个粒子很简单:var sprite = new THREE.Sprite

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

51 使用ThreeBSP库进行Three.js网格组合

threejs 点击数: 879

简介之前我们一直使用Three.js默认提供的几何体,今天我们使用ThreeBSP库,可以将现有的模型组合出更多个性的模型来使用。我们可以使用ThreeBSP库里面的三个函数进行现有模型

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

50 Three.js让模型居中,获取模型的最小大小

threejs 点击数: 824

模型居中让模型居中的方法最简单了,直接给geometry调用center()方法就实现了,模型居中显示。 //让图形居中显示 geom.center();12获取模型的最小大小获取模型

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

49 Three.js使用THREE.TextGeometry创建三维文本解决中文乱码的问题

threejs 点击数: 778

解决方案如果写汉字发现出来的只是一堆????的话,证明当前引入的字体不支持汉字。我们的解决方案就是引入可以支持汉字json文件。那么问题来了,这种json文件我们怎么获得? - 我们可

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

48 Three.js使用THREE.TextGeometry创建三维文本

threejs 点击数: 393

简介之前我们通过使用THREE.ExtrudeGeometry来拉伸二维图形生成三维图形。这次我们通过使用THREE.TextGeometry来实现字体的3d化。实现实现还是和别的几何体一样通过实例化

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

47 Three.js使用THREE.ParametricGeometry生成平面图形、波浪图形、和克莱因瓶

threejs 点击数: 375

简介使用THREE.ParametricGeometry可以根据传入的公式,计算出相应的几何体。这是一个很具有扩展性的几何体。简单实现var geometry = new THREE.ParametricGeometry(functio

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

46 Three.js使用THREE.ExtrudeGeometry拉伸SVG为三维图形

threejs 点击数: 396

简介SVG是可缩放矢量图(Scalable Vector Graphics)。它基于XML的标准,用来在网页上创建二维矢量图。该标准是一个所有现代浏览器都支持的开房标准。我们可以使用Three.js的THR

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

45 Three.js拉伸几何体THREE.TubeGeometry

threejs 点击数: 378

简介THREE.TubeGeometry可以沿着一条三维的样式曲线(THREE.CatmullRomCurve3对象)拉伸出一根管。最简单实现var tubeGeometry = new THREE.TubeGeometry(path,segments,radiu

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

44 Three.js拉伸几何体THREE.ExtrudeGeometry

threejs 点击数: 351

拉伸几何体是什么拉伸是指我们有一个二维图形,通过针对这个二维图形进行z轴拉伸,将它转换成三维图形。例如,如果我们拉伸THREE.CircleGeometry,就会得到一个类似圆柱体的图形;如

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

43 Three.js自定义二维图形THREE.ShapeGeometry

threejs 点击数: 456

简介通过THREE.ShapeGeometry,你可以调用几个函数来创建自己的图形。我们可以使用线条(line)、曲线(curve)和样条曲线(spline)创建图形的轮廓。还可以使用THREE.Shape对象的holes

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

42 Three.js高级几何体车床模型THREE.LatheGeometry

threejs 点击数: 336

简介THREE.LatheGeometry允许你从一条光滑的曲线创建图形。此曲线是由多个点定义,通常称作样条曲线。然后再绕y轴旋转,就生成了一组车床类型的几何体模型。简单实现 首先,

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

41 Three.js高级几何体THREE.ConvexGeometry

threejs 点击数: 300

简介通过THREE.ConvexGeometry,我们可以围绕一组点创建一个凸包。所谓凸包就是包围这组点的最小图形。也就是所有的点都在当前模型的体内,而且当前图形还是实现的体积最小的

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

40 Three.js线性几何体材质THREE.LineDashedMaterial

threejs 点击数: 234

简介这种材质和THREE.LineBasicMaterial略有些不同,它不但可以给线段上色,还可以添加一种虚线的效果。额外属性 名称 描述

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

39 Three.js线性几何体材质THREE.LineBasicMaterial

threejs 点击数: 311

简介THREE.LineBasicMaterial用于绘制线段的基础材质。相关属性 名称 描述 color 该

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

38 Three.js高级材质THREE.ShaderMaterial

threejs 点击数: 575

注意看这一篇文章最好有webgl基础的同学看,如果没有webgl原生基础,你会看得很懵逼。简介THREE.ShaderMaterial是Three.js库中最通用、最复杂的材质之一。通过它可以使用自己

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

37 Three.js高级材质THREE.MeshPhongMaterial

threejs 点击数: 339

前言快乐度过了愉快了国庆,感觉自己浪费了很多时间,但是却感觉很值。然后再看一下钱包,发现激发了很大的学习的热情。我的笔记会一直更新,也希望自己的笔记能够帮助更多的人。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

36 Three.js高级材质THREE.MeshLambertMaterial

threejs 点击数: 467

简介 这种材质可以用来创建暗淡的并不光亮的表面。 无光泽表面的材质,无镜面高光。 这可以很好地模拟一些表面(如未经处理的木材或石头),但不能用镜面高光(如上漆木材)

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

35 Three.js的融合材质

threejs 点击数: 360

简介在上一节,使用three.js的60版本,我们成功的实现了THREE.MeshDepthMaterial的案例。但是,我们没有办法修改它的材质的颜色。而一切都是由材质的默认属性决定的,但是Three.js

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

34 Three.js的材质THREE.MeshDepthMaterial

threejs 点击数: 341

简介使用THREE.MeshDepthMaterial材质的物体,其外观不是由光照或某个材质属性决定的,二十有物体到摄像机的距离决定的。可以将这种材质与其他材质结合使用,从而很容易地创建出

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

33 Three.js的材质THREE.MeshBasicMaterial

threejs 点击数: 461

简介MeshBasicMaterial是一种非常简单的材质,这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形,而且也可以显示几何体的线框。设置属性Three.

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

32 Three.js的材质的种类和共有属性

threejs 点击数: 267

种类 名称 描述 MeshBasicMaterial(网格基础材质) 基础材质,用于给几何体赋予一种简单的

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

31 Three.js的特殊光源镜头光晕(lens flare)

threejs 点击数: 1183

简介当你直接朝着太阳或者一个非常明亮的灯光的时候就会出现镜头光晕效果。大多数情况会避免这种效果,但是如果对于游戏或者三维图形来说,它提供了一种很好的效果,让场景看上

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

30 Three.js的相机飞行控件FlyControls

threejs 点击数: 900

简介FlyControls是相机的控件,飞行模拟器控件,用键盘和鼠标控制相机移动和旋转。这个控件使用可以把相机想象成是无人机的摄像头。操作方式A键和D键控制镜头左右移动 W键|鼠

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

29 Three.js的特殊光源THREE.RectAreaLight窗口射入光线模拟

threejs 点击数: 459

简介这种光在整个面上均匀地发射出一个矩形平面。这可以用来模拟像明亮的窗户或带状照明的东西。简单创建由于是特殊光源,而且比较复杂,所以此灯光需要额外引入插件来创建<sc

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

28 Three.js的特殊光源THREE.HemisphereLight户外光照光源

threejs 点击数: 525

简介此光源可以创建出更加贴近自然的户外光照效果。就是为了模拟在户外场景中的反光效果。光源简单的创建首先实例化函数:var hemiLight = new THREE.HemisphereLight(天空

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

27 Three.js的平行光THREE.DirectionalLight

threejs 点击数: 507

简介THREE.DirectionalLight平行光可以看作距离很远的光。它发出的所有光线都是平行的。比如太阳光,由于太阳离我们很远,我们可以把太阳的光线看作是平行的。与点光源和聚光

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

26 Three.js的聚光灯光源THREE.SpotLight

threejs 点击数: 440

介绍THREE.SpotLight(聚光灯灯源)是最常使用的光源之一。THREE.SpotLight是一种具有锥形效果的光源。比如:手电筒。相关属性由于Three.js的版本更新过快,有可能有我没有测试的

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

25 Three.js的点光源THREE.PointLight

threejs 点击数: 364

介绍Three.js库中的THREE.PointLight(点光源)是一种单点发光、照射所有方向的光源。比如夜空中的照明弹。THREE.PointLight的相关属性 属性

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

24 Three.js的环境光源THREE.AmbientLight

threejs 点击数: 492

作用场景当中添加了THREE.AmbientLight光源,光源的颜色将会影响全局的每一个物体每一个面的颜色。该光源没有特别得来源方向,也不会产生阴影。 通常不会使用THREE.AmbientLig

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

23 Three.js的光源种类

threejs 点击数: 280

为什么需要光源?我们能看到物体都是因为有光的反射效果,不同的物体反射出来的光也就显示出来了不同的颜色。所以,three.js框架模拟了一些现实生活中的光源来实现所需要的效果

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

22 Three.js的网格对象MESH的属性和方法

threejs 点击数: 762

创建一个网格需要一个几何体,以及一个或多个材质。当网格创建好之后,我们就可以将它添加到场景中并进行渲染。网格对象提供了几个属性和方法用于改变它在场景中的位置和显示

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

21 Three.js使用顶点绘制立方体

threejs 点击数: 646

我们在学些WebGL基础的时候每天都是在一直研究顶点位置,法向量,绘制下标什么的。虽然复杂,但是毕竟原生,性能没得说。three.js也给我们提供了相关的接口供我们使用原生的方法绘

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

20 Three.js实现场景所有物体使用相同的材质

threejs 点击数: 257

scene.overrideMaterial可以强制场景内的所有的物体使用相同的指定材质来绘制图形。具体使用案例,我在案例中给场景的相关属性添加了: [javascript] view plain copy //

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

19 Three.js实现雾化效果

threejs 点击数: 484

如果使用three.js实现雾化效果很简单,只需要在给场景scene对象的fog属性添加值就好了,比如: [javascript] view plain copy scene.fog = new THREE.Fog(0xffffff,100,120)

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

18 Three.js的场景对象

threejs 点击数: 218

通过这一段时间的学习,发现还没有介绍过场景的基本组件。这一节就简单的介绍一下相关的内容:如果我们想让物体显示出来,首先,我们需要有一个渲染器(new THREE.WebGLRenderer())来

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

17 Three.js针对浏览器变动进行自适应

threejs 点击数: 429

有的时候,我们打开了浏览器的页面,显示了当前的渲染的模型。但是,如果你没有设置场景模型跟随着浏览器的宽高度变化进行自适应,就gg了。所以,今天额外补上一篇相关的怎么跟随浏

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

16 Three.js使用dat.GUI简化试验流程

threejs 点击数: 669

简介使用这个插件的最省事的地方在于,调试很方便的调节相关的值,从而影响最后绘制的结果。而dat.GUI实现的东西也很简单,理解起来也很好理解。我们实例化dat.GUI对

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

15 Three.js实现阴影效果

threejs 点击数: 500

作为webgl的插件,three.js肯定没有原生webgl那样,添加一个阴影这么费劲。所以,经过博主一小时的研究(笨人不聪明,已经是极限速度了)。终于将阴影效果做了出来,并且还发现一些容易

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

14 Three.js绘制字体模型

threejs 点击数: 582

使用three.js绘制字体模型,没有想象当中那么难。首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载,在加载成功的回调函数里面进行创建网格。然后通过THREE

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

13 Three.js照相机的正交投影和透视投影

threejs 点击数: 345

这一篇文章会的人也不看,不会的人也不需要专业术语,我直接大白话介绍一下webgl里面的照相机。照相机就相当于在模型世界中,设置一个位置,将前方的内容拍摄下来,然后再给canvas,在

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

12 Three.js官方文档介绍的相关对象功能列表

threejs 点击数: 364

Cameras(照相机,控制投影方式)CameraOrthographicCameraPerspectiveCameraCore(核心对象)BufferGeometryClock(用来记录时间)EventDispatcherFace3Face4GeometryObject3DProjector

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

11 Three.js使用Detector.js插件实现兼容性检测

threejs 点击数: 306

其实Detector.js插件的代码很短,但是功能很全,(1)判断canvas兼容。(2)判断webgl兼容性。(3)在页面添加不兼容提示信息。这三个功能已经对兼容性检测足够了。使用方式也很简单:首先,将

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

10 Three.js使用orbit controls插件(轨道控制)来控制模型交互动作

threejs 点击数: 852

这个效果相对于第八节的轨迹球插件使用上感觉要好,虽然轨迹球插件可以来回的滚动,但是容易分辨不清楚上下左右的关系,容易混乱,适合调试,而轨道控制插件orbit则适合客户使用,还不

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

09 Three.js使用性能插件stats进行性能监听

threejs 点击数: 395

stats性能插件添加了以后,会默认在左上角显示性能帧数,每次刷新所用时间,占用内存。鼠标左键点击可进行切换,默认显示每秒的帧数。 首先需要将stats插件引入,地址是官网下载

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

08 Three.js使用轨迹球插件(trackball)增加对模型的交互功能

threejs 点击数: 899

这是three.js的一个组件,需要额外的引入文件,文件的地址是在官方下载的案例的examples/js/controls/TrackballControls.js。只需要和案例里面一样设置相关的属性,并在实例化的

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

07 Three.js内置几何

threejs 点击数: 753

这个案例是官方案例,个人通过一个一个测试备注,感受模型如何配置参数,来生成理想的形状。three.js内置的这些几何确实够平常使用,还可以通过顶点实现效果。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

06 Three.js工程文件目录结构

threejs 点击数: 348

为了熟悉Three.js,我们需要花一些时间来了解它的目录结构、文档和示例。这里面包含的东西很多,了解一下对以后学习的用处很大。 ~build/Three.js的完整项目代码输出目录,包括

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

05 Three.js一个好的结构书写

threejs 点击数: 698

学习three.js也有两天了,现在也在不间断的学习相关知识,了解three.js的规则。也做了两个简单的案例,感受到了three.js的强大,研究了一些别人的代码,现在想找到一种适合自己的书

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

04 Three.js一个案例详解

threejs 点击数: 1256

(1)创建了渲染器,并传值对象antialias设置为true,告诉Three.js要启用抗锯齿(antialiased)渲染。抗锯齿可以避免绘制物体边缘时产生的锯齿。(2)创建场景。(3)创建相机,设置相机的投影视

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

03 Three.js绘制线

threejs 点击数: 857

相对于上一节来说,只是模型方面有区别,这里是先使用线纹理的方法设置线的纹理,然后使用几何对象或者缓冲区几何对象生成顶点坐标,最后调用Line方法绘制出来线。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

02 Three.js的hello world

threejs 点击数: 924

(1)首先引入了three.js的库文件,就和引入jq一样。(2)创建场景(17行)(3)创建相机,并设置视野,显示的宽高比,近裁剪面,远裁剪面(19行)(4)创建渲染器,并设置属性,放置到dom中(21-25行)(5)创建一个立方

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

1 WebGL框架three.js优势简介

threejs 点击数: 1278

从今天开始,我学习WebGL基础将占时告一段落,开始学习WebGL的流行框架three.js。经验告诉我,学习一种语言,如果入门能力差,最好从框架开始学,虽然会被掩盖很多的原理方面的东西,但

查看详情

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多