Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<meta name="description" content="X3DOM playgroundfunctioning x3dom demo" />
<meta charset=utf-8 />
<title>JS Bin</title>
  <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/x3dom/src/x3dom.css'></link>
</head>
<body>
  <h2>Look ma 3D in my web pages!</h2>
  <input type="button" id="boxExButt"   style="background-color:#3CF"  value="color"/>
<input type="button" id="boxExButt2"   style="background-color:#3CF"  value="scale"/>
<input type="button" id="exReset"   style="background-color:#F55"  value="RESET"/>
  
  <X3D xmlns="http://www.web3d.org/specifications/x3d-namespace"  showStat="false" showLog="false" width="400px" height="400px"  contentEditable='true'>
            <Scene>
                <Transform id="coneTrafo" class="coneClass" translation="-1.5 0 0">
                    <Shape DEF="coneShape">
                        <Appearance>
                            <Material diffuseColor="0 1 0" specularColor=".5 .5 .5" ></Material>
                        </Appearance>
                        <Cone DEF="cone" ></Cone>
                    </Shape>
                </Transform>
                
                <Transform  DEF="boxTrafo" class="boxClass" translation='4.5 0 0'>
                    <Shape DEF="boxShape">
                        <Appearance> 
                            <Material id="mymat" diffuseColor="0 0 1" specularColor=".5 .5 .5" ></Material>
                        </Appearance>
                        <Box id="box" ></Box>
                    </Shape>
                </Transform>
                
                
                
                <Transform DEF="cylinderTrafo" class="cylinderClass" translation="2.5 0 0" scale="1 3 1">
                    <Shape DEF="cylinderShape">
                        <Appearance>
                            <Material diffuseColor="1 0 1" specularColor=".5 .5 .5" ></Material>
                        </Appearance>
                        <Cylinder DEF="cylinder" radius="1.0" height="2.0" ></Cylinder>
                    </Shape>
                </Transform>
                
                <Viewpoint centerOfRotation="0 0 0" position="0 0 15" orientation="0 1 0 0" ></Viewpoint>
                
                 <TimeSensor id='TIMER' cycleInterval='5' loop='true'></TimeSensor>
                <OrientationInterpolator DEF='OI' key='0 0.5 1' keyValue='1 0 0 0, 1 0 0.5 3.14, 1 0 1.0 6.28'></OrientationInterpolator>
                <ROUTE fromNode='TIMER' fromField='fraction_changed' toNode='OI' toField='set_fraction'></ROUTE>
                <ROUTE fromNode='OI' fromField='value_changed' toNode='coneTrafo' toField='rotation'></ROUTE>
                
                 <OrientationInterpolator DEF='OI2' key='0 0.5 1' keyValue=' 1 0 0 6.28,  1 0 0 3.14, 1 0 0 0,'></OrientationInterpolator>
                <ROUTE fromNode='TIMER' fromField='fraction_changed' toNode='OI2' toField='set_fraction'></ROUTE>
                <ROUTE fromNode='OI2' fromField='value_changed' toNode='boxTrafo' toField='rotation'></ROUTE>
                
                
                
                 <OrientationInterpolator DEF='OI4' key='0 0.5 1' keyValue=' 1 6.28 0 6.28,  1 0 0 3.14, 1 0 0 0,'></OrientationInterpolator>
                <ROUTE fromNode='TIMER' fromField='fraction_changed' toNode='OI4' toField='set_fraction'></ROUTE>
                <ROUTE fromNode='OI4' fromField='value_changed' toNode='cylinderTrafo' toField='rotation'></ROUTE>
    
            </Scene>
    </X3D>
  
  <script type='text/javascript' src='http://www.x3dom.org/x3dom/src/x3dom.js'></script>
</body>
</html>
​
 
$(document).ready(function(){
    
        
        
        $( "#boxExButt" ).click(function() {     
                $('#mymat').attr('diffusecolor', '1 0 0');
            });
        $( '#boxExButt2' ).click(function() {
            $('#coneTrafo').attr('scale',  3*Math.random() + ' ' + 3*Math.random() + ' ' + 3*Math.random()); 
        });
        
        $( '#exReset' ).click(function() {
            $('#mymat').attr('diffusecolor','0.603 0.894 0.909');
            $('#coneTrafo').attr('scale','1 1 1');
        });
        
        
        
        
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sresslerpro
0viewers