three实现三维可调参数的极坐标动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维可调参数的极坐标动画效果代码，可通过dat.gui来调节参数实现不同的效果。

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

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

<head>

  <meta charset="UTF-8">
  

  
<style>
@import url("https://fonts.googleapis.com/css?family=Fauna+One|Playfair+Display&display=swap");
body {
  margin: 0;
  cursor: cell;
  color: #FFE225;
  background-color: #002931;
  font-family: "Playfair Display", serif;
}

p {
  color: #AEAEBD;
  font-family: "Fauna One", serif;
}

hr {
  width: 70%;
  border-color: #AEAEBD;
}

canvas {
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
}

.header {
  top: 50%;
  left: 50%;
  display: none;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s;
}
.header:hover {
  opacity: 0;
}

.footer {
  right: 1rem;
  bottom: 2rem;
  position: absolute;
}
.footer img {
  width: 2.5rem;
  transition: opacity 0.5s;
}
.footer img:hover {
  opacity: 0.5;
}
</style>




</head>

<body >
  <div class="container">
  <div class="row header">
    <div class="col p-4 text-center">
      <h1>Spherical Coords</h1>
      <p>ThreeJS Code inspiration</p>
      <hr/>
    </div>
  </div>
  <div class="row footer">
    <div class="col">
      <!--a(href='#', target='_blank') #-->
    </div>

  </div>
</div>
<canvas id="canvas"></canvas>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.108.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script>

//--

function main() {

  const canvas = document.querySelector('#canvas');
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(18);
  const s_group = new THREE.Group();
  //--
  const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.rotateSpeed = 0.8;
  controls.enableZoom = false;
  controls.enableDamping = true;
  controls.dampingFactor = .05;
  controls.update();

  camera.position.set(0, 5, -9.5);
  renderer.gammaOutput = true;
  renderer.gammaInput = true;
  //renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.toneMapping = THREE.Uncharted2ToneMapping;
  //--
  const amount = 320;
  //--
  scene.add(s_group);
  scene.fog = new THREE.Fog(0x00131B, 10, 12);
  //--
  const a_light = new THREE.HemisphereLight(0xFFFFFF, 0x28222F, 1);
  scene.add(a_light);

  const l_light = new THREE.PointLight(0x444758, 20, 10);
  //l_light.castShadow = true;
  scene.add(l_light);

  const p_light = new THREE.PointLight(0xFFFFFF, 0.5, 10);
  //p_light.castShadow = true;
  scene.add(p_light);

  //--

  var options = {
    object: {
      r: 1.1,
      p: 2,
      s: 0.6,
      q: 1,
      t: 2,
      d: 1 },

    status: {
      m: 'auto',
      c: false },

    setup: {
      s: function () {
        options.object.r = 1.0;
        options.object.p = 2;
        options.object.s = 0.5;
        options.object.q = 1.2;
        options.object.d = 1;
        options.object.t = 1.2;
      },
      e: function () {
        options.object.r = 1;
        options.object.p = 2 + Math.random() * 1;
        options.object.s = 0.2 + Math.random() * 0.5;
        options.object.q = Math.random() * 5;
        options.object.d = 1 + Math.random() * 5;
        options.object.t = Math.random() * 5;
      } } };



  const gui = new dat.GUI();{

    const f_set = gui.addFolder('Config');
    const f_mtn = gui.addFolder('Motion');
    const f_lgt = gui.addFolder('Light');

    f_set.add(options.setup, 's').name('Normal');
    f_set.add(options.setup, 'e').name('Random');
    f_set.add(scene.fog, 'near', 1, 10).name('Depth Near');
    f_set.add(scene.fog, 'far', 10, 20).name('Depth Far');
    f_set.add(options.status, 'c', false).name('Color');

    f_mtn.add(options.status, 'm', ['Auto', 'Mouse', 'Pause']).name('Rotation');
    f_mtn.add(options.object, 'r', 0, 2).name('Amplitude');
    f_mtn.add(options.obj.........完整代码请登录后点击上方下载按钮下载查看