【three.js 郭先生制作太阳系】的更多相关文章

three.js 郭先生制作太阳系

今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击博客原文(加载时间比较长,请稍等一下).话不多说先看效果图. 图片有点多,先放三张,相比于上一个版本,这个版本制作更加细致,动画更加流畅.那么下面分析一下主要代码. 1. 先介绍一下变量 这里查了一些资料radiuses.distances.pub_rotation.self_rotation.pitchs分别为八大行星半径比.到太阳的距离比.公转比.自转比.自转轴倾角比. radiuse…

js傻瓜式制作电子时钟

js傻瓜式制作电子时间 使用到的知识点 setInterval函数 构建函数new Date if判断 demo: //css样式请自行设置 <span id="timer"><span> <script> var timer = document.getElementById("timer"); //获取标签 setInterval ( function(){ //setInterval按照指定周期调用函数 var today…

three.js cannon.js物理引擎制作一个保龄球游戏

关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能点,就是已经学过的cannon.js物理引擎知识.three.js车削几何体.threeBSP和简单的shaderMaterial.下面我们来详细的说一说如何制作这个游戏. 1. 设计游戏 因为我们已经使用过一些物理引擎,所以第一步我们很容易想到要用three做地面网格和墙面网格并为他们生成尺寸相当…

D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有数据都是自己定义的假数据,大家参考一下制作方法即可. 首先定义柱形图的数据.绘图区域的宽高.和上下左右的边距: var width = 600; //SVG绘制区域的宽度 var height = 500; //SVG绘制区域的高度 //定义数据 var dataList = [50,43,120,…

Walkway.js – 用线条制作简约的 SVG 动画

Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, Walkway.js 仅适用于路径和线条元素. 效果演示     插件下载 如何使用: 根据提供的配置选项创建一个 Walkway 示例,如果想要开始动画效果,调用 draw 方法即可. // Create a new instance var svg = new Walkway(options);…

js笔记（制作一个简单的计数器）

首先编写静态页中的按钮: <input  id="result" type="button" value="该程序已经运行了0秒!"/><br>  <input type="button" value="开始" onclick="start()"/>  <input type="button" value="停止&q…

通过js代码来制作数据库增删改查插件

代码流程 1.订制表头:table_config 2.订制显示内容: table_config,data_list 3.加载框: 图片,position:fixed       4.-字符串格式化       5. 自定义规则 @       6.前端js整合:       7.自执行函数[让我们自定义函数名和其他函数不冲突]         8. jquery扩展[在函数内部可以执行程序]            - js,函数作为作用域,首先当前找,上层找 整体代码 /*自执行函数*/(fun…

利用js键盘事件制作会移动效果

会移动的方块 描述 按键盘上的方向键方块会移动,按住alt键和方向键进行大幅度移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>会移动的方块(按方向键或alt加方向键)</title> <style> * {margin: 0;padding: 0;} div {width: 200px;…

js颜色选择器 制作分析

给html元素设置事件监听, 触发事件 弹出颜色选择器 颜色选择器绘制 获取上次选择的颜色(当前颜色) 绘制渐变色板(canvas) (方法: 横轴渐变ff0000, ffff00, 00ff00, 00ffff, 0000ff, ff00ff, ff0000,覆盖纵轴渐变[渐变的是透明度,白色为hsv模式中的饱和度], 右边灰度调节底层纯色填充,上层黑色,透明度0-1渐变 ) 绘制坐标指针(当前颜色标识) 颜色选择器设置事件监听获取颜色 设置鼠标点击选取颜色,坐标指针同步 设置拖拽事件颜色预览…

使用JS的画布制作一个瞄准镜

<canvas width="600" height="500" id="myCanvas"></canvas> <script type="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //获取对应的CanvasRenderingContext2D…