Demo entry 1067514

XML3D

   

Submitted by anonymous on Jan 13, 2015 at 19:51
Language: HTML. Code size: 2.7 kB.

<!doctype html>
<html lang="en">
<head>
  <title>The XML3D Architecture</title>
  <script type="text/javascript" src="../../script/xml3d.js"></script>
</head>
<body>
<div id="overall">
  <div id="content">
    <h1>The XML3D Architecture</h1>


    <xml3d activeView="#defaultView" style="width: 600px; height: 400px;">
      <defs>
        <script id="customMaterial" type="text/javascript">
          function shade(env) {
            var shininess = env.shininess || 0.25;
            var kd = env.diffuseColor || new Vec3(0.8);
            var ks = env.specularColor || new Vec3(1);

            if (env.kd && env.kd.sample2D && env.texcoord) {
              kd = env.kd.sample2D(env.texcoord).rgb();
            }
            return new Shade().diffuse(kd, env.normal).phong(ks, env.normal, shininess);
          }
        </script>

        <lightshader id="ls_Spot" script="urn:xml3d:lightshader:point">
          <bool name="castShadow">true</bool>
          <float3 name="attenuation">1 0.0333 0</float3>
          <float3 name="intensity">1 1 1</float3>
        </lightshader>

        <material id="Material" script="urn:xml3d:shader:phong">
          <float3 name="diffuseColor">0.4 0.12 0.18</float3>
          <float3 name="specularColor">0.5 0.5 0.5</float3>
          <float name="shininess">0.2</float>
          <texture name="diffuseTexture">
            <img src="wood.jpg"/>
          </texture>
        </material>

        <data id="mesh_data" compute="tangent = xflow.computeTangent(index, position, normal, texcoord)">
          <data src="./geometry/teapot.blast"/>
        </data>

        <transform id="t_Suzanne" rotation="0 1 0 1.57" scale="2 1 2"></transform>

      </defs>

      <group style="material: url(#myMaterial); transform: url(#t_Suzanne);">
        <mesh type="triangles">
          <data src="#mesh_data"></data>
          <float3 name="diffuseColor">0.8 0.0 0.2</float3>
        </mesh>
        <group style="material: url(http://www.xml3d-materials.org/wood#maple);">
          <model src="./assets/workerA.blast" onmouseover="alert('You touched worker A!');">
            <assetdata name="animation_walk">
              <float name="key_frame">3.5</float>
            </assetdata>
          </model>
        </group>
      </group>
      <group style="transform: rotateX(90deg);">
        <light shader="#ls_Spot"></light>
      </group>
      <view id="defaultView"></view>
    </xml3d>
    <script type="text/javascript">
      // Keyframe animation with jQuery
      $("xml3d").on("framedrawn", function(e) {
         var key = computeKeyframe(e);
         $('*[name=key_frame]').text(key);
      });
    </script>
    <div class="description">

    </div>
  </div>
</div>
</body>
</html>

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).