<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>