aframe/examples/showcase/post-processing/index.html at gh-pages · aframevr/aframe · 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
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Post Processing Bloom Effect</title>
    <meta name="description" content="Post Processing Bloom Effect • A-Frame" />
    <script type="importmap">
      {
        "imports": {
          "aframe": "../../../dist/aframe-master.module.min.js",
          "three": "https://cdn.jsdelivr.net/npm/super-three@0.173.5/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/super-three@0.173.5/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import AFRAME from 'aframe';
    </script>
    <script src="../../js/info-message.js" type="module"></script>
    <script src="./effect-controls.js" type="module"></script>
    <script src="./bloom.js" type="module"></script>
  </head>

  <body>
    <a-scene
      bloom="threshold: 1.0; strength: 0.3; radius: 1;"
      background="color: #000000"
      renderer="toneMapping: ACESFilmic;"
      info-message="htmlSrc: #messageText"
    >
      <a-assets>
        <!-- model by arturs.vitas https://skfb.ly/owUr9 -->
        <a-asset-item id="testbed" src="https://cdn.aframe.io/examples/post-processing/fancy-car.glb"></a-asset-item>
        <a-asset-item id="messageText" src="message.html"></a-asset-item>
      </a-assets>

      <a-entity id="rig" position="0 0 2">
        <a-entity id="camera" position="0 1.6 0" camera look-controls wasd-controls></a-entity>

        <a-entity id="lhand" effect-controls="hand: left;"> </a-entity>

        <a-entity id="rhand" effect-controls="hand: right;"> </a-entity>
      </a-entity>

      <a-entity
        id="base"
        geometry="primitive: cylinder; height: 0.1; radius: 1.93"
        position="0 0 -2"
        material="color: #201d1d"
        shadow
        animation="property: rotation; to: 0 360 0 ; loop: true; dur: 15000; easing: linear;"
      >
        <a-entity id="tooncar" gltf-model="#testbed" position="0 0.050 0" scale="2 2 2" shadow> </a-entity>

        <a-entity
          id="neon01"
          geometry="primitive: torus; radius: 1.92; radiusTubular: 0.02; segmentsRadial: 50; segmentsTubular: 40"
          material="color: #d100e0; emissive: #b300a4; emissiveIntensity: 9.34"
          rotation="90 0 0"
        >
        </a-entity>
      </a-entity>

      <a-entity id="ambient" light="type: ambient; intensity: 0.48; color: #ffffff"> </a-entity>

      <a-entity id="point01" light="color: #7cd2fe; intensity: 5; type: point;" position="0 3.51 -1"> </a-entity>
    </a-scene>
  </body>
</html>