threejs
一些 three.js 学习小示例
「已注销」
骐骥一跃,不能十步;驽马十驾,功在不舍
展开
-
案例01 - 通过鼠标点击平面实现任意画线功能
首先,看一下案例实现的一下功能。 示例:http://ithanmang.com/drawline/index.html操作步骤:鼠标指针移入三维网格平面之中,按下左键即可画线,画线过程中,若鼠标移出平面则停止绘制,再次移入则进行上次继续画线,鼠标右键结束绘制,Esc键退回上一步骤。案例需求:案例可以用于在三维场景中绘制逃生路线、以及方向线绘制、测量,物体的移动路线绘制等场景。...原创 2018-08-13 10:51:29 · 9223 阅读 · 16 评论 -
Three.js - 开始记录学习进度
首先,本人不是专业的WebGl开发工程师,顶多算一个小白菜。 从今天开始起,我将把自己对 ThreeJs 的学习记录分享给大家,虽然并不专业,但也是自己的一些历程和见解,也许以后再来回顾,或许会有一些不同的体会。 这个系列一旦开始就没有结束,但凡自己以后在工作中遇到问题都会分享在此博客,谈一下自己的思路和一些寻找的资料的总结,总之,加油! 本篇demo的浏览地址:http://www.ith...原创 2018-06-22 15:59:51 · 2183 阅读 · 0 评论 -
Three.js - 创建第一个三维场景
参考资料是 《three.js开发指南》这本书第一章的示例和讲解。 本示例浏览地址:http://www.ithanmang.com/threejshome/20180623/01-basic-scene.html 由下图可以看到,场景中只有一个平面和一个立方体外加上的灯光。 下面是参考代码<!DOCTYPE html>&am原创 2018-06-23 12:41:48 · 1106 阅读 · 4 评论 -
Three.js - 使用setInterval和requestAnimationFrame实现动画效果
如果想要在场景中实现动画效果,需要使场景以一定的时间间隔进行渲染。 让页面按照一定的间隔进行刷新的方法有两种,分别是: 在H5 和 jsAPI接口之前使用的方法是 setInterval 方法setInterval 作用:在播放动画时,按照一定的时间间隔就调用传入的方法或对象。格式如下: setInterval( function,interval[arg1,...argn] )或...原创 2018-06-23 18:08:47 · 4106 阅读 · 0 评论 -
Three.js 笔记 - 使用dat.GUI简化调试流程
dat.GUI 函数库是由谷歌的一个民间组织所开发的,在他的帮助下,可以很容易的创建出一个简单的界面组件,可以用来修改代码中的变量。 本示例浏览地址: http://www.ithanmang.com/threejshome/20180623/04-datgui.html1 示例代码<!DOCTYPE html><html lang="en原创 2018-06-23 21:23:06 · 2751 阅读 · 2 评论 -
Three.js - 使用阴影效果 shadowMap 和 设置阴影分辨率
开启阴影效果需要渲染器支持,如果使用的WebGLRender 渲染器。 需要renderer.shadowMap.enabled = true;来开启渲染气阴影效果。 示例浏览地址:http://www.ithanmang.com/threejshome/20180624/01-shadow.html 可以看待阴影效果比较突出,并且阴影的分辨率也比较高 步骤1 首先需要渲染器支持阴...原创 2018-06-24 17:43:51 · 11456 阅读 · 0 评论 -
Three.js - 监听window 的 resize 事件,使浏览器窗口变动自适应
通过是添加 window 的 resize 事件,根据浏览器窗口的变动更新相机的aspect以及 渲染器的渲染范围,实现自适应的效果。 本示例浏览地址:http://www.ithanmang.com/threejshome/20180624/02-windowResize.html 示例代码:<!DOCTYPE html><html lang="原创 2018-06-24 19:35:10 · 7627 阅读 · 5 评论 -
Three.js - 使用 overrideMaterial 方法覆盖全局材质属性
如果想让添加到场景中的所有材质属性都同意的话,可以使用scene的 overrideMaterial 属性来覆盖。 示例浏览地址:http://www.ithanmang.com/threejshome/201806/20180625/01-overrideMaterial.html 可以看到本来是随机颜色添加到scene的立方体的颜色和plane 的材质颜色都发生了改变。 示例代码...原创 2018-06-25 11:17:22 · 2624 阅读 · 0 评论 -
Three.js - 场景对象 Scene 常用方法和属性
Scene 对象是 three.js 的核心对象它继承自 Object3D 对象。 在场景中我们可以放置 对象 灯光。 构造器:Scene() 查看源码 源码版本: r93function Scene() { // 继承Object3D对象 Object3D.call( this ); // 类型 this.type = 'Scene'; // ...原创 2018-06-25 13:23:26 · 5278 阅读 · 0 评论 -
Three.js - 使用 ThreeBSP 对模型进行布尔运算
ThreeBSP.js 是 three.js 的一个扩展库,可以实现对模型的数学布尔运算,实际上就是个个点的重新组合和拆分,来重新生成 几何体对象和网格模型。 本实示例浏览地址:http://www.ithanmang.com/threejshome/201806/20180626/01-threeBSPdemo.htmlThreeBSP构造函数function ThreeBSP(tre...原创 2018-06-26 14:53:13 · 7805 阅读 · 4 评论 -
Three.js - 绘制线框几何模型
通过 three.js 可以绘制线段模型,包括虚线和基础线条。var lineGeometry = new THREE.Geometry();lineGeometry.vertices.push(new THREE.Vector3(-200, -200, -200));lineGeometry.vertices.push(new THREE.Vector3(200, 200, 200)...原创 2018-06-29 11:36:23 · 7226 阅读 · 1 评论 -
Three.js - 绘制三维字体模型 - 英文和中文
创建字体模型,需要通过THREE.FontLoader()方法,来加载json格式的字体格式类型,然后在加载成功的回调函数中,通过THREE.TextBufferGeometry()或者THREE.TextGeometry(),将 需要展现的文本 以及设置好的字体格式对象传递到方法中 来创建Mesh对象,需要注意的是,THREE.TextBufferGeometry(),不能用作BSP 布尔操作,...原创 2018-06-29 18:02:55 · 3908 阅读 · 0 评论 -
Three.js - 重置相机和控制器使镜头回到初始状态
在做三维项目的过程中,如果一个模型被用户不断旋转和缩放,会产生找不到模型的情况,因此就需要添加一个键盘事件,来使相机和控制器重置,找回模型。1、添加键盘控制2、重置相机和控制器 按 Enter键重置浏览镜头. 示例浏览地址:http://www.ithanmang.com/threejshome/resetCamera.html主要代码// 键盘监听方法function o...原创 2018-07-02 13:16:01 · 5973 阅读 · 2 评论 -
Three.js - 通过 THREE.Raycaster 实现模型选中与信息显示
示例浏览地址:http://www.ithanmang.com/threejshome/raycasterDemo.html 双击鼠标左键选中模型并显示信息。首先,解释一下三种坐标系的概念:场景坐标系(世界坐标系)、屏幕坐标系、视点坐标系。 场景坐标 通过three.js构建出来的场景,都具有一个固定不变的坐标系(无论相机的位置在哪),并且放置的任何物体都要以这个坐标系来确定自己的位置...原创 2018-07-03 15:40:51 · 35201 阅读 · 55 评论 -
Three.js - 使用 THREE.DragControls 实现模型拖拽
需求:鼠标略过模型出现三维坐标轴,通过点击三维坐标轴,在 x、y、z 轴上移动,并且通过点中模型任意拖拽模型。 本质上,使用鼠标拖动三维模型,就是把鼠标的拖动距离,转化为三维模型的位置或角度变化量,使用three、js的拖拽控件·DragControls.js·就可以很容容易实现。 示例浏览地址: http://www.ithanmang.com/threejshome/dragContro...原创 2018-07-03 18:03:10 · 22745 阅读 · 43 评论 -
Three.js - 使用 ShapeGeometry 创建二维字体模型
效果图构造函数ShapeGeometry(shapes, curveSegments)shapes – shapes数组或者是单一的shape curveSegments – [可选的] 形状的分段数,默认值是 12 其父类是Geometry示例创建一个心的形状var x = 0, y = 0;var heartShape = new THREE.Shape...原创 2018-07-03 22:37:37 · 3356 阅读 · 4 评论 -
Three.js - Group 组合对象
在解析外部模型例如 obj模型的时候我们经常会发现、匿名函数中的加载解析后的参数object是一个Group,或者当前我们加载外部模型obj为例,然后通过Raycaster射线拾取数组的时候对象,当传递进去是scene.children发现并不会选中模型,但我们自己创建一些简单的模型会被选中。 这是因为,加载的外部模型会是在一个Group组对象中,如果直接scene.children是无法获取的...原创 2018-07-09 09:48:39 · 6954 阅读 · 9 评论 -
Three.js - SceneUtils 工具类
THREE.SceneUtils是Scene对象的工具类,用于对场景中的对象进行操作。 使用时需要引入js库文件examples\js\utils\SceneUtils.js方法1 .createMultiMaterialObject()方法名.createMultiMaterialObject ( geometry : Geometry, materials : Array )...原创 2018-07-10 16:17:49 · 3007 阅读 · 1 评论 -
Three.js - THREE.Color 对象
Color颜色对象,有以下多种初始化方法。//空的构造函数 -- 默认为白色var color = new THREE.Color();//十六进制颜色 (推荐使用)var color = new THREE.Color( 0xff0000 );//RGB 字符串var color = new THREE.Color("rgb(255, 0, 0)");var color ...原创 2018-07-10 16:42:26 · 5350 阅读 · 0 评论 -
Three.js - AmbientLight 光源
简介THREE.AmbientLight()环境光源,一般不会单独使用,需要配合其他光源类似使用。 环境光会照亮场景中的所有物体,不能用来投射阴影,因为环境光是没有方向的。 不需要指定位置。构造函数/** * @author mrdoob / http://mrdoob.com/ */function AmbientLight( color, intensity ) {...原创 2018-07-10 17:00:31 · 1721 阅读 · 0 评论 -
Three.js - PointLight 光源
PointLight 点光源,照射所有方向的光源,例如灯泡发出的光,可以投射阴影。 示例浏览地址:http://ithanmang.com/threejshome/pointLight.html构造函数PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )参数co...原创 2018-07-11 12:30:14 · 4754 阅读 · 0 评论 -
Three.js - tween.js 补间动画
Tween.js 是一个小型的JavaScript库。原创 2018-07-18 15:58:23 · 3113 阅读 · 1 评论 -
Three.js - three.js加载资源的异步操作
js中的回调函数一般都是异步操作的,同样three.js中像加载模型数据,和一些其它的资源文件的加载也是通过回调函数的方式来获取的,所以它们也是异步的。在此之前,我还不知道怎么把那些回调函数改成同步操作。 因为,做的一个项目要加载json字体文件,所以需要在外部使用字体的配置,并且只加载一次字体文件,而不是调用一次就加载一次,所以,就遇到了这个回调函数异步操作的问题。 例如我们使用FontLo...原创 2018-07-30 09:48:57 · 5295 阅读 · 1 评论 -
Three.js - DirectionalLight 光源
DirectionalLight可以看做是模拟太阳发出的光源,这个光源所发出的光都是相互平行的。 平行光不像是SpotLight以及PointLight那样距离物体越远,光的强度就不一样,而DirectionalLight所散发出来的光,所照射的整个区域范围内光强是一样。 示例浏览地址:http://ithanmang.com/threeJs/home/DirectionalLight.htm...原创 2018-07-31 15:16:04 · 4819 阅读 · 0 评论 -
Three.js - SpotLight 光源
SpotLight光源是聚光灯光源,类似手电筒,会形成一种锥形效果的光,可以产生阴影,比较常用。 示例浏览地址:http://ithanmang.com/threeJs/home/02-spotlight.html构造函数SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, pe...原创 2018-08-01 10:56:12 · 4277 阅读 · 0 评论 -
Three.js - HemisphereLight 光源
HemisphereLight是半球光源,使用半球光光源可以创建出更加贴近自然的效果,并不是所有的光源都来自上方,更多的是来自外部的反射,例如天空的反射,地面的反射,以及其他物体的反射。 示例浏览地址:http://ithanmang.com/threeJs/home/01-hemisphereLight.html构造函数HemisphereLight( skyColor : Integ...原创 2018-08-01 15:14:09 · 2580 阅读 · 0 评论 -
Three.js - RectAreaLight 光源
RectAreaLight是矩形面光源,光源类似一个平面,整个面会均匀的发光,这种光源可以用来模拟明亮的窗户,和发光的条状照明灯。1、示例:使用矩形面光源,需要注意以下事项RectAreaLight光源不支持阴影效果。仅仅MeshStandardMaterial和MeshPhysicalMaterial会被支持。必须包含RectAreaLightUniformsLibjs 库...原创 2018-08-02 10:38:15 · 1194 阅读 · 0 评论 -
Three.js - 镜头炫光 Lensflare
three.js 中有很多光源,但是对于想要模拟类似,看向太阳时出现的那种光晕效果,需要使用镜头炫光 Lensflare 准确来说它不属于光源的分类,因为它继承自Mesh对象。 创建镜头炫光效果,需要库文件Lensflare.js的支持,它在目录examples/js/objects/下存放着。 示例:http://ithanmang.com/threeJs/home/01-lensflare...原创 2018-08-02 14:18:06 · 2905 阅读 · 0 评论 -
Three.js - MeshBasicMaterial 材质
MeshBasicMaterial是一种非常简单的材质,继承自Material,这种材质不受光线的影响,可以显示模型的线框,对场景中的雾化会有反应。 通过操作示例可以对这种材质有一定的了解 示例:MeshBasicMaterial.html构造函数MeshBasicMaterial( parameters : Object )参数parameters:可选参数一般指定为...原创 2018-08-03 17:33:35 · 6514 阅读 · 0 评论 -
Three.js - MeshDepthMaterial 材质
MeshDepthMaterial 是一种基于深度着色的材质,这种材质的外观不是由光照或者某个材质决定,而是由物体到相机的远近距离决定,当物体离相机较近时会呈现白色,较远时会呈现黑色,所以可以创建出物体渐远消失的效果。 示例:MeshDepthMaterial.html 通过调节相机的远近距离就可以,看到小立方体的颜色由远到近的变化效果。示例代码<!DOCTYPE html&gt...原创 2018-08-06 11:15:57 · 1451 阅读 · 0 评论 -
Three.js - 使用 SceneUtils 工具类 联合材质
因为MeshDepthMaterial没有color属性,所以不能动态的改变材质外部的颜色,但是可以通过SceneUtils工具类的其中一个方法createMultiMaterialObject进行材质联合,来实现颜色的添加。 示例:combined-material.html three.js可以通过材质的联合,创建出新的效果,需要引入SceneUtils.js库文件,这个文件在目录exam...原创 2018-08-06 13:03:49 · 1940 阅读 · 0 评论 -
Three.js - MeshNormalMaterial 材质
MeshNormalMaterial是一种将法向量映射到 RGB 颜色的材质。 网格在每一个面上渲染的颜色都不一样,法向量是与面垂直的向量,由于一个物体各个面上的法向量都不同,所以每个面映射的颜色也不同。 示例:MeshNormalMaterial.html 示例中将flatShading设置为true为了更好看到每个面的颜色。 并且为每个面都添加了一个辅助箭头,可以清晰看到每个面的法向量...原创 2018-08-06 16:05:57 · 1514 阅读 · 0 评论 -
Three.js - 为每个面定制材质 MeshFaceMaterial
MeshFaceMaterial存在于旧版本中,并且这个对象不是一个材质,而是一个材质数组。新版本中被THREE.Mesh()所代替,因为Mesh的第二个参数material可以接受一个对象数组,所以就是可以实现为每个面定制材质。 示例:MeshFaceMaterial.html 每个面颜色都不同的魔方。首先,要创建一个材质数组,这里使用的是基础材质,每个材质的颜色不一样。 // 创建材...原创 2018-08-06 17:14:45 · 3535 阅读 · 0 评论 -
Three.js - MeshLambertMaterial 用于暗淡不光亮表面的材质
这种材质,可以创建看上去并不光亮(不具有光滑度)的表面,例如墙体等。该材质会对场景中的光源产生反应,并且该材质自身也会发出颜色,自身发出的颜色不受环境的影响。 示例:MeshLambertMaterial.html 基础材质中很多属性,它基本上都具有,不同的是,它具有一个自发光的属性emissive,可以设置自发光的颜色、强度、以及贴图属性。 它的color属性是漫反射的颜色,默认为白色。...原创 2018-08-07 10:02:48 · 4041 阅读 · 0 评论 -
Three.js - MeshPhongMaterial 用于光亮表面的材质
该材料使用非基于物理的Blinn-Phong模型来计算反射系数。与在MeshLambertMaterial中使用的Lambertian模型不同,它可以模拟带有高光的闪亮表面(如漆木)。 示例:MeshPhongMaterial.html属性 名称 描述 color 材料的颜色,默认为白色 emissive 材质本身发出的颜色,不受其它光照影响,默认为...原创 2018-08-07 10:43:07 · 8028 阅读 · 0 评论 -
Three.js - 线段几何体材质
线段几何体材质,分为LineBasicMaterial和LineDashedMaterial,线段上只有顶点没有面。LineBasicMaterial:通过线段基础材质,可以设置线段的颜色、宽度和连接点。 LineDashedMaterial:虚线材质的基本属性跟基础线段材质一样,但是可以指定短划线的和间距空格的长度。示例:01-LineMaterial.htmlLineBasi...原创 2018-08-08 11:41:24 · 995 阅读 · 0 评论 -
Three.js - PlaneGeometry 平面几何体
PlaneGeometry是二维平面几何体,看上去是扁平的,因为它只有两个维度,给定宽高,即可创建这种几何体。 示例:PlaneGeometry.html构造函数PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)参数width :沿着X轴...原创 2018-08-08 15:18:16 · 8604 阅读 · 5 评论 -
Three.js - CircleGeometry 圆形平面
CircleGeometry圆几何体 是欧几里得几何的一个简单形状。它是由一些三角形部分组成的,它们以中心点为中心,并延伸到一个给定的半径。它是逆时针的,从一个开始的角度和一个给定的中心角度。它还可以用来创建常规的多边形(五角星等),其中的段数决定了边的数量。 示例:CircleGeometry.html构造函数CircleGeometry(radius : Float, segme...原创 2018-08-08 16:01:01 · 8873 阅读 · 0 评论 -
Three.js - EdgesGeometry 几何体边框辅助线
EdgesGeometry在老版本中叫做EdgesHelper但是已经被移除。新版本赋予边框辅助参考线,更加灵活的使用方法,可以改变其材质以及其他属性,EdgesGeometry的作用是可以帮助查看几何体对象的边缘。 示例:EdgesGeometry.html构造函数EdgesGeometry( geometry : Geometry, thresholdAngle : Integer ...原创 2018-08-09 10:21:18 · 11627 阅读 · 4 评论 -
Three.js - 理解粒子
粒子:指一些细小的物体,通过three.js提供的APISprite(精灵),SpriteMaterial(精灵材质),通过贴图等可以创建出很多特效。 示例:http://ithanmang.com/threeJs/home/201808/20180815/01-sprite.html THREE.Sprite继承自Object3D对象,因此THREE.Mesh的大部分属性都可以使用在THRE...原创 2018-08-15 11:27:22 · 911 阅读 · 0 评论