PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

1.0.2

npm

3d-rotater-y

Resolve like 3D badge rotation controls.

3dbadgecontrolthreejs
Published26 Jul 2022
Direct dependencies0
Transitive dependenciesNot calculated

README

Current package documentation

针对 3D 徽章的预览提供简单的控制能力：通过手指或鼠标控制徽章旋转角度、松手后自动保持水平位置。

Install

$ npm i 3d-rotater-y --save

3d-rotater-y

Features

  • 🚀 动画更新基于requestAnimationFrame
  • 🧭 仅支持 Y 轴方向旋转控制；
  • 🪆 需要附带“根据不同范围内的旋转角度，能够自动过渡到水平位置”的惯性/重力感旋转效果；(从平面视角来看，需要达到[0,90)，松手后回到 0 弧度位置；(90,180]，松手后回到 PI 弧度位置的旋转过度效果）
  • 👬 同时支持 PC 和移动端；
  • 从指定角度开始归零的旋转过渡动画；
  • 支持初始化时制定任意展示角度；
  • 点击/双击回到初始角度；

Usage

basic

import rotateCtrl from "3d-rotater-y";

/**
* RotateControl(targetDom, targetRadius);
* targetDom 需要控制的元素
* targetRadius 目标元素的半径（宽度的一半，影响手指或鼠标滑动元素时的敏感度），默认200px

  returns {
    rad:Number, //弧度值
    onTouch:Boolean, //是否正在操作被控目标
}
*/

let targetDom = document.querySelector("#badge_stage");
let rotateCtrl = new RotateControl(targetDom);
let isTouching = false;
// 添加监听事件，目前只有一个`update`事件可供监听，并在回调内更新「徽章badgeMesh.rotation.y」
rotateCtrl.on(
  "update",
  ({ rad, onTouch, positiveRad, speed, startRad, endRad }) => {
    isTouching = onTouch;
    badgeMesh && (badgeMesh.rotation.y = rad);
  }
);

// 开始监听旋转控制返回的数据
rotateCtrl.listen();

Advance

/**
* rotateCtrl.reset(duration, resetRad);
* duration 过渡时间ms，默认500
* resetRad 制定重置的角度，默认0
*/

// 比如想在1000ms里，从PI开始重置到0，可以这么用！
rotateCtrl.reset(0, PI);
rotateCtrl.reset(1000, 0);

Todos

  • 模拟 Apple Watch 徽章松手后的**摆动->停止**的过渡效果
  • 完成freezePage函数：手指/鼠标控制目标元素转动时，禁止页面 scrollY
  • 删除playAmt函数：第一个版本，能够实现小摆动，但是停住的时机不够精准；

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 0

Native requirements
0 direct targetsNot calculated transitive count
No declared dependencies in this collected response

Declarations describe requirements; they are not a resolved dependency graph.

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-89vmu5R8ZZ0dAP0X1wdx8k+Xb3RWpNrQvnsJj2ZBXFOBAJQl6gqULfNb/FB18s1Up97Ujg1sC9OePPAxMzJ55g==",
  "shasum": "ba16f79b59cfd7e3dcae49527fe1f51c44894d8a",
  "tarball": "https://registry.npmjs.org/3d-rotater-y/-/3d-rotater-y-1.0.2.tgz",
  "fileCount": 3,
  "unpackedSize": 12207,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEUCIQCe6otnXe1kSgyex57eqScdr4mwXGFoT1S4hp1beA92swIgdBEkJF+etT/8CHo3qNUJ6oZF2Q4Zf9683ckS6cAowwU="
    }
  ],
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi30nRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiMQ//Vamf1DiIHrFfS4QbCZaHIUsn796tX2wdyf3s/ML9pzMojSlC\r\nm9ih1TAxYEen0kCY0OlfDDBJ4JZB7rRV0jNpH4qZSM/1bj1zN/7gcHTocYnW\r\nkbU9miAaWJiOStV+ODqghQwvX+BD/JXEW5NVQJSyXaiLDU045dF60KuuLK0x\r\nKSotzhxj2aM+T6eKwFR0qNFjJx07RJWU4K9BKA1Qh1RvnNZcuHZUHOGryP0L\r\n1d2DIx5Y9FVmPrg+hSrLtV3cu7yn/QeWDoW4PX5DhZYee3tDc8iNEIiG3HKN\r\noUYneoBJopqmz6iGCHCMawbWiLx2RqWHUEEhFjr5LHoIMAzuYmhwnASUOFy7\r\n7gexAdWJKx4FcHczcc4OI6WBAMPl2KULqpWCRi57sgyXyCa1tegEr8lhd8wf\r\nLEbCXfdoBvnXI1TxXb096aktzMdmEU0Kg5Zm9qMeQCMiK/Bt9DOCwwkv4QpV\r\nlT6LnWOAhncgwryjiFrTf1BQMlcwDEDu4kuVhxerFSh0zF+ZBwYemMXhONTf\r\notdnw0+lYh2RnO1GiO/vZ7vT91/VM/DfxCJtDRL6NQl481cmTWkXdMLtExFx\r\nZV2kemkR2zRLjeO0Mxp+PnKuuHdzyE9m4/h/yqhfM4NogepAVvSP0BeHB8s1\r\nC1cSrTFuQm7cJhn2CuJBvWk8HOGKskfeDvY=\r\n=a9qF\r\n-----END PGP SIGNATURE-----\r\n"
}

Repository

PENDING
moveharder/3drotateycontrol

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:37 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:ce98936542eed9f3bfa01750abc536fa2d0eb95d7b7377c9ede74c19a9fe681e

Other collected versions

1.0.023 JulView all collected versions →