摘要: three.js几何体我们还没有说完,这一节我们说一说THREE.Geometry(),简单几何体都是继承了这个对象,使用它会相对麻烦一些,但是可操作性非常高,今天我们使用它制作一个自定义几何体-五角星,我们先开看一下效果。mode请移步至 郭志强的博客 Geometry对象有两个比较重要的属性1. 阅读全文
posted @ 2019-12-27 10:32 郭先生的博客 阅读(4355) 评论(0) 推荐(2) 编辑
摘要: 最近学了three.js,想拿来练练手,喜欢宇宙,于是亲手撸代码来完成这个,为了更真实,于是查了一些相关资料。1. 距离太阳由近及远分别是【水星,金星,地球,火星,木星,土星,天王星,海王星】2. 他们分别到太阳的距离为5791, 10820, 14960, 22794, 77833, 142940 阅读全文
posted @ 2019-12-21 17:08 郭先生的博客 阅读(2285) 评论(6) 推荐(2) 编辑
摘要: 今天说说three.js的几何体,常见的几何体今天就不说了,今天说一说如何画直线,圆弧线,以及高级几何体。 1. 画一条直线 画直线我们使用THREE.Geometry()对象。 //给空白几何体添加点信息,geometry会把这些点自动组合成线。 var material = new THREE. 阅读全文
posted @ 2019-12-18 23:32 郭先生的博客 阅读(1489) 评论(1) 推荐(1) 编辑
摘要: 这节我们浅谈一下THREE的材质。材质就是物体的皮肤,决定物体的表面。THREE的材质有很多种,他们有的和到相机的距离有关,有的和面的法向量角度有关,有的不受光照的影响,有的受到光照的影响会产生反射效果或者漫反射效果,也可以将多个材质合成一个。1. THREE.MeshBasicMaterial(基 阅读全文
posted @ 2019-12-02 15:21 郭先生的博客 阅读(1149) 评论(0) 推荐(0) 编辑
摘要: 上一节我们简单的说了一下THREE中必要的元素。今天我们深入探讨一下各种THREE的光源。 一 基础光源 基础光源有4种1.THREE.AmbientLight(环境光源)2.THREE.PointLight(点光源)3.THREE.SpotLight(聚光灯)4.THREE.Directional 阅读全文
posted @ 2019-11-28 16:10 郭先生的博客 阅读(1168) 评论(0) 推荐(1) 编辑
摘要: 上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们先看一下百度官方线路图。 就是这样的,今天我们就来完成它的大部分需求,以及地铁公司爸爸提出来的需求。 阅读全文
posted @ 2019-11-27 13:16 郭先生的博客 阅读(7106) 评论(27) 推荐(8) 编辑
摘要: 相信大多数选择前端的小伙伴都有一个设计师的梦,今天我来说一说three.js。three.js是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。学习了它之后,就可以在3D发挥你无穷的想象力和设计能力。虽说他是js,但是实际上是对WebGL的封装,对于 阅读全文
posted @ 2019-11-25 16:11 郭先生的博客 阅读(1036) 评论(0) 推荐(1) 编辑
摘要: 今天在群里遇到一张图 遂来玩一玩,先来上图!! 点击相应按钮,开关线路,此项目的重点是计算相应图形的位置,由于是个性化项目就没有封装布局。好了直接上代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$T 阅读全文
posted @ 2019-09-25 09:46 郭先生的博客 阅读(1016) 评论(0) 推荐(0) 编辑
摘要: 今天在d3.js官网上看到了一个烟花的DEMO,是canvas制作的,于是我想用d3.js来实现它,js代码只有几行。好了废话不多说,先上图。 1 js 类 因为烟花要有下落的效果,所以里面用到了一些简单的数学和物理知识来模拟重力, 2 css 代码 3 html 代码 是不是很简单 想预览或者下载 阅读全文
posted @ 2019-09-11 13:55 郭先生的博客 阅读(537) 评论(0) 推荐(0) 编辑
摘要: d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的。今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇。话不多说先上图片。 1. js snaker类 2. css 代码 3. html代码 有想预览或者下载demo的朋友请移步至个人博客 原文地址 http://www 阅读全文
posted @ 2019-09-10 11:04 郭先生的博客 阅读(478) 评论(0) 推荐(0) 编辑