three三维方块小人跟随鼠标动画效果-html代码-BFW代码库

three三维方块小人跟随鼠标动画效果

代码语言：html

所属分类：三维

代码描述：three三维方块小人跟随鼠标动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  overflow: hidden;
  background: #57068c88;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  align-content: center;
}

/* Name Badge */
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#name-card-container {
  position: fixed;
  bottom: 0px;
  height: 38px;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
#name-card {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  font-family: Avenir;
  font-size: 14px;
  font-weight: 500;
  line-height: 38px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.2);
}
#name-card > div.dark-background {
  background: #1d1e22;
  padding: 0 10px 0 20px;
  height: 100%;
  color: #fff;
}
#name-card > div.light-background {
  background: #fff;
  padding: 0 20px 0 10px;
  height: 100%;
}
#name-card span.emoji {
  font-size: 18px;
}
#name-card a {
  text-decoration: none;
}
#name-card a:hover {
  text-decoration: underline;
}
#name-card a:visited {
  text-decoration: none;
}
#name-card div.dark-background a {
  color: #fff;
}
#name-card div.light-background a {
  color: #000;
}
</style>

</head>
<body translate="no">
<canvas id="artboard"></canvas>

<div id='name-card-container'>
<div id='name-card'>
<div class='dark-background'><span class='emoji'>👀</span><a href="https://bit.ly/creative_coding" target='_blank'>More pens</a> by <a href="https://bit.ly/codepen_yitliu" target='_blank'>@yitliu</a></div>
<div class='light-background'><span class='emoji'>🕊</span><a href="https://bit.ly/twitter_yitliu" target='_blank'>Twitter</a></div>
</div>
</div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script >
//colors
var col_primary = 0x57068c;

var scene = new THREE.Scene();
var h = window.innerHeight,
w = window.innerWidth;
var aspectRatio = w / h,
fieldOfView = 25,
nearPlane = 0.1,
farPlane = 1000;
var camera = new THREE.PerspectiveCamera(
fieldOfView,
aspectRatio,
nearPlane,
farPlane);

var re.........完整代码请登录后点击上方下载按钮下载查看