three打造的3d旋转加载动画特效-html代码-BFW代码库

three打造的3d旋转加载动画特效

代码语言：html

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

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

<title>Loader animation</title>
<style>
      #loader canvas {
  width: 320px;
  height: 320px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #275EFE;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 24px;
  bottom: 24px;
}
body .dribbble img {
  display: block;
  width: 76px;
}

    </style>

</head>
<body translate="no">
<div id="loader">
<canvas></canvas>
</div>



<script src='http://repo.bfw.wiki/bfwrepo/js/jquery.17.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script>
<script>
      $(document).ready(function () {

  let $canvas = $('#loader canvas'),
  canvas = $canvas[0],
  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    context: canvas.getContext('webgl2'),
    antialias: true,
    alpha: true });


  renderer.setSize($canvas.width(), $canvas.height());
  renderer.setPixelRatio(window.devicePixelRatio || 1);

  let scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, $canvas.width() / $canvas.height(), 0.1.........完整代码请登录后点击上方下载按钮下载查看