2017年12月_暮志未晚NAN

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 50 Three.js让模型或者group居中，获取模型的最小大小

模型居中让模型居中的方法最简单了，直接给geometry调用center()方法就实现了，模型居中显示。 //让图形居中显示 geom.center();获取模型的最小大小获取模型最下的大小的原理就是获取x,y,z每个轴上面所有顶点的最大值和最小值，通过这些值进行计算，获取模型每个轴上面的大小。而three.js已经给我们准备了相关的属性进...

2017-12-28 13:47:07 17061 3

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

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/51.html解决方案如果写汉字发现出来的只是一堆？？？？的话，证明当前引入的字体不支持汉字。我们的解决方案就是引入可以支持汉字json文件。那么问题来了，这种json文件我们怎么获得？ - 我们可以使用ttf格式的文件进行转换即可，有一个地址，可以进行在线转换http://ger...

2017-12-27 00:39:28 4373 3

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

简介之前我们通过使用THREE.ExtrudeGeometry来拉伸二维图形生成三维图形。这次我们通过使用THREE.TextGeometry来实现字体的3d化。实现实现还是和别的几何体一样通过实例化THREE.TextGeometry来创建var geometry = new THREE.TextGeometry(text,options);第一个参数是需要显示的字...

2017-12-26 23:06:18 4097 1

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

简介使用THREE.ParametricGeometry可以根据传入的公式，计算出相应的几何体。这是一个很具有扩展性的几何体。简单实现var geometry = new THREE.ParametricGeometry(function, slices, stacks);通过上面的方法，就可以创建出一个THREE.ParametricGeometry的几何体。相关的参数为...

2017-12-26 00:10:17 7566 4

原创 js原生方法被覆盖，从新赋值原生方法

实现原理js的原生方法被覆盖掉以后，如果你还没让原生方法又从新指向一个新的变量名，那就gg了。所以，关键就是怎么再获取到原生的方法。实现的原理呢就是创建一个新的window对象，然后从新的window对象里面获取原生的方法，来重新赋值。使用iframe实现首先创建一个iframe对象，使用document.createElement方法创建var iframe = document.createEl

2017-12-22 18:15:21 1929 1

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

简介SVG是可缩放矢量图（Scalable Vector Graphics）。它基于XML的标准，用来在网页上创建二维矢量图。该标准是一个所有现代浏览器都支持的开房标准。我们可以使用Three.js的THREE.ExtrudeGeometry来将SVG格式的图形转换成三维图形。实现方式首先，将库文件引入到页面当中<script src="https://johns...

2017-12-20 23:40:49 5806 4

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

简介THREE.TubeGeometry可以沿着一条三维的样式曲线（THREE.CatmullRomCurve3对象）拉伸出一根管。最简单实现var tubeGeometry = new THREE.TubeGeometry(path,segments,radius,radiusSegments,closed);相关参数说明属性是否必需描述...

2017-12-20 00:03:11 4163 1

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

拉伸几何体是什么拉伸是指我们有一个二维图形，通过针对这个二维图形进行z轴拉伸，将它转换成三维图形。例如，如果我们拉伸THREE.CircleGeometry，就会得到一个类似圆柱体的图形；如果我们拉伸THREE.PlaneGeometry，就会得到一个立方体。下面我们介绍一下常用的THREE.ExtrudeGeometryTHREE.ExtrudeGeometry简介THREE.E...

2017-12-19 00:21:05 10452 6

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

简介THREE.LatheGeometry允许你从一条光滑的曲线创建图形。此曲线是由多个点定义，通常称作样条曲线。然后再绕y轴旋转，就生成了一组车床类型的几何体模型。简单实现首先，我们需要在平面上设置一个曲线的点，每个点都有x，y坐标，如图然后，我们使用这一组顶点的坐标去实例化一个THREE.LatheGeometry几何体。然后设置相关属性，即可生成一个模型案...

2017-12-13 22:52:30 2848 3

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

简介通过THREE.ConvexGeometry，我们可以围绕一组点创建一个凸包。所谓凸包就是包围这组点的最小图形。也就是所有的点都在当前模型的体内，而且当前图形还是实现的体积最小的一个模型。简单案例首先，你需要有一组顶点位置的数组。然后通过这组点就可以创建图片var convexGeometry = new THREE.ConvexGeometry(points);...

2017-12-12 23:19:26 2292 3

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

简介这种材质和THREE.LineBasicMaterial略有些不同，它不但可以给线段上色，还可以添加一种虚线的效果。额外属性名称描述 scale 线条中虚线部分的占比，缩放dashSize和gapSize。如果scale的值小于1，dashSize和gapSize就会增大；如果scale的值小于1，dashSize和gapSize就会减小 ...

2017-12-11 20:05:57 2273 2

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

简介THREE.LineBasicMaterial用于绘制线段的基础材质。相关属性名称描述 color 该属性设置材质的颜色，如果设置了vertexColors，这是属性将被忽略 linewidth 设置线的宽度，默认值为1.0 linecap 这个属性定义了线框模式下顶点间线段的端点如何显示。可选的值包括butt（平）、rou...

2017-12-07 22:59:12 8605 5

原创 38 Three.js高级材质THREE.ShaderMaterial

注意看这一篇文章最好有webgl基础的同学看，如果没有webgl原生基础，你会看得很懵逼。简介THREE.ShaderMaterial是Three.js库中最通用、最复杂的材质之一。通过它可以使用自己定制的着色器。直接在webgl环境中运行。着色器可以将Three.js中的JavaScript网格转换为屏幕上的像素。通过这些自定义的着色器，可以明确地指定对象如何渲染，以及如何覆盖或...

2017-12-06 22:36:06 8543 10

原创将图片文件转换为base64格式的代码工具案例

<!doctype html><html lang="cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2017-12-05 11:39:36 1866 1