three实现三维星星旋转动画效果代码

代码语言:html

所属分类:三维

代码描述:three实现三维星星旋转动画效果代码

代码标签: three 三维 星星 旋转 动画

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
}
canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}
</style>

 


</head>

<body >

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.145.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RGBELoader.145.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.145.js"></script>
      <script >
!function () {
  "use strict";
  let e,
  t,
  o,
  n,
  a,
  i,
  r,
  l,
  d,
  s,
  E,
  c = 5,
  m = 1,
  w = "",
  h = new THREE.Group(),
  p = new THREE.Group();
  function R() {
    e.aspect = window.innerWidth / window.innerHeight,
    e.updateProjectionMatrix(),
    o.setSize(window.innerWidth, window.innerHeight);
  }
  function H() {
    requestAnimationFrame(H),
    n.update(),
    h.rotation.x += 0.003,
    h.rotation.y -= 0.005,
    h.rotation.z -= 0.002,
    p.rotation.x -= 0.002,
    p.rotation.y -= 0.005,
    p.rotation.z += 0.001,
    o.render(t, e);
  }
  !function () {
    const u = document.createElement("div");
    document.body.appendChild(u),
    (t = new THREE.Scene()).background = 0,
    (o = new THREE.WebGLRenderer({
      antialias: !0 })).
    setPixelRatio(window.devicePixelRatio),
    o.setSize(window.innerWidth, window.innerHeight),
    o.outputEncoding = THREE.sRGBEncoding,
    o.shadowMap.enabled = !0,
    u.appendChild(o.domElement),
    new THREE.RGBELoader().load(
    "//repo.bfw.wiki/bfwrepo/threemodel/leadenhall_market_1k.hdr",
    function (e) {
      e.mapping = THREE.EquirectangularReflectionMapping,
      e.flipY = !1,
      t.environment = e;
    }),

    (e = new THREE.PerspectiveCamera(
    35,
    window.inn.........完整代码请登录后点击上方下载按钮下载查看

网友评论0