首页 > 其他分享> > three.js使用超炫酷的鼠标跟随案例

three.js使用超炫酷的鼠标跟随案例

2020-12-14 11:29:42 作者：互联网

three.js使用超炫酷的鼠标跟随案例

文章目录

three.js使用超炫酷的鼠标跟随案例
前言
一、效果展示
二、直接上代码
- 1.效果代码
- 2.注意点
总结

前言

three.js在浏览器中就能够简单和轻便渲染出3D场景.

一、效果展示

在这里插入图片描述

二、直接上代码

1.效果代码

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
  background: #111;
  min-width: 960px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = Math.max(960, innerWidth),
    height = Math.max(500, innerHeight);

var x1 = width / 2,
    y1 = height / 2,
    x0 = x1,
    y0 = y1,
    i = 0,
    r = 200,
    τ = 2 * Math.PI;

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", move);

var context = canvas.node().getContext("2d");
context.globalCompositeOperation = "lighter";
context.lineWidth = 2;

d3.timer(function() {
  context.clearRect(0, 0, width, height);

  var z = d3.hsl(++i % 360, 1, .5).rgb(),
      c = "rgba(" + z.r + "," + z.g + "," + z.b + ",",
      x = x0 += (x1 - x0) * .1,
      y = y0 += (y1 - y0) * .1;

  d3.select({}).transition()
      .duration(2000)
      .ease(Math.sqrt)
      .tween("circle", function() {
        return function(t) {
          context.strokeStyle = c + (1 - t) + ")";
          context.beginPath();
          context.arc(x, y, r * t, 0, τ);
          context.stroke();
        };
      });
});

function move() {
  var mouse = d3.mouse(this);
  x1 = mouse[0];
  y1 = mouse[1];
  d3.event.preventDefault();
}

</script>

2.注意点

需要引入d3文件

<script src="//d3js.org/d3.v3.min.js"></script>

总结

参考文章：

https://blog.csdn.net/qq_26822029/article/details/91353209

本篇文章的思路很好

标签：y1,var,three,js,width,context,超炫酷,height,d3
来源： https://blog.csdn.net/weixin_45439379/article/details/111152466