三维细丝方块效果

代码语言:html

所属分类:三维

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

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


</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script >
var start = new Date();
var end = new Date();
var elapsedTime, time;
setInterval(function endTime() {
  end = new Date();
  elapsedTime = end - start;
  //console.log(elapsedTime);
}, 1);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x345da2 });
var cube = new THREE.Mesh(geometry, material);

//scene.add(cube);



var lineMat = new THREE.LineBasicMaterial({
  color: 0x0000 });


var lineGeo = new THREE.Geometry();
lineGeo.verticesNeedUpdate = true;
if (window.innerWidth > 768) {
  for (var l = 0; l < 1000; l++) {

    lineGeo.vertices.push(
    new THREE.Vector3(Math.cos(start * l) * 3, Math.sin(end * l * 5) * 3, Math.cos(l * 7) * 3));

  }
  var line = new THREE.LineLoop(lineGeo, lineMat);
  camera.position.z = 8;
} else if (window.innerWidth <= 768) {
  camera.position.z = 10;
  for (var l = 0; l < 1000; l++) {

    lineGeo.vertices.push(
    new THREE.Vector3(Math.cos(start * l) * 3, Math.sin(end * l * 5) * 3, Math.cos(l * 7) * 3));

  }
  var line = new THREE.Line(lineGeo, lineMat);
}


scene.add(line);
var r = g = b = 0;
var posX, posY, posZ;

var count = 0;
var change = false;

var animate = funct.........完整代码请登录后点击上方下载按钮下载查看

网友评论0