3D绘制不规则线条动画效果-BFW代码库

3D绘制不规则线条动画效果

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - 3D Random Line Movement</title>
<style>
      body { 
  cursor: move;
  margin: 0;
  overflow: hidden;
}

.canvas {
  background: black;
  position: absolute;
  height: 100%;
  width: 100%;
}
    </style>


</head>
<body translate="no">
<div class="canvas" id="container"></div>

<script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script>
<script>
      // standard global variables
var container,v,floor,scene,camera,renderer,controls,stats,
clock = new THREE.Clock(),
mesh,
line,
count = 0,
theta = 0,
planeWidth = window.innerWidth,
planeHeight = window.innerHeight,
floorSize = planeWidth * 3,
VIEW_ANGLE = 45,
ASPECT = window.innerWidth / window.innerHeight,
NEAR = 0.1,
FAR = 20000,
radius = window.innerWidth / 4,
MAX_POINTS = 10000,
drawCount;

init();
animate();

/**
            * Helper function that returns a random number between the two supplied
            * numbers. 
            *
            *  @param min  :  Integer
            *  @param max  :  Integer
            */
function rando(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

/**
   * Helper function that returns a boolean. 
   * True if the client device is "mobile", false otherwise.
   */
function isMobile() {
  return window.innerWidth < 1024;
}

/**
   * Sets up the necessary items for initialization. This includes
   * the camera, renderer, scene, controls, etc. 
   */
function init() {
  // SCENE
  scene = new THREE.Scene();

  // CAMERA
  camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
  camera.position.set(0, 20, planeWidth / 4);
  camera.lookAt(scene.position);
  scene.add(ca.........完整代码请登录后点击上方下载按钮下载查看

3D绘制不规则线条动画效果

网友评论0