javascript控制vrml场景:一个简单的三维动画

做了一个sun-earth-moon的动画.感觉效果不错.

没用vrml中的插值器.”vrml1.htm”中的javascript以setInterval()函数发出时钟信号,根据椭圆方程计算earth,moon的坐标后用setNodeEventIn()发送到wrl文件”vrml1.wrl”,用以设置earth和moon的translation域值.

计数变量i必须是全局变量.    

接口函数很简单,在VB 里也可以用.    

objectName.setNodeEventIn(String nodeName,String eventInName,String value);

javascript比想象的快多了。50帧/s也运行得很平稳。

这个动画需要安装bs Contact 6.2插件,然后在IE中观看.

/**********************************

vrml1.wrl:用matlab vr toolbox做的。

*********************************/

#VRML V2.0 utf8

#Created with V-Realm Builder v2.0
#Integrated Data Systems Inc.
#www.ids-net.com

DEF vp Viewpoint {
position 0 0 150
description "see"
}
DEF sun Transform{
translation 0 0 0
children Shape {
    appearance Appearance {
     material DEF Red_Plastic Material {
      ambientIntensity 0.1
      diffuseColor 1 0.0408163 0.0408163
      shininess 1
      specularColor 0.984314 0.984314 0.984314
     }

    }

    geometry DEF sunsph Sphere {
     radius 15
    }

}
}
DEF earth Transform {
translation 100.00 0 0
children Shape {
    appearance Appearance {
     material DEF orange_Plastic Material {
      ambientIntensity 0.1
      diffuseColor 0.9 0.55237 0.00733938
      specularColor 1 1 1
     }

    }

    geometry Sphere {
     radius 6
    }

}
}

DEF moon Transform {
translation 120.00 0 0
children Shape {
    appearance Appearance {
     material USE orange_Plastic
  

    }

    geometry Sphere {
     radius 2
    }

}
}

    DEF Axies Group {
children Transform {
    translation 0 0 0
    children [
        DEF xAxie Shape {
         appearance Appearance {
          material Material {
           diffuseColor 0 0 1
          }

         }

         geometry DEF lineX IndexedLineSet {
          coord DEF coord1 Coordinate {
           point [ -100 0 0,
               100 0 0,
               0 -100 0,
               0 100 0,
               0 0 -100,
               0 0 100 ]
          }

          coordIndex [ 0, 1, -1, 2, 3, -1, 4, 5,
              -1 ]
         }

        }

        DEF oPoint Shape {
         appearance Appearance {
          material Material {
           diffuseColor 1 0 0
          }

         }

         geometry Text {
          string "O"
          fontStyle DEF myFontStyle FontStyle {
           size 10
           style ""
          }

         }

        }

        Transform {
         translation 100 0 0
         children Shape {
          appearance Appearance {
           material Material {
            diffuseColor 1 1 0
           }

          }

          geometry Text {
           string "X"
           fontStyle USE myFontStyle
          }

         }
        }

        Transform {
         translation 0 100 0
         children Shape {
          appearance Appearance {
           material Material {
            diffuseColor 1 1 0
           }

          }

          geometry Text {
           string "Y"
           fontStyle USE myFontStyle
          }

         }
        }

        Transform {
         translation 0 0 100
         children Shape {
          appearance Appearance {
           material Material {
            diffuseColor 1 1 0
           }

          }

          geometry Text {
           string "Z"
           fontStyle USE myFontStyle
          }

         }
        }
    ]
}
}

vrml1.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>move vrml</title>
<script>
        //CC3D.setNodeEventIn(String nodeName,String eventInName,String value);
           var i=0;
           var trans,x,z;
           var y=0;
           var num=600;
           var x1,y1,z1;
            /*      
           function test(){
              //var time=new Date();
              //var sec=time.getSeconds()+"";
              document.getElementById("disp").value=n;
              n=n+1;
           }
        */
           function setTrans(){
           x=100*Math.cos(2*Math.PI*i/num);
           z=60*Math.sin(2*Math.PI*i/num);
           trans=""+x+" "+y+" "+z+"";
           document.CC3D.setNodeEventIn("earth", "translation", trans);
        
           x1=60*Math.cos(2*Math.PI*i/num*5);
           y1=12*Math.sin(2*Math.PI*i/num*5);        
           x1=x+x1;
           y1=y+y1;
           z1=z;
           trans=""+x1+" "+y1+" "+z1+"";
           document.CC3D.setNodeEventIn("moon", "translation", trans);
           //document.CC3D.setNodeEventIn("vp", "position", "0 0 "+(i+50));
        
        
           i=i+1;
      }
            
        function move(){
             setInterval("setTrans();",20);
        }
</script>
</head>

<body>
<CENTER>
<OBJECT CLASSID="CLSID:4B6E3013-6E45-11D0-9309-0020AFE05CC8" NAME=CC3D ID=CC3D WIDTH=100% HEIGHT=90%>
<PARAM NAME="SRC" VALUE="vrml1.wrl">
<EMBED name=CC3D SRC="vrml1.wrl" TYPE="application/x-cc3d"
WIDTH=100% HEIGHT=90%>
</OBJECT>
</CENTER>

<input type=button id="move" value="move" onclick="move();">
<input    id="disp" value="disp">
</body>
</html>

发布于 :未分类

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注