随笔分类 -  three.js

上一页 1 2 3
three.js 制作属于自己的动态二维码
摘要：今天郭先生说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，在线案例点击博客原文。这是郭先生的微信二维码哦！ 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas 阅读全文
posted @ 2020-07-18 11:33 郭先生的博客 阅读(724) 评论(0) 推荐(1) 编辑
three.js 图形用户界面工具GUI
摘要：今天郭先生来说一说three.js的一个图形用户界面工具gui，如下图，在线案例点击博客原文 1. 引入GUI,构造函数 按照所需，引入的方式也不相同。 //通过script标签引入 <script src="../libs/dat.gui.js"></script> var gui = new d 阅读全文
posted @ 2020-07-17 09:20 郭先生的博客 阅读(8395) 评论(0) 推荐(0) 编辑
three.js 绘制3d地图
摘要：通过地图数据配合three可以做出非常酷炫的地图，在大数据展示中十分常见。 这篇郭先生就来说说使用three.js几何体制作3D地图。在线案例点击原文地址。 地图的数据是各个地图块的点数组，通过THREE.ExtrudeGeometry方法挤压出地图的版块，然后通过THREE.Line方法画出地图的 阅读全文
posted @ 2020-07-16 09:15 郭先生的博客 阅读(8616) 评论(2) 推荐(0) 编辑
three.js 材质
摘要：今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。 1. three.js材质基类 所有其他材质类型都继承了Material。 下面是一些属性： .alphaTest : Float设置运行alp 阅读全文
posted @ 2020-07-15 09:07 郭先生的博客 阅读(1664) 评论(0) 推荐(0) 编辑
three.js 曲线
摘要：上几篇说了three.js的曲线，这篇来郭先生来说说three.js曲线，在线案例点击郭先生的博客查看。 1. 了解three.js曲线 之前已经说了一些three.js的几何体，这篇说一说three.js曲线。曲线的种类主要分两种，二维曲线和三维曲线。下面整理了这些曲线 名称参数 ArcCurve 阅读全文
posted @ 2020-07-14 09:01 郭先生的博客 阅读(5127) 评论(0) 推荐(1) 编辑
three.js 几何体-组合网格
摘要：这一篇郭先生就说说ThreeBSP（组合网格）的使用，先上图，在线案例点击原文链接查看 组合网格允许我们使用二元操作函数操作网格，但是提前需要引入threeBSP.js,它提供了如下三个函数。 名称描述 intersect（相交） 使用该函数可以在两个几何体的交集上创建新的几何体。两个几何体相互交叠 阅读全文
posted @ 2020-07-13 08:57 郭先生的博客 阅读(1304) 评论(0) 推荐(0) 编辑
three.js 几何体（三）
摘要：上一篇介绍了几何体的构造体参数，这篇郭先生就接着上一篇说。 1. ExtrudeGeometry挤压几何体 挤压几何体允许我们从一条形状路径中，挤压出一个Geometry。ExtrudeGeometry有两个参数，第一个参数是一个图形，第二个参数是它的配置 var shape = new THREE 阅读全文
posted @ 2020-07-12 20:15 郭先生的博客 阅读(753) 评论(4) 推荐(0) 编辑
three.js 几何体（二）
摘要：上一篇简单的介绍了几何体的构造体参数，这一篇郭先生就更加详细的说一说（十分简单的几何体我就不说了）。 1. ShapeGeometry形状几何体 形状几何体方便我们从一个或多个路径形状中创建一个单面多边形几何体，和canvas一样都是二维图形。下面我们只做一颗心形。 var shape = new 阅读全文
posted @ 2020-07-11 10:29 郭先生的博客 阅读(1800) 评论(0) 推荐(0) 编辑
three.js 几何体（一）
摘要：我的个人博客3.x已经更新了，初学three.js的小伙伴可以关注一下哦，我将在我的博客记录平时的学习心得，并有很多小案例，这些小案例比较基础，也不会有官网的案例那么难懂，很合适初学者，博客地址郭先生的博客，记得是郭先生的博客哦。 那么本篇郭先生来说一说three.js几何体都有哪些？在线案例进入原 阅读全文
posted @ 2020-07-10 16:15 郭先生的博客 阅读(2028) 评论(0) 推荐(0) 编辑
初探three.js几何体-Geometry
摘要：three.js几何体我们还没有说完，这一节我们说一说THREE.Geometry(),简单几何体都是继承了这个对象，使用它会相对麻烦一些，但是可操作性非常高，今天我们使用它制作一个自定义几何体-五角星，我们先开看一下效果。mode请移步至 郭志强的博客 Geometry对象有两个比较重要的属性1. 阅读全文
posted @ 2019-12-27 10:32 郭先生的博客 阅读(4398) 评论(0) 推荐(2) 编辑
three.js 制作太阳系统
摘要：最近学了three.js，想拿来练练手，喜欢宇宙，于是亲手撸代码来完成这个，为了更真实，于是查了一些相关资料。1. 距离太阳由近及远分别是【水星，金星，地球，火星，木星，土星，天王星，海王星】2. 他们分别到太阳的距离为5791, 10820, 14960, 22794, 77833, 142940 阅读全文
posted @ 2019-12-21 17:08 郭先生的博客 阅读(2320) 评论(6) 推荐(2) 编辑
初探three.js几何体
摘要：今天说说three.js的几何体，常见的几何体今天就不说了，今天说一说如何画直线，圆弧线，以及高级几何体。 1. 画一条直线 画直线我们使用THREE.Geometry()对象。 //给空白几何体添加点信息，geometry会把这些点自动组合成线。 var material = new THREE. 阅读全文
posted @ 2019-12-18 23:32 郭先生的博客 阅读(1502) 评论(1) 推荐(1) 编辑
初探three.js材质
摘要：这节我们浅谈一下THREE的材质。材质就是物体的皮肤，决定物体的表面。THREE的材质有很多种，他们有的和到相机的距离有关，有的和面的法向量角度有关，有的不受光照的影响，有的受到光照的影响会产生反射效果或者漫反射效果，也可以将多个材质合成一个。1. THREE.MeshBasicMaterial(基 阅读全文
posted @ 2019-12-02 15:21 郭先生的博客 阅读(1164) 评论(0) 推荐(0) 编辑
初探three.js光源
摘要：上一节我们简单的说了一下THREE中必要的元素。今天我们深入探讨一下各种THREE的光源。 一 基础光源 基础光源有4种1.THREE.AmbientLight（环境光源）2.THREE.PointLight（点光源）3.THREE.SpotLight（聚光灯）4.THREE.Directional 阅读全文
posted @ 2019-11-28 16:10 郭先生的博客 阅读(1180) 评论(0) 推荐(1) 编辑
初探three.js
摘要：相信大多数选择前端的小伙伴都有一个设计师的梦，今天我来说一说three.js。three.js是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。学习了它之后，就可以在3D发挥你无穷的想象力和设计能力。虽说他是js，但是实际上是对WebGL的封装，对于 阅读全文
posted @ 2019-11-25 16:11 郭先生的博客 阅读(1038) 评论(0) 推荐(1) 编辑

上一页 1 2 3