|
|  |
Iichirou Suzuki
************************************************************************
VRMLの書式
**************************
#VRML V1.0 ascii
Separator {
Material {
diffuseColor 0 0 1
}
Cube {
width 1
height 1
depth 1
}
}
***************************
Sample
ファイルの一行目は必ず
#VRML V1.0 ascii
で始まります。
先頭に # があればその行はコメントとなります。
Separator{****}で一つの独立したグループを定義します。
Material は物体の色、材質を定義するノードです。
diffuseColorは色を定義します。「赤・緑・青」の順番で並んでいます。
Cubeは立方体を定義します。
width/height/depthは幅、高さ、奥行きを表します。
このプログラムをメモ帳にコピーしてファイル名をつけ、拡張子を
*.wrl
にして下さい。終了したらブラウザにドラッグして動作確認します。
VRMLブラウザの使い方
左側のWはWalkの意味でマウスもしくはカーソルで近づいたり遠のいたりします
Pan/Turn/Rollは同じように確認してみて下さい。
Stdyは最もよく使います。クリックすると物体の全ての方向を見ることが出来ます。
下のバーのRestoreは物体の位置を初期状態に戻します。
物体がどこかに行ってしまったり訳が分からなくなったときに使って下さい。
****************************************************************************
基本立体モデル
基本立体モデルとして
Cone（円錐）
Cube(立方体）
Cylinder(円柱）
Sphere(球）
の４つがあります。
**************************
円錐を表示します
#VRML V1.0 ascii
Separator {
Cone {
bottomRadius 1
height 3
}
}
**************************
Sample
****************************
半径８，高さ３と半径２，高さ１０の円錐を表示します
#VRML V1.0 ascii
Separator {
Cone {
bottomRadius 8
height 3
}
Cone {
bottomRadius 2
height 10
}
}
**************************
Sample
****************************
立方体を表示します
#VRML V1.0 ascii
Separator {
Cube {
width 2
height 3
depth 1
}
}
*************************
Sample
*************************
幅２，高さ１，奥行き０．５の立方体と、半径１，高さ３の円錐を表示します
#VRML V1.0 ascii
Separator {
Cube {
width 2
height 1
depth 0.5
}
Cone {
bottomRadius 1
height 3
}
}
*************************
Sample
*************************
円柱を表示します
#VRML V1.0 ascii
Separator {
Cylinder {
radius 1
height 3
}
}
*************************
Sample
**************************
３枚の薄い板を絡み合わせます。
#VRML V1.0 ascii
Separator {
Cube {
width 100
height 1
depth 100
}
Cube {
width 100
height 100
depth 1
}
Cube {
width 1
height 100
depth 1
}
}
**************************
Sample
**************************
球を表示します
#VRML V1.0 ascii
Separator {
Sphere {
radius 1
}
}
**************************
Sample
****************************
半径２，高さ１００の円柱と、半径１０の球を表示します
#VRML V1.0 ascii
Separator {
Cylinder {
radius 2
height 100
}
Sphere {
radius 10
}
}
***************************
Sample
文字の表示
文字列として日本語を使うことは出来ません。
************************************
VRMLという文字を表示させます。
#VRML V1.0 ascii
Separator {
FontStyle {
size 1
}
AsciiText {
string "VRML"
}
}
**********************************
Sample
カンマで区切ることによって複数行表示させることが出来ます。
*********************************
３行表示します
#VRML V1.0 ascii
Separator {
FontStyle {
size 1
}
AsciiText {
["Internet","Start","Pages"]
}
}
*********************************
Sample
背景色の設定
画面背景色をユーザー設定するには次のようにします。
DEF BackgroundColor Info {
string "1 1 1"
}
VRMLでの色の設定はHTML同様 Red Green Blueの 色成分定義方法を使います。
0 0 0
1 1 1
等のように表します。
*****************************************************************************
物体表面の色
物体表面の色はMaterial ノードで定義します。
Materialノードは６つのフィールドを持ちデフォルト値は以下の通りです。
Material {
ambientColor 0.2 0.2 0.2 環境光の色
diffuseColor 0.8 0.8 0.8 拡散光の色
specularColor 0 0 0 鏡面光の色
emissiveColor 0 0 0 放射光の色
shininess 0.2 鏡面の指数
transparency 0 透明度
}
通常は「diffuseColor」だけで色を指定すれば充分です
*********************************
立方体の表面を黄色にします。
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Material {
diffuseColor 1 1 0
}
Cube {
width 1
height 1
depth 1
}
}
**********************************
Sample
*********************************
円柱を黄色 球を青にします。
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Material {
diffuseColor 1 1 0
}
Cylinder {
radius 2
height 100
}
Material {
diffuseColor 0 0 1
}
Sphere {
radius 10
}
}
**********************************
Sample
****************************************************************************
物体への材質の貼り付け方の定義
立方体６面にそれぞれ別の色を付けるには次のようにします。
MaterialBinding {
value PER_PART
}
Material {
deffuseColor [1 0 0,0 1 0,0 0 1,0 1 1,1 1 0,1 0 1]
}
value 意味
DEFAULT デフォルト
OVERALL 物体全体に同じ材質
PER_PART 物体の各部分ごとに１つの材質
PER_PART_INDEXED インデックス順に各部分ごとに１つの材質
PER_FACE 物体の各面ごとに１つの材質
PER_FACE_INDEXED インデックス順に各面ごとに１つの材質
PER_VERTEX 物体の各頂点ごとに１つの材質
PERVERTEX_INDEXED インデックス順に各頂点ごとに１つ材質
*********************************
立方体の各面に別な色を表示します。
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
MaterialBinding {
value PER_PART
}
Material {
diffuseColor [1 0 0,0 1 0,0 0 1,0 1 1,1 1 0,1 0 1]
}
Cube {
width 1
height 1
depth 1
}
}
*********************************
Sample
*********************************
立体と円柱に対して配色をする
#VRML V1.0 ascii
DEF BackgroundColor Info {
string 1 1 1
}
Separator {
MaterialBinding {
value PER_PART
}
Material {
diffuseColor [1 0 0,0 1 0,0 0 1,0 1 1,1 1 0,1 0 1]
}
Cube {
width 40
height 40
depth 40
}
Cylinder {
radius 4
height 100
}
}
*******************************
Sample
テクスチャーマッピング
テクスチャーマッピングとは物体の表面にイメージを貼り付けることです。
貼り付けるイメージは Texture2ノードで定義します。
Texture2 {
filename "map.jpg"
}
********************************
立方体にテクスチャーを貼り付けます
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "0 0 0"
}
Separator {
Texture2 {
filename "map.jpg"
}
Cube {
width 1
height 1
depth 1
}
}
*******************************
Sample
*******************************
円柱にテクスチャを貼り付けます。
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Texture2 {
filename "map.jpg"
}
Cylinder{
radius 1
height 1
}
}
******************************
Sample
*******************************
球にテクスチャを貼り付けます
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Texture2 {
filename "map.jpg"
}
Sphere {
}
}
******************************
Sample
******************************
イメージを繰り返し貼り付けます
Texture2Transform {
scaleFactor 3 2
}
イメージの拡大縮小率で考える
張り付けが面に対して3/1 2/1という風に
最初の数字は縦方向
後の数字は横方向を表します
縦方向に３枚、横方向に２枚という意味です
*****************************
立方体にテクスチャを横に３枚、縦に２枚貼り付けます。
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Texture2Transform {
scaleFactor 3 2 1
}
Texture2 {
filename "map.jpg"
}
Cube {
width 3
height 2
depth 1
}
}
*********************************
Sample
*********************************
背景にイメージを貼ります
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "back.gif"
}
Separator {
Cube {
width 1
height 1
depth 1
}
}
*********************************
Sample
**************************************************************************
HTML に VRMLを埋め込む
EMBED SRC="****.wrl" width = w height = h
*********************************
座標変換
物体はその物体が定義されている座標の原点(0,0,0)に中心を合わせて
配置されます。
２つ以上の物体を配置する場合はTransformノードを使って物体を配置する位置
を設定します
*************************************
X方向に３，Y方向に２原点を移動します
Sphere {}
Transform {
translation 3 2 0
}
Sphere {}
***********************************
物体を回転させるにはTransformノードのrotationフィールドを用います
回転の無期は原点から見て回転軸の正の向きに右ねじを回す方向です
***********************************
原点(0,0,0)と回転軸(1,2,0)を結ぶ直線の周りに回転を0.7させる
Transform {
rotation 1 2 0 0.7
}
************************************
２つ目の立方体をX方向に２，Y方向に１平行移動し、さらに (0,0,0)-(1,1,0)を結ぶ
直線を回転軸にして0.7ラジアン回転して表示します
************************************
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Texture2 {
filename "map.jpg"
}
Cube {
width 1
height 1
depth 1
}
Transform {
translation 2 1 0
rotation 1 1 0 0.7
}
Cube {
width 1
height 1
depth 1
}
}
}
Cube {
width 1
height 1
depth 1
}
}
**************************************
Sample
**************************************
立方体を放射状に７個配置します
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Texture2 {
filename "map.jpg"
}
Cube {
}
Transform {
translation 4 0 0
}
Cube {
}
Transform {
translation -8 0 0
}
Cube {
}
Transform {
translation 4 4 0
}
Cube {
}
Transform {
translation 0 -8 0
}
Cube {
}
Transform {
translation 0 4 4
}
Cube {
}
Transform {
translation 0 0 -8
}
Cube {
}
}
****************************************
Sample
***********************************************************************
基本立体モデルを組み合わせて形を作る
***********************************
CylinderとConeを使って木を作ります
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Material {
diffuseColor .8 .4 .4
}
Cylinder {
radius .4
height 2
}
Transform {
translation 0 3 0
}
Material {
diffuseColor 0 1 0
}
Cone {
bottomRadius 1
height 4
}
}
*************************************
Sample
*************************************
１枚の薄い立方体と４つの円柱を用いてテーブルを作ります
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "0 0 0"
}
Separator {
Texture2 {
filename "map.jpg"
}
Cube {
width 100
height 4
depth 50
}
Transform {
translation 46 -25 21
}
Cylinder {
radius 4
height 50
}
Transform {
translation 0 0 -42
}
Cylinder {
radius 4
height 50
}
Transform {
translation -92 0 0
}
Cylinder {
radius 4
height 50
}
Transform {
translation 0 0 42
}
Cylinder {
radius 4 height 50
}
}
**************************************
Sample
**************************************
Cube を２つ使って「Ｘ」型を作ります
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Texture2 {
filename "block.gif"
}
Texture2Transform {
scaleFactor 1 6
}
Transform {
rotation 0 0 1 0.785
}
Cube {
width 1
height 6
depth 1
}
Transform {
rotation 0 0 1 1.57
}
Cube {
width 1
height 6
depth 1
}
}
*****************************************
Sample
**********************************************************************
立方体の各面に異なるテクスチャーを貼る
*****************************************
立方体の各面に異なるテクスチャーを貼ります
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
Texture2 {
filename "map.jpg"
}
#床
Separator {
Cube {
width 100
height 1
depth 100
}
}
#天井の壁
Separator {
Transform{
translation 0 100 0
}
Cube {
width 100
height 1
depth 100
}
}
Texture2 {
filename "map.jpg"
}
#右の壁
Separator {
Transform {
translation 50 50 0
}
Cube {
width 1
height 100
depth 100
}
}
#左の壁
Separator {
Transform {
translation -50 50 0
}
Cube {
width 1
height 100
depth 100
}
}
Texture2 {
filename "map.jpg"
}
#正面の壁
Separator {
Transform {
translation 0 50 -50
}
Cube {
width 100
height 100
depth 0
}
}
#前面の壁
Separator {
Transform {
translation 0 50 50
}
Cube {
width 100
height 100
depth 0
}
}
}
******************************************
Sample
***************************************************************************
半透明の組み合わせ
物体の透明度はMaterial ノードのtransparencyフィールドで設定できます
Material {
transparency 0.1
}
*****************************************
テーブルの上板を半透明にします。
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "0 0 0"
}
Separator {
Material {
transparency .5
}
Cube {
width 100
height 4
depth 50
}
Transform {
translation 46 -25 21
}
Material{}
Cylinder {
radius 4
height 50
}
Transform {
translation 0 0 -42
}
Cylinder {
radius 4
height 50
}
Transform {
translation -92 0 0
}
Cylinder {
radius 4
height 50
}
Transform {
translation 0 0 42
}
Cylinder {
radius 4 height 50
}
}
****************************************
Sample
**************************************************************************
カメラ位置の設定
デフォルトのカメラ位置はZ軸の負のZ方向を向き記述したVRML空間が画面に収まる位置に自動的に調整されます。
カメラ位置と方向はPerspectiveCameraノードで設定します。
PerspectiveCamera {
position 3 3 2
orientation -1 1 0 0.9
}
position カメラの位置
orientation カメラの向き
****************************************************************************
照明
DirectionalLight {
on True
intensity 1
color 1 1 1
direction 0 0 -1
on True 照射のOn/Off
intensity 輝度
color 色
dirrection 方向。原点として原点を結ぶ方向に照射
ユーザー定義
*****************************************
円柱を等間隔に５つ配置します
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "1 1 1"
}
Separator {
DEF myCylinder Group {
Cylinder {
radius 1
height 5
}
Transform {
translation 5 0 0
}
}
USE myCylinder
USE myCylinder
USE myCylinder
USE myCylinder
}
***************************************
Sample
***************************************
木をイメージした円柱と円錐からなる物体をTreeとして定義して
薄い板の四隅に配置します
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "0 0 0"
}
Separator {
DEF Cube Separator {
Separator {
Texture2 {
filename "map.jpg"
}
Material {
diffuseColor 1 1 1
}
Cube {
width 60
height 1
depth 60
}
}
}
DEF Tree Separator {
Separator {
Transform {
translation 30 5 30
}
Material {
diffuseColor .8 .4 .4
}
Cylinder {
radius 2
height 10
}
}
Separator {
Transform {
translation 30 20 30
}
Material {
diffuseColor 0 1 0
}
Cone {
bottomRadius 7
height 20
}
}
}
Transform {
translation 0 0 -60
}
USE Tree
Transform {
translation -60 0 0
}
USE Tree
Transform {
translation 0 0 60
}
USE Tree
}
********************************************
Sample
*********************************************
立方体をらせん状に配置します
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "0 0 0"
}
Separator {
DEF myCube Group {
Material {
diffuseColor 1 0 1
}
Cube {
width 20
height 2
depth 2
}
Transform {
translation 0 2 0
rotation 0 1 0 0.314
}
}
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
USE myCube
}
********************************************
Sample
********************************************
球をリング上に配置します
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "0 0 0"
}
Separator {
DEF mySphere Group {
Material {
diffuseColor 0 1 1
}
Sphere {
radius 1
}
Transform {
translation 0 2 0
rotation 1 0 0 0.314
}
}
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
USE mySphere
}
****************************************
Sample
****************************************
円柱と球の組み合わせです
#VRML V1.0 ascii
DEF BackgroundColor Info {
string "0 0 0"
}
Separator {
DEF mySphere Group {
Separator {
Material {
diffuseColor 0 1 0
}
Cylinder {
radius 1
height 20
}
Transform {
translation 0 10 0
}
Material {
diffuseColor 0 0 1
}
Sphere {
radius 2
}
Transform {
translation 0 -20 0
}
Sphere {
radius 2
}
}
Transform {
rotation 1 0 0 0.628
}
}
USE mySphere
USE mySphere
USE mySphere
USE mySphere
}
******************************************
Sample
HTMLなどへのリンク
WWWAnchor {
name "other.html"
description "Go to Alt name"
Cube {}
}
name リンク先のファイル名
description Alt表示の文章
インターネットスタートページ 鈴木維一郎 石橋三重子
|
|
|
|
|
|
