这里有两种方式！
第一种是使用setInterval：

代码如下：

  let time = setInterval(function(){if(sun.sun.rotation >= TWO_PI - 0.0625){sun.sun.rotation = 0;}sun.sun.rotation += (TWO_PI - sun.sun.rotation) * 0.0625;}, 300);

运行截图如下：

第二种是使用two.bind('update', function(frameCount){})

代码如下：

  two.bind('update', function (frameCount){if(sun.sun.rotation >= TWO_PI - 0.0625){sun.sun.rotation = 0;console.log("Hello");}sun.sun.rotation += (TWO_PI - sun.sun.rotation) * 0.0625;}).play();

运行截图如下：

第2种方式效果比第1种方式要好。

项目代码draw.js

import {SunElement} from "JS/elements/sun";;import * as Two from "JS/two";
import * as $ from "JS/jquery";let two;
let mouse;
let isPressed = false;
let originalPositionX = 0;
let originalPositionY = 0;
let map = new Map();
let rect;
let TWO_PI = Math.PI * 2;
let sunArry;export function drawGraphic(){let elem = document.getElementById("draw-shapes");let params = {type: Two.Types['webgl'],fullscreen: true,autostart: true};two = new Two(params).appendTo(elem);mouse = new Two.ZUI(two.scene);mouse.addLimits(0.1, 10);let $stage = $(two.renderer.domElement);$stage.bind('mousewheel wheel', function(event){let e = event.originalEvent;e.stopPropagation();e.preventDefault();let dy = (e.wheelDeltaY || -e.deltaY) / 1000;mouse.zoomBy(dy, e.clientX, e.clientY);});$stage.bind('mouseup', function(event){isPressed = false;});$stage.bind('mouseout', function(event){isPressed = false;});$stage.bind('mousedown', function(event){isPressed = true;originalPositionX = event.clientX;originalPositionY = event.clientY;let x = event.clientX;let y = event.clientY;for(let value of map){let xOffset = value[0]._width / 2;let yOffset = value[0]._height / 2;let letX = ((value[0]._translation._x - xOffset) * (two.scene._matrix.elements[0]) + two.scene._matrix.elements[2]);let letY = ((value[0]._translation._y - yOffset) * (two.scene._matrix.elements[4]) + two.scene._matrix.elements[5]);let letWidth = value[0]._width * two.scene._matrix.elements[0];let letHeight = value[0]._height * two.scene._matrix.elements[4];if(x > letX &&y > letY &&x < letX + letWidth &&y < letY + letHeight){let r = Math.round(Math.random() * 255);let g = Math.round(Math.random() * 255);let b = Math.round(Math.random() * 255);let rgbStr = "rgb(" + r + "," + g + "," + b + ")";value[0].fill = rgbStr;break;}}});$stage.bind('mousemove', function(event){if(isPressed){let boolX = event.clientX - originalPositionX;let boolY = event.clientY - originalPositionY;// console.log(boolX + " " + boolY);mouse.graphicMove(boolX, boolY);originalPositionX = event.clientX;originalPositionY = event.clientY;}});createBtn(1001, 200, 200, 500, "red");createBtn(1002, 400, 400, 500, "green");createBtn(1003, 600, 600, 500, "blue");createBtn(1004, 800, 800, 500, "black");createBtn(1005, 1000, 1000, 500, "yellow");createBtn(1006, 400, 800, 500, "purple");let value = {two: two,x: 800,y: 200,len: 100};let sun = new SunElement(value);two.bind('update', function (frameCount){if(sun.sun.rotation >= TWO_PI - 0.0625){sun.sun.rotation = 0;console.log("Hello");}sun.sun.rotation += (TWO_PI - sun.sun.rotation) * 0.0625;}).play();// let time = setInterval(function(){////   if(sun.sun.rotation >= TWO_PI - 0.0625){////     sun.sun.rotation = 0;//   }//   sun.sun.rotation += (TWO_PI - sun.sun.rotation) * 0.0625;//// }, 300);}function createBtn(id, x, y, weight, color) {rect = two.makeRectangle(x, y, 200, 200);rect.noStroke();rect.fill = color;rect.myId = id;map.set(rect, weight);
}//计算当前屏幕圆心 对应的 图形坐标
function getScreenOriginal(){let original = {x: 0,y: 0};original.x = two.width / 2;original.y = two.height / 2;// console.log(two.scene._matrix.elements)//获取水平位移及垂直位移//将浏览器上界面坐标转换为two.js的场景坐标,也就是 cirX和cirY为当前界面中点的场景坐标let cirX = (original.x - two.scene._matrix.elements[2]) / two.scene._matrix.elements[0];let cirY = (original.y - two.scene._matrix.elements[5]) / two.scene._matrix.elements[4];console.log("当前圆心 cirX:" + cirX + "  cirY:" + cirY);original.x = cirX;original.y = cirY;return original;
}export function flyToPosition(x, y){//当前屏幕中点 对应的 场景坐标let dot = getScreenOriginal();// console.log(dot);let c = two.makeCircle(x, y, 10);c.fill = "red";let differenceValueX = (dot.x - x) * two.scene._matrix.elements[0];let differenceValueY = (dot.y - y) * two.scene._matrix.elements[4];console.log(two.scene._matrix.elements);console.log("差值："+ differenceValueX + "  " + differenceValueY);//飞到对应x,y坐标点，这个x, y将会变成新的屏幕中心点mouse.graphicMove(differenceValueX, differenceValueY);originalPositionX = differenceValueX;originalPositionY = differenceValueY;}

图中那个太阳相关代码：

;export class SunElement{constructor({two, x, y, len}){this.x = x;this.y = y;this.two = two;this.len = len;this.render();}render() {let color = "rgba(255, 128, 0, 0.66)";let sun = this.two.makeGroup();let radius = this.len;let gutter = this.len / 5;let core = this.two.makeCircle(this.x, this.y, radius);core.noStroke();core.fill = color;sun.core = core;let coronas = [];let corona_amount = 16;for(let i = 0; i < corona_amount; i++){let pct = (i + 1) / corona_amount;let theta = pct * Math.PI * 2;let x = (radius + gutter) * Math.cos(theta);let y = (radius + gutter) * Math.sin(theta);console.log("x:" + x + "  Math.cos(theta):" + Math.cos(theta) + "  theta:" + theta);let corona = this.makeTriangle(gutter);corona.noStroke();corona.fill = color;corona.translation.set(x, y);corona.rotation = Math.atan2(-y , -x) + Math.PI / 2;coronas.push(corona);}sun.add(coronas);this.sun = sun;sun.translation.set(this.x, this.y)return sun;}makeTriangle(size){let tri = this.two.makePath(-size / 2, 0, size / 2, 0, 0, size);return tri;}
}