Control WRL embedded in html using Javascript

于 2007-07-06 17:15:00 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Virtual Reality 文章标签： javascript html translation function object timer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nasky/article/details/1681181
本文介绍如何使用JavaScript控制VRML场景中的对象移动及属性变化，包括通过脚本更新坐标、改变视点位置、启动和停止时钟传感器等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

In my last artitle,I discussed the Java EAI mode to control the vrml. Well,the eai mode is powerful  because of the powerful java support.Usually for those not very complicated communication cases,the eai mode is not recommended.Today I'll show the more common tool to realize the vrml control,most people have use this tool very frequently for web design,special page effects,and so on.That's it --the JAVASCRIPT.

Using javascript to control your wrl,you should be very familiar with your VR contents:the object names,the node tree,the interpolators,the sensors,the times and the touch or driven relationship between them.That's very important and you should design the vrml file's struct when you considering the whole web page.What you want to show to the consumer or clients,how to show the product or the process of the assembling or other things,you should take this into consideration and design the html and the vrml.

This article assumes you are familiar with VRML,JavaScript,Html.

The first example is to control the coordiantes of one moving object in the VR.It's very easy and its code is capable of self-explanation.

The coordinate.htm:

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

<HTML><HEAD><TITLE>Nasky  VRML simple test-for students and beginners</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>

<SCRIPT language=JavaScript>
var i;
var j;
var k;
var timer;


function M_o()
{ 
clearTimeout(timer);
M_e=Scene.Engine; 
M_e.Nodes("my_Time").Fields("enabled")=0; 
i=M_e.Nodes("my_view").Fields("translation").x; 
j=M_e.Nodes("my_view").Fields("translation").y; 
k=M_e.Nodes("my_view").Fields("translation").z; 
document.tickform.tickfield.value=i        //对文本框进行附值
document.tickform.tickfielda.value=j
document.tickform.tickfieldb.value=k

} 
function M_input()
{ 

clearTimeout(timer);
M_e=Scene.Engine; 
M_e.Nodes("my_Time").Fields("enabled")=0; 
M_e.Nodes("my_view").Fields("translation").x=document.tickform1.tickfield1.value;
M_e.Nodes("my_view").Fields("translation").y=document.tickform1.tickfielda1.value;
M_e.Nodes("my_view").Fields("translation").z=document.tickform1.tickfieldb1.value;
}

function M_c()
{

M_e=Scene.Engine; 
M_e.Nodes("my_Time").Fields("enabled")=1; 
i=M_e.Nodes("my_view").Fields("translation").x;
j=M_e.Nodes("my_view").Fields("translation").y; 
k=M_e.Nodes("my_view").Fields("translation").z;
document.tickform.tickfield.value=i //对文本框进行附值
document.tickform.tickfielda.value=j
document.tickform.tickfieldb.value=k 

timer=setTimeout("M_c()",50)


} 

function textprintdown()//自定义运行函数
{

}
</SCRIPT>
</HEAD>
<BODY leftMargin=0 topMargin=0>


<p align="center">&nbsp;</p>
<p align="center">

  <object id=Scene type=application/x-oleobject height=337 width=571 
      classid=CLSID:86A88967-7A20-11D2-8EDA-00600818EDB1>
    <param name="WaitForAllResources" value="0">
    <param name="Scene" value="aaa.wrl" ref>
    <param name="RendererName" value="DirectX Renderer">
    <param name="NavigationBar" value="1">
    <param name="ConsoleMode" value="0">
    <param name="ShowFps" value="-1">
    <param name="ShowRenderingTime" value="0">
    <param name="ShowProgress" value="-1">
    <param name="RendererHints" value="1024">
    <param name="Collider" value="0">
    <param name="ColliderMode" value="0">
    <param name="HeadLight" value="-1">
    <param name="NavigationMode" value="3">
    <param name="viewpoint_transition_mode" value="0">
    <param name="show_hidden_viewpoints" value="0">
    <param name="TravelSpeed" value="3">
    <param name="BackColor" value="12632256">
    <param name="ShowLogo" value="-1">
    <param name="ContextMenu" value="-1">
    <param name="VRML_BACKGROUND_COLOR" value="#c0c0c0">
    <param name="VRML_DASHBOARD" value="TRUE">
    <param name="Mask" value>
    <param name="LoadDroppedScene" value="-1">
    <param name="MuteSound" value="0">
    <param name="Appearance" value="0">
    <param name="CpuLoading" value="80">
    <param name="RendererOptimization" value="1">
    <param name="Skin" value="{1706B265-E103-4332-9871-7FEE6C37C699}">
    <param name="NavigationStyle" value="turn">
    <param name="NavigationType" value="EXAMINE">
    <param name="InputDevices" value="7">
  </object>
