Menu
写文章
  • Category
  • Laravel
  • Vue
  • webpack
  • javascript
  • php
  • About
  • nodejs
  • 工作常用
  • wdcp
  • selenium & pyqt
  • webgl
  • redis
  • crontab
  • python
  • html & css
  • three.js
  • mysql
  • D3.js

D3.js Links Shape 制作 整齐的树状图

垂直方向的 https://www.wangchunjian.top/d3/7_1.html 学习的是官方提供的demo 由于垂直的树状图不方便阅览文字,左右

D3.js

使用D3.js 制作 加载进度的 圆环

在线预览 https://www.wangchunjian.top/d3/6.html 调用方式很简单 设置 class 属性为arcD3,再设置

D3.js

使用D3 制作 圆环颜色变化动画

准备圆环图 数据 data.tsv 以tab 分割的数据 就是tsv,以逗号分割的数据 是 csv apples oranges 100

D3.js

使用D3.js 制作 Epicyclic Gearing 齿轮转动demo

https://www.wangchunjian.top/d3/1.html js 文件 function gear({teeth, radius, a

D3.js

three.js 中 tweenjs的使用

导入 tweenjs 库 import * as TWEEN from '@tweenjs/tween.js' 使用 tweenjs 的 动画 源码地址

three.js

xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

用web storm 运行react-native 工程时,出错:xcrun: error: unable to find utility "inst

About

chown: /usr/local: Operation not permitted问题解决

在MAC上安装homebrew事先博客进行安装,根据步骤进行下去,同样在brew update的时候出现报错:Error: /usr/local must be

About

HTML5 调用手机摄像头拍照_getUserMedia

safari Type error 尚未处理 通过浏览器调用摄像头失败:NotSupportedError Only secure origins are al

javascript

JS 检测网络带宽

1、方法一 第一种思路是 加载一张图片,通过的加载时长和图片的大小来计算出网络带宽 有了这个思路,我们可以参考如下代码(部分参考自 github 上的deblo

javascript

部门工资前三高的查询

SELECT Department.Name as Department,new.Name as Employee,Salary,new.rank FROM (

mysql
  • ‹
  • 1
  • 2
  • 3
  • 4
  • 5
  • ›

three.js 中 tweenjs的使用

wcj2020 发布于 three.js 更新日期: 2019-01-11 08:55:18

  1. 导入 tweenjs 库
import * as TWEEN from '@tweenjs/tween.js'
  1. 使用 tweenjs 的 动画 源码地址 https://github.com/tweenjs/tween.js/blob/master/src/Tween.js default
var option = { px: 0 }
new TWEEN.Tween(option)
        .to({
            px: 40 
        }, 1000)
        .onUpdate(function() {
            that.spriteDoorLeft.position.setX( (-86 - option.px) * that.initFactor )
            that.spriteDoorRight.position.setX( ( 166 - option.px) * that.initFactor )
        })
        .onComplete(function() {
            that.doorOpen = false
        })
        .delay(500)
        .easing(TWEEN.Easing.Elastic.InOut)
        .start();
  1. 最后一步 使 tweenjs 生效
animate = function () { 
     renderer.render( scene, cameraOrtho )   
     if (TWEEN.update()){
       that.isRunning = true
     } else {
       that.isRunning = false
     }
     requestAnimationFrame(animate)
  }
requestAnimationFrame(animate)

当有动画在运行时 TWEEN.update() 返回 true default

下面是使用 Vue threejs tweenjs 做的一个车子运动的页面效果 https://www.wangchunjian.top/rail/