Skip to content
Snippets Groups Projects
Select Git revision
  • 09119a160c03c5f5e8a67558ba39ad35366521e5
  • master default protected
2 results

three.js_lines.html

Blame
    • three.js_lines.html 2.73 KiB 
    <html>
<!--
three.js_lines.html
   Neil Gershenfeld 5/12/15
   three.js line-drawing test
-->
<head>
<style>
body {margin:0px;overflow:hidden;}
</style>
</head>
<body>
<div id="container"></div>
<script src="js/three.min.js"></script>
<script src="js/stats.min.js"></script>
<script>

var renderer,scene,camera,stats,lines,dx,dy

init()
animate()

function init() {
   var width = window.innerWidth
   var height = window.innerHeight
   var aspect = height/width
   if (aspect > 1)
      camera  = new THREE.OrthographicCamera(-1,1,-aspect,aspect,0,2)
   else
      camera  = new THREE.OrthographicCamera(-1/aspect,1/aspect,-1,1,0,2)
   camera.position.z = 1
   scene = new THREE.Scene()
   root = new THREE.Object3D()
   var linegeom = new THREE.Geometry()
   var nlines = 1000
   dx = []
   dy = []
   for (var i = 0; i < nlines; ++i) {
      linegeom.vertices.push(
         new THREE.Vector3(2*Math.random()-1,2*Math.random()-1,0),
         new THREE.Vector3(2*Math.random()-1,2*Math.random()-1,0)
         )
      dx.push(0.02*(Math.random()-.5))
      dx.push(0.02*(Math.random()-.5))
      dy.push(0.02*(Math.random()-.5))
      dy.push(0.02*(Math.random()-.5))
      }
   lines = new THREE.Line(linegeom,
      new THREE.LineBasicMaterial({color:0x000000,linewidth:2}),
      THREE.LinePieces)
   scene.add(lines)
   renderer = new THREE.WebGLRenderer({antialias:true})
   renderer.setClearColor(0xffffff,1)
   renderer.setSize(width,height)
   var container = document.getElementById('container')
   container.appendChild(renderer.domElement)
   stats = new Stats()
   stats.domElement.style.position = 'absolute'
   stats.domElement.style.top = '0px'
   container.appendChild(stats.domElement)
   window.addEventListener('resize',resize,false)
   }
function resize() {
   aspect = window.innerHeight/window.innerWidth
   if (aspect > 1) {
      camera.left = -1
      camera.right = 1
      camera.bottom = -aspect
      camera.top = aspect
      }
       else {
      camera.left = -1/aspect
      camera.right = 1/aspect
      camera.bottom = -1
      camera.top = 1
      }
   camera.updateProjectionMatrix()
   renderer.setSize(window.innerWidth,window.innerHeight)
   }
function animate() {
   render()
   stats.update()
   requestAnimationFrame(animate)
   }
function render() {
   for (var i = 0; i < (lines.geometry.vertices.length); ++i) {
      lines.geometry.vertices[i].x += dx[i]
      if ((lines.geometry.vertices[i].x < -1)
       || (lines.geometry.vertices[i].x > 1))
         dx[i] = -dx[i]
      lines.geometry.vertices[i].y += dy[i]
      if ((lines.geometry.vertices[i].y < -1)
       || (lines.geometry.vertices[i].y > 1))
         dy[i] = -dy[i]
		}
   lines.geometry.verticesNeedUpdate = true
   renderer.render(scene,camera)
   }
   
</script>
</body>
</html>