三维细丝方块效果
代码语言: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