dreem/threejs.html at master · promanik/dreem · GitHub

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
<head>
  <title>dr33m</title>
  <style type="text/css">
    body {
      background-color: white;
      font-family: 'Helvetica';
      font-size: 36px;
      margin: 0px;
      padding: 0px;
      font-size: 14px;
    }
    input {
      font-family: 'Helvetica';
      font-size: 14px;
      margin: 0px;
      padding: 0px;
      width: 100px;
    }
  </style>
  <script type="text/javascript" src="lib/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="lib/acorn.js"></script>
  <script type="text/javascript" src="lib/coffee-script.js"></script>
  <script type="text/javascript" src="layout.js"></script>
</head>
<body>
  <view>
    <audioplayer id="audio" url="music/03_Homage Sliders.mp3" fftsize="2048" fftsmoothing="0" playing="true">
      <handler name="onkeydown" args="key" reference="lz.keyboard">
        if (key.keyCode == 32) this.toggle();
      </handler>
    </audioplayer>

    <class name="threejsviz" extends="threejs">
      <attribute name="data" value="[]" type="expression"></attribute>
      <attribute name="objects" value="[]" type="expression"></attribute>
      <handler name="ondata" args="data">
        for (var i = 0; i < this.objects.length; i++) {
          this.applyData(this.objects[i], data[i]);
        }
      </handler>
      <method name="applyData" args="object, datum"></method>
      <method name="createObject" args="i"></method>
    </class>

    <threejsviz width="${lz.window.width}" height="${lz.window.height}" bgcolor="white" data="${audio.fft}"  scriptincludes="http://threejs.org/examples/js/controls/OrbitControls.js">
      <method name="initScene" args="scene">
        this.camera.position.x = -420;
        this.camera.position.z = 420;

        var controls = new THREE.OrbitControls(this.camera);

        var light = new THREE.DirectionalLight( 0xffffff, 2 );
        light.position.set( 1, 1, 1 ).normalize();
        scene.add( light );

        light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( -1, -1, -1 ).normalize();
        scene.add( light );

        scene.fog = new THREE.FogExp2( 0xffffff, 0.0002);
      </method>
      <method name="createObject" args="i">
        var geometry = new THREE.BoxGeometry( 20, 20, 20 );
        var material = new THREE.MeshPhongMaterial({ color: 0xff0000, transparent: true });
        var object = new THREE.Mesh(geometry, material);
        object.position.x = (i * 20) - 400;
        object.scale.y = 16;
        object.scale.z = 16;
        this.objects.push(object);
        this.scene.add(object);
        return object;
      </method>
      <method name="applyData" args="object, datum">
        var scale = (datum / 256) + .0000000001;
        object.scale.y = scale * 16;
        object.scale.z = scale * 16;
        object.material.opacity = scale;
      </method>
      <handler name="onloadprogress" args="progress" reference="audio">
        var target = progress * audio.fftsize * .5
        while (this.objects.length < target) {
          this.createObject(this.objects.length - 1);
        }
      </handler>
    </threejsviz>
  </view>
</body>
</html>