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.144.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.144.js"></script>
      <script >
!function () {
  "use strict";
  let e,t,n,o,i,a,r,d,s,E = 5,w = .05,l = 1,c = .92,u = "";
  function h(e, t, n, o, a, d = "") {
    i = new THREE.IcosahedronGeometry(t, o);
    let s = new THREE.Vector3(),E = s.clone();
    s.fromBufferAttribute(i.getAttribute("position"), 0), E.fromBufferAttribute(i.getAttribute("position"), 1);
    var w = s.distanceTo(E);
    d = "random" == d ? new THREE.Color(16777215 * Math.random()) : d ? new THREE.Color(d) : 16777215;
    let l = new THREE.Mesh(new THREE.TorusGeometry(w, n, 50, 50), new THREE.MeshStandardMaterial({
      color: d,
      metalness: .5,
      roughness: .3 }));

    l.castShadow = !0, l.receiveShadow = !0;
    let c = [];
    for (let e = 0; e < i.attributes.position.count; e++) {
      let t = new THREE.Vector3();
      t.fromBufferAttribute(i.getAttribute("position"), e), c.push([t.x, t.y, t.z]);
    }
    c = [...new Set(c.map(JSON.stringify))].map(JSON.parse);
    for (let t = 0; t < c.length; t++) {
      let n = new THREE.Vector3(c[t][0], c[t][1], c[t][2]);
      r = l.clone(), n.multiplyScalar(a), r.position.set(n.x, n.y, n.z), r.lookAt(0, 0, 0),
      e.add(r);
    }
  }
  function R() {
    e.aspect = window.innerWidth / window.innerHeight, e.updateProjectionMatrix(), n.setSi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0