Two.js实现带阴影的白球跟随鼠标移动动画效果代码-html代码-BFW代码库

Two.js实现带阴影的白球跟随鼠标移动动画效果代码

代码语言：html

所属分类：动画

代码描述：Two.js实现带阴影的白球跟随鼠标移动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






</head>

<body>


    <script type="module">
      import Two from 'https://cdn.skypack.dev/two.js@0.7.8';

var two = new Two({
  type: Two.Types.svg,
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

two.renderer.domElement.style.background = '#fcb215';
two.renderer.domElement.style.cursor = 'none';

var cx = two.width / 2;
var cy = two.height / 2;
var delta = new Two.Vector();
var mouse = new Two.Vector(cx, cy);
var drag = 0.33;
var radius = 50;

var shape = new Two.Circle(0, 0, radius, 32);

var shadow = new Two.Path(shape.vertices, true, true);
shadow.position.set(cx, cy);
shadow.noStroke().fill = 'rgba(0, 0, 0, 0.2)';
shadow.offset = new Two.Vector(- radius / 2, radius * 2);
shadow.scale = 1.2;

var ball = new Two.Path(shape.vertices, true, true);
ball.position.set(cx, cy);
ball.noStroke().fill = 'white';

for (var i = 0; i < ball.vertices.length; i++) {
  var v = ball.vertices[i];
  v.origin = v.clone();
}

two.add(shadow, ball);

window.addEventListener('mousemove', function(e) {
  mouse.x = e.clientX;
  mouse.y = e.clien.........完整代码请登录后点击上方下载按钮下载查看