three实现三维空间鼠标跟随风向标效果代码-html代码-BFW代码库

three实现三维空间鼠标跟随风向标效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维空间鼠标跟随风向标效果代码，三角指向鼠标移动的位置方向。

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body{
  overflow: hidden;
  margin: 0;
}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.144.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.144.js"></script>
</head>

<body  >

  
      <script  >


console.clear();

class SpriteExt extends THREE.Sprite {
  constructor(color, pointer, camera) {
    let v2 = new THREE.Vector2();
    let v3 = new THREE.Vector3();
    let m = new THREE.SpriteMaterial({ map: createArrow(color) });
    super(m);

    this.update = () => {

      v3.copy(this.position).project(camera);
      v3.x *= camera.aspect;
      v2.copy(pointer);
      v2.x *= camera.aspect;
      v2.sub(v3);

      this.material.map.rotation = v2.angle();
    };

    function createArrow(color) {
      console.log(color);
      let c = document.createElement("canvas");
      c.width = c.height = 128;
      let ctx = c.getContext("2d");
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(118, 64);
      ctx.lineTo(10, 30);
      ctx.lineTo(10, 98);
      ctx.fill();
      let ct = new THREE.CanvasTexture(c);
      ct.center.se.........完整代码请登录后点击上方下载按钮下载查看