ProcessGoldXR/vis.html at master · JorimTheuns/ProcessGoldXR · 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
<head>

    <meta charset="UTF-8">
    <title>Process Graph</title>

    <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>

    <script src="https://d3js.org/d3.v4.min.js"></script>

    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
    <script src="js/aframe-event-set-component.js"></script>

    <script src="js/aframe-meshline-component.js"></script>
    <script src="js/a-jline.js"></script>
    <script src="js/utility-components.js"></script>
    <script src="js/traces-component.js"></script>

    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
    <script src="https://unpkg.com/super-hands@3.0.0/dist/super-hands.min.js"></script>

    <script src="https://unpkg.com/aframe-look-at-component"></script>
    <script src="https://unpkg.com/aframe-forcegraph-component/dist/aframe-forcegraph-component.min.js"></script>

    <!---<script src="aframe-animation-component.js"></script>--->
    <script src="js/graph-depth-component.js"></script>

</head>

<body>
        <a-scene class="ascene" background="#eee" style="margin: auto" fog="type: exponential; color: #000; density:0.06" renderer="antialias: auto" vr-mode-ui="enabled: true">
            <!--<a-scene debug="true">-->
            <a-assets>
                <a-mixin id="pointer" raycaster="showLine: true; objects: .node, a-link" super-hands="colliderEvent: raycaster-intersection;
                               colliderEventProperty: els;
                               colliderEndEvent:raycaster-intersection-cleared;
                               colliderEndEventProperty: clearedEls;">
                </a-mixin>
                <a-mixin id="controller-right" mixin="pointer" vive-controls="hand: right" oculus-touch-controls="hand: right" windows-motion-controls="hand: right" gearvr-controls daydream-controls="hand: right; buttonColor: #E0E7F2; buttonTouchedColor: #176ab7; buttonHighlightColor: #db8a00" oculus-go-controls>
                </a-mixin>
                <a-mixin id="controller-left" mixin="pointer" vive-controls="hand: left" oculus-touch-controls="hand: left" windows-motion-controls="hand: left">
                </a-mixin>

                <a-mixin id="graph-parent" graph-depth="1" position="0 1.6 0"></a-mixin>

                <a-mixin id="node-parent" look-at="#view-point"></a-mixin>

                <a-mixin id="dynamic-plane" geometry="primitive: plane; width: 0.5; height: 0.15" hoverable selectable clickable material="color:#ddd; side:double; shader:flat" text="value: default; font: fonts/nexa-book-msdf.json; negate: false; color: white; align: center" event-set__hoveron="_event: hover-start;" event-set__hoveroff="_event: hover-end;" event-set__grabon="_event: grab-start; material.opacity: 0.7; transparent: true" event-set__graboff="_event: grab-end; material.opacity: 1; transparent: false"></a-mixin>

                <a-mixin id="node-element" mixin="dynamic-plane"
                         animation__selectpos="startEvents: grab-start; property: position; dir: alternate; dur: 500; loop: false; easing: easeInOutQuad; from: 0 0 0; to: 0 0 0.1" animation__deselectpos="startEvents: grab-end; property: position; dir: alternate; dur: 500;loop: false; easing: easeInOutQuad; from: 0 0 0.1; to: 0 0 0" animation__selectscale="startEvents: grab-start; property: scale; dir: alternate; dur: 500; loop: false; easing: easeInOutQuad; from: 0 0 0; to: 0 0 0.1" animation__deselectscale="startEvents: grab-end; property: scale; dir: alternate; dur: 500;loop: false; easing: easeInOutQuad; from: 0 0 0.1; to: 0 0 0" animation__selectheight="startEvents: grab-start; property: geometry.height; dir: alternate; dur: 500; loop: false; easing: easeInOutQuad; from: 0.09; to: 0.27" animation__deselectheight="startEvents: grab-end; property: geometry.height; dir: alternate; dur: 200; loop: false; easing: easeInOutQuad; from: 0.27; to: 0.09">
                </a-mixin>

                <a-mixin id="trace-parent"></a-mixin>


            </a-assets>

            <a-entity environment="dressingColor: #db8a00; dressingAmount: 0; grid: none; groundColor: #90999b; skyColor:#176ab7; horizonColor: #E0E7F2; groundColor2: #a1abad; groundTexture: walkernoise" 6dof-only></a-entity>

            <a-entity position="0 0 0" rotation="-90 0 0 " text="value: Look Up!; font: fonts/nexa-book-msdf.json; negate: false; color: black; align: center" width="5" desktop-only></a-entity>

            <a-entity position="0 3 0" rotation="90 0 0 " text="value: Look Down!; font: fonts/nexa-book-msdf.json; negate: false; color: black; align: center" width="5" desktop-only></a-entity>

            <a-entity position="1.5 1.6 0" rotation="0 -90 0 " text="value: Look Left!; font: fonts/nexa-book-msdf.json; negate: false; color: black; align: center" width="5" desktop-only></a-entity>

            <a-entity position="-1.5 1.6 0" rotation="0 90 0 " text="value: Look Right!; font: fonts/nexa-book-msdf.json; negate: false; color: black; align: center" width="5" desktop-only></a-entity>

            <a-entity position="0 1.6 1.5" rotation="0 180 0 " text="value: Behind You!; font: fonts/nexa-book-msdf.json; negate: false; color: black; align: center" width="5" desktop-only></a-entity>

            <a-entity id="view-point" position="0 1.6 0"></a-entity>

            <a-entity>
                <a-camera wasd-controls="fly: false" look-controls="pointerLockEnabled: false;">
                    <a-entity id="point-light" class="light" light="type: point; intensity: 0.5"></a-entity>
                    <a-cursor id="cursor" mixin="pointer" desktop-only></a-cursor>
                </a-camera>
                <a-entity id="rhand" mixin="controller-right" 6dof-only></a-entity>
            </a-entity>
        </a-scene>
    <script src="js/alt_d3.js"></script>
</body>