![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
雁来过
这个作者很懒,什么都没留下…
展开
-
基于canvas实现钟表
原理说明1、通过arc方法实现钟表外环;2、通过line实现钟表时针,分针,秒针和刻度标志的绘制,基于save和restore方法旋转画布绘制不同角度的指针;3、通过font方法实现在画布上绘制文字,基于save和restore方法旋转绘制的文字,使文字正向显示。实例效果图如下绘制钟表圆形边框方法,centerX表示圆中心点x坐标,centerY表示圆中心店y坐标function d...原创 2019-10-24 21:59:42 · 973 阅读 · 0 评论 -
深入理解three.js中光源
前言:Three.js 是一个封装了 WebGL 接口的非常好的库,简化了 WebGL 很多细节,降低了学习成本,是当前前端开发者完成3D绘图的得力工具,那么今天我就给大家详细讲解下 Three.js 中各种光源的区别和引用场景。为了更加直观的展示不同光源的特性,我特意做了一个 demo 通过动画来区别不同类型光源的特性,demo 中会展示点光源,环境光源,平行光源,半球光源,聚光灯光源五中光...原创 2019-09-17 22:09:49 · 548 阅读 · 0 评论 -
深入理解three.js中平面光光源RectAreaLight
前言之前有深入讲解过Three.js中光源,在那篇文章的最后也说了由于平面光光源的特殊性,所以会单独拿出来讲解,这篇文章会详细的讲解平面光光源的特性和实际应用该如何使用。首先,平面光光源从一个矩形平面上均匀地发射光线,这种光源的主要应用场景是模拟明亮的窗户或者条状灯光光源,实际在开发家具建模项目中会有广泛应用。平面光光源的最大特点事不支持阴影,我们无法通过设置RectAreaLight.cas...原创 2019-09-18 22:52:30 · 1067 阅读 · 0 评论 -
深入理解Three.js中透视投影照相机PerspectiveCamera
在开始正式讲解透视摄像机前,我们先来理理three.js建模的流程。我们在开始创建一个模型的时候,首先需要创建我们模型需要的物体,这个物体可以是three.js中已经为我们封装好的,比如正方体,球体,平面等,当然我们也可以通过导入的方式导入模型文件。然后我们需要根据项目的需求为创建好的物体添加不同类型的材质,材质可以是纹理,颜色或者是贴图。物体和材质通过new Mesh()方法就会组合成一个网格mesh,这个时候我们会通过three.js提供的渲染方法将创建好的网格mesh渲染到场景scene中。这个时候你原创 2019-09-27 09:06:14 · 2535 阅读 · 0 评论 -
深入理解Three.js中线条Line,LinLoop,LineSegments
在可视化开发中,无论是2d(canvas)开发还是3d开发,线条的绘制应用都是比较普遍的。比如绘制城市之间的迁徙图,运行轨迹图等。本文主要讲解的是Three.js中三种线条Line,LineLoop,LineSegments之间的区别,每种线条的原理和对应参数的含义,以及如何选择使用场景等问题。Three.js中提供了两种线条材质,分别是LineBasicMaterial和LineDashedMaterial,本文中讲解到的示例都使用LineBasicMaterial材质,后续也会专门总结相关材质的文章为读原创 2019-09-27 09:35:56 · 5413 阅读 · 2 评论