三维尖刺旋转效果-html代码-BFW代码库

代码语言：html

所属分类：三维

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

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

<style>


body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Ovo', Arial;
  font-size: 16px;
}

#container_3d {
  width: 100%;
  height: 100%;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(162,145,134,1) 100%);
}

.credits {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, -50%);
  margin: 7.5px auto;
}

a {
  color: rgba(0, 0, 0, 0.0);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
}

a:link { 
  color: rgba(0, 0, 0, 0.0); 
}

.fade-in {
  animation: fadeIn 2s ease-out 4s forwards;
  -moz-animation: fadeIn 2s ease-out 4s forwards;
  -webkit-animation: fadeIn 2s ease-out 4s forwards;
}

@keyframes fadeIn {
  
    0% { color: rgba(0, 0, 0, 0.1); }
    100% { color: rgba(0, 0, 0, 0.85); }   
}

@-moz-keyframes fadeIn {
  
    0% { color: rgba(0, 0, 0, 0.1); }
    100% { color: rgba(0, 0, 0, 0.85); }   
}

@-webkit-keyframes fadeIn {
  
    0% { color: rgba(0, 0, 0, 0.1); }
    100% { color: rgba(0, 0, 0, 0.85); }   
}
</style>

</head>
<body translate="no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<canvas id="container_3d">
</canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>

<script src='http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script>
<script>
/*
These calm spikes are here to brighten your stressful day
*/

// Helper functions
const SphereCoordToCartesian = function (r, phi, theta) {

  let x = Math.cos(phi) * Math.sin(theta) * r;
  let y = Math.sin(phi) * Math.sin(theta) * r;
  let z = Math.cos(theta) * r;
  return new THREE.Vector3(x, y, z);

};

const UVSphere = function (radius, stacks, slices) {

  const geometry = new THREE.Geometry();
  let theta1, theta2, ph1, ph2;
  let vert1, vert2, vert3, vert4;
  let index = 0;

  for (let t = 0; t < stacks; t++) {

    theta1 = t / stacks * Math.PI;
    theta2 = (t + 1) / stacks * Math.PI;

    for (let p = 0; p < slices; p++) {
      ph1 = p / slices * 2 * Math.PI;
      ph2 = (p + 1) / slices * 2 * Math.PI;

      vert1 = SphereCoordToCartesian(radius, ph1, theta1);
      vert3 = SphereCoordToCartesian(radius, ph2, theta1);
      vert2 = SphereCoordToCartesian(radius, ph2, theta2);
      vert4 = SphereCoordToCartesian(radius, ph1, theta2);

      geometry.vertices.push(vert1, vert2, vert3, vert4);

      if (t == 0) {

        geometry.faces.push(new THREE.Face3(0 + index, 1 + index, 3 + index));
      } else
      if (t + 1 == stacks) {

        geometry.faces.push(new THREE.Face3(1 + index, 0 + index, 2 + index));
      } else
      {

        geometry.faces.push(new THREE.Face3(0 + index, 2 + index, 3 + index));
        geometry.faces.push(new THREE.Face3(2 + index, 1 + index, 3 + index));
      }

      index += 4;

    }

  }

  geometry.mergeVertices();
  geometry.normalize();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals(true);

  return geometry;

};

window.onload = () => {

  init();

};

const isMobile = /(Android|iPhone|iOS|iPod|iPad)/i.test(navigator.userAgent);

let renderer, container, scene, camera, cactus, cactus2;

let mouseX = 1;
let mouseY = 1;

function init() {

  container = document.getElementById("container_3d");
  scene = new THREE.Scene();
  createCamera();
  createLight();
  createCactus();
  createRenderer();
  createControls();

  const render = function () {

    update();
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    controls.update();

  };

  const update = function () {

    cactus.rotation.z += 0.005 * mouseX;
    cactus2.rotation.z += 0.0025 * mouseX;
    cactus2.rotation.y += 0.0005 * mouseY;

  };

  render();

  window.addEventListener("resize", onWindowResize);
  document.addEventListener("mousemove", onMouseMove, false);

}

function setGradient(geometry, colors, axis, reverse) {

  geometry.computeBoundingBox();

  const bbox = geometry.boundingBox;
  const size = new THREE.Vector3().subVectors(bbox.max, bbox.min);

  const vertexIndices = ['a', 'b', 'c'];
  let face,vertex,normalized = new THREE.Vector3(),
  normalizedAxis = 0;

  for (let c = 0; c < colors.length - 1; c++) {

    let colorDiff = colors[c + 1].stop - colors[c].stop;

    for (let i = 0; i < geometry.faces.length; i++) {
      face = geometry.faces[i];
      for (let v = 0; v < 3; v++) {
        vertex = geometry.vertices[face[vertexIndices[v]]];
        normalizedAxis = normalized.subVectors.........完整代码请登录后点击上方下载按钮下载查看