1

I am playing around with VRML at the moment, not through choice to be honest but for a project on Web 3D.

I am trying to make a touch sensor in VRML that will show and hide a Div in a webpage. I have tried writing a wee script using

browser.loadURL('javascript:someFunction()');

to try and test this.

The javascript is never called, however I know my touch sensor is ok as certain functions I have tried to use (e.g. if i spell 'browser' wrong) it throws up an error.

Perhaps this is just not supported by modern browsers?

Any assistance and advice would be greatly appreciated.

    DEF alertScript Script {
    eventIn SFTime make_alert
    url [ "javascript:
    function make_alert (value) {
      Browser.loadURL('javascript:alert()');
    }
    " ]
}


ROUTE touchBack.touchTime TO alertScript.make_alert
Ewen Cluley
  • 111
  • 2
  • 14
  • 1
    apparently not, actually doing it at Uni as part of my undergrad! Something I guess I am just going to have to get through. It's odd that uni's appear to be focusing on things that are dying/dead rather than future technology that is coming in. Flash being a prime example, a technology they teach without a mention of HTML5. – Ewen Cluley Mar 10 '12 at 12:09
  • Universities and old professors.. nothing else to expect in most cases :/ – ThiefMaster Mar 11 '12 at 02:55

1 Answers1

2

Do they only want classic VRML or is X3D allowed ? (X3D is the name of the current version of VRML).

If you are allowed to use X3D (I don't see why not), you could use X3DOM which is a WebGL engine, you may even get extra points on your assignment :)


Here's an example that hides a div when you click on a 3D sphere:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Touchsensor in X3DOM</title>

    <link href="x3dom.css" rel="stylesheet" />
    <style>
    #myDiv {
        color: blue;
        margin: 20px 0;
    }
    x3d {
        display: block;
        width: 600px;
        height: 400px;
        background: #EEEEEE;
        border: none;
    }
    </style>
</head>
<body>


    <div id="myDiv">
        Click the sphere to hide this div
    </div>

    <x3d>
        <Scene>
            <Shape id="mySphere">
                <Appearance>
                    <Material diffuseColor="0 1 0" />
                </Appearance>
                <Sphere/>
            </Shape>
        </Scene>
    </x3d>


    <script src="x3dom.js"></script>
    <script>
    (function() {

        document.getElementById('mySphere').onclick = function(){
            document.getElementById('myDiv').style.display = "none";
        };

    })();
    </script>


</body>
</html>

And by the way, X3D is the recommended 3D technology by the HTML5 spec, it isn't dead at all :-)

wildpeaks
  • 7,273
  • 2
  • 30
  • 35
  • 1
    Wonderful. I have played arround with this and it works well. The actual reason I was trying it with vrml was because we were given a piece of vrml code to display images in a Quasai 3D kinda way, i.e. the appropriate image is shown based on rotation and camera position to create the illusiojn of 3d. I have tried converting this to x3dom using instantreality's online convertor and it partly works, however the touch sensors that have been coded in to alow the "model" to be rotated dont work. – Ewen Cluley Mar 13 '12 at 13:29
  • Going to have a further play with things but thanks for the help! – Ewen Cluley Mar 13 '12 at 13:33
  • You can always post another question on StackOverflow if you have trouble converting the navigation controls used to rotate the model :) – wildpeaks Mar 13 '12 at 22:36