-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathIncrementalLine.html
72 lines (55 loc) · 1.71 KB
/
IncrementalLine.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
<head>
<title>Incremental line</title>
<style>
body { margin:0 }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="IncrementalLine.js"></script>
<script>
var scene = new THREE.Scene();
//var renderer = new THREE.CanvasRenderer();
var renderer = new THREE.WebGLRenderer();
//renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var light = new THREE.PointLight( 0xffffff );
light.position.set( 500, -500, 500 );
scene.add( light );
scene.add( new THREE.AmbientLight( 0x404040 ) );
var camera = new THREE.PerspectiveCamera(75,
window.innerWidth/window.innerHeight,
1, 2000);
camera.up = new THREE.Vector3(0, 0, 1);
camera.position.x = 200;
camera.position.y = -400;
camera.position.z = 400;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var time = 0;
var colorLine = new IncrementalLine(10000, new THREE.LineBasicMaterial({vertexColors:THREE.VertexColors}));
scene.add(colorLine);
var monoLine = new IncrementalLine(10000, new THREE.LineBasicMaterial({color: 0x00ff00}));
scene.add(monoLine);
var z = 0;
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
colorLine.lineTo(100*Math.sin(time), 100*Math.cos(time), z);
monoLine.lineTo(100*Math.sin(time), 100*Math.cos(time), -z);
time += 0.1;
if (time > Math.PI*2) {
time = 0;
z += 10;
colorLine.color.g = z / 200;
colorLine.moveTo(0, 100, z);
}
};
render();
</script>
</body>
</html>