three实现无限循环的漩涡螺旋动画效果代码

代码语言:html

所属分类:动画

代码描述:three实现无限循环的漩涡螺旋动画效果代码

代码标签: three 无限 循环 漩涡 螺旋 动画

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

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

<head>
  <meta charset="UTF-8">
  

  
<style>
body {
	background-color: #000;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
</style>

  
  
  
</head>

<body translate="no">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.157.js"></script>
      <script >
const HALF_PI = Math.PI / 2;
const TAU = Math.PI * 2;
//
const FACES_PER_TURN = 64;
const THICKNESS = 4;
const TURNS = 10;
const RADIUS = 3;
const LENGTH = 10;
//
let camera, scene, renderer;
let geometry, material, mesh;
//
function init() {
  scene = new THREE.Scene();
  //
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 20;
  //
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true });

  //
  const light = new THREE.AmbientLight(0xFFFFFF, 3);
  scene.add(light);
  const h_light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
  scene.add(h_light);
  //
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);
  //
  geometry = new THREE.PlaneGeometry(TURNS * TAU, THICKNESS, TURNS * FACES_PER_TURN, FACES_PER_TURN);
  material = new TH.........完整代码请登录后点击上方下载按钮下载查看

网友评论0