<p align="center">
<a href="javascript:M_c()">显示坐标</a> 
<a href="javascript:M_o()">停止</a>
</p>
<p align="center">
<table width="631" height="23">
  <tr>
    <td width="260" height="17" align="center"><strong><font size="+4">X:</font></strong> </td>
    <td width="148"><strong><font size="+4">Y:</font></strong></td>
    <td width="207"><strong><font size="+4">Z:</font></strong></td>
  </tr>
</table>
</p>
<p align="center"><form name=tickform>
<textarea name=tickfield  wrap=virtual></textarea>
<textarea name=tickfielda  wrap=virtual></textarea>
<textarea name=tickfieldb  wrap=virtual></textarea>
</form></p>
<p align="center"><strong>请输入要浏览的经纬度</strong></p>
<p align="center"><form name=tickform1>
<textarea name=tickfield1  wrap=virtual></textarea>
<textarea name=tickfielda1  wrap=virtual></textarea>
<textarea name=tickfieldb1  wrap=virtual></textarea>
<a href="javascript:M_input()">执行坐标</a>
</form>
</body>
</html>

the vrml:aaa.wrl

 

#VRML V2.0 utf8 

DEF my_view Transform{ 
translation 1 1.2 16 
rotation 0 1 0 -1 
children [ 
DEF my_viewpoint Viewpoint { 
description "AutoRun" 
orientation 1 0 0 0 
position 0 0 0 
} 
] 

} 
DEF old_Viewpoint Viewpoint { 
description "Entry point" 
orientation 0 1 0 -1 
position 1 1.2 16 
} 

DirectionalLight { 
ambientIntensity 0.8 
intensity 0.6 
direction 0 -1 0 
} 
Shape { 
appearance Appearance { 
material Material { 
diffuseColor 1 0 0 
} 
} 
geometry ElevationGrid { 
xDimension 4 
xSpacing 5.5 
zDimension 4 
zSpacing 5.5 
height [0.8 0.1 0.4 0.5 
0.5 0.4 0 0.4 
0.2 0.1 0.4 0.3 
0.5 0.6 0.7 0.2] 
} 
} 
Transform { 
translation 8 3.5 8 
children [ 
Shape { 
appearance Appearance { 
material Material { 
diffuseColor 0 0 1 
} 
} 
geometry Box {size 1 1 1 } 
} 
] 
} 
Transform { 
translation 15 0.6 15 
children [ 
Shape { 
appearance Appearance { 
material Material { 
diffuseColor 0 1 0 
} 
} 
geometry Cylinder { 
height 1.2 
radius 0.4 
} 
} 
] 
} 

DEF my_Time TimeSensor { 
cycleInterval 20 
enabled FALSE 
loop TRUE 
} 
DEF my_Position PositionInterpolator { 
key [0 0.25 0.38 0.5 0.75 1.0] 
keyValue [1 1.2 16,2 1.2 1,7 1.2 1, 
15 1.2 1,14 1.2 12,1 1.2 16] 
} 
DEF my_Direction OrientationInterpolator { 
key[0 0.25 0.38 0.5 0.75 1.0] 
keyValue [0 1 0 -1,0 1 0 -2.9,0 1 0 3.14, 
0 1 0 2.9,0 1 0 1.4,0 1 0 -1] 
} 
DEF my_LookUpAngle OrientationInterpolator { 
key [ 0 0.25 0.38 0.5 0.75 1.0] 
keyValue [1 0 0 0,1 0 0 0,1 0 0 0.3, 
1 0 0 0,1 0 0 0,1 0 0 0] 
} 
ROUTE my_viewpoint.bindTime TO my_Time.set_startTime 
ROUTE my_viewpoint.isBound TO my_Time.set_enabled 

