Demo entry 1067514



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

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

    <xml3d activeView="#defaultView" style="width: 600px; height: 400px;">
        <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);

        <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>

        <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"/>

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

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


      <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>
        <group style="material: url(;">
          <model src="./assets/workerA.blast" onmouseover="alert('You touched worker A!');">
            <assetdata name="animation_walk">
              <float name="key_frame">3.5</float>
      <group style="transform: rotateX(90deg);">
        <light shader="#ls_Spot"></light>
      <view id="defaultView"></view>
    <script type="text/javascript">
      // Keyframe animation with jQuery
      $("xml3d").on("framedrawn", function(e) {
         var key = computeKeyframe(e);
    <div class="description">


This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).