ROUTE my_Time.fraction_changed TO my_Position.set_fraction 
ROUTE my_Time.fraction_changed TO my_Direction.set_fraction 
ROUTE my_Time.fraction_changed TO my_LookUpAngle.set_fraction 

ROUTE my_Position.value_changed TO my_view.set_translation 
ROUTE my_Direction.value_changed TO my_view.set_rotation 
ROUTE my_LookUpAngle.value_changed TO my_viewpoint.set_orientation 

 

the running result:

In the second example , you can control more things,the code is also capable of self-explanation,here is the code.

the html: aa.htm

<html>
<title>Nasky vrml samples-js</title>
<body>
<SCRIPT language=JavaScript>
function sendEvent( )
{
document.CC3D.setNodeEventIn("view1",'set_bind','TRUE')
}
function original( )
{
document.CC3D.setNodeEventIn("view0",'set_bind','TRUE')
}
function stop( )
{
document.CC3D.setNodeEventIn("clock",'enabled','FALSE')
}
function start( )
{
document.CC3D.setNodeEventIn("clock",'enabled','TRUE')
}
function change( )
{
document.CC3D.setNodeEventIn("blue",'diffuseColor','.70213 .70213 .70213')
}
function positionshow( )
{ var x; 
x=document.CC3D.getNodeEventOut("ok","translation")

document.tickform.tickfield.value=x
}
function positiontransmit( )
{ 
var x; 
x=document.tickform.tickfield_a.value
document.tickform.tickfield_b.value=x
document.CC3D.setNodeEventIn("clock",'enabled','FALSE')
document.CC3D.setNodeEventIn("ok",'translation',x)
}
</SCRIPT>
<object classid="CLSID:4B6E3013-6E45-11D0-9309-0020AFE05CC8" name=CC3D 
id=CC3D WIDTH=598 HEIGHT=448 >
    <param name="SRC" value="box.wrl">
    <embed name=CC3D src="box.wrl" type="application/x-cc3d"
WIDTH=598 HEIGHT=448>
    </embed>
  </object>
<p><a href="javascript:sendEvent()" >更改视点到view1</a></p>
<p><a href="javascript:original()" >切换到原视点</a></p>
<p><a href="javascript:stop()" >停止</a></p>
<p><a href="javascript:start()" >开始</a></p>
<p><a href="javascript:change()" >改变颜色</a></p>
<p><a href="javascript:positionshow()">显示坐标</a></p>
<form name=tickform >
<textarea name=tickfield  wrap=virtual></textarea>
<textarea name=tickfield_a  wrap=virtual></textarea><a href="javascript:positiontransmit( )">positiontransmit</a>
<textarea name=tickfield_b  wrap=virtual></textarea>
</form>
</body>
</html>

 

the WRL: aa.wrl

 

#VRML V2.0 utf8
#written by blaxxunCC3D 5.104
DEF view0 Viewpoint {    
    position 0 0 10
 
    fieldOfView 1.177
    description "view0"
}


DEF view1 Viewpoint {    
    position 11.91 1.2 65.61
    orientation 0.02942 0.8073 -0.5894 -0.05918
    fieldOfView 1.177
    description "view1"
}
DEF ok Transform {
    children DEF mm Shape {geometry  Box {size 0.5 0.5 1}
        appearance  Appearance {material DEF blue  Material {
                diffuseColor .10213 .70213 .70213
            }}}
    translation 0.151824 0 0
}
DEF    board Transform    {translation 0 -0.9 0 children [ Shape    {geometry Box 
            {  size    10 0.2 10
    
            }  appearance Appearance {material Material {diffuseColor 0.5 0.4 0.2}}
        }


    ]}
DEF clock TimeSensor {
    cycleInterval 5
    enabled TRUE 
    loop TRUE
}
DEF position PositionInterpolator {
    key [0,0.5,1]
    keyValue [-1 0 0,1 0 0,1.2 -0.5 -1]
}
ROUTE clock.fraction_changed TO position.set_fraction
ROUTE position.value_changed TO ok.set_translation

 

and the running result:

Nasky

 

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值