<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8"/>
<title>My first X3DOM page</title>
<script type='text/javascript' src='https://www.x3dom.org/download/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'>
<script>
function changeColor()
{
if(document.getElementById("color").getAttribute('diffuseColor')=="1 0 0")
document.getElementById("color").setAttribute('diffuseColor', '0 0 1');
else
document.getElementById("color").setAttribute('diffuseColor', '1 0 0');
}
function dataload()
{
$('#digital_download2').load('http://localhost/index2.php', function(data){
});
}
</script>
<style>
x3d
{
border:2px solid darkorange;
background: rgba(128, 128, 128, 0.4);
}
body
{
font-size:110%;
font-family:verdana, sans-serif;
background-image: url('pattern.png');
margin: 3em;
color: lightgray;
}
h1
{
color: darkorange;
}
</style>
</head>
<body>
<h1>Hello, X3DOM! Surfing board scene</h1>
<p>
This script can work so you can interact with 3d objects,
and they can change their properties, colors etc. On the fly while this the math script is loaded, which
calculates the corresponding math system with subdefinite mathematics. It's a part of constraint programming.
Fast calculation is a main benefit, while you can load interval data and complex math systems of any type.
The result of calculations is a space of interval data and can be also integer and visible on the screen.
Multiuser system can make it new virtual worlds with a new quality and possibilities of fast solving complex
technical and other problems. So it's a new class of 3D systems with on the fly math solving of interval data math systems.
</p>
<x3d width='900px' height='900px'>
<scene>
<transform translation='0 2 0'>
<shape onclick="changeColor(); dataload();">
<appearance>
<material id ="color" diffuseColor='0 0 1'></material>
</appearance>
<box size='1 5 1'></box>
</shape>
</transform>
<transform translation='-3 0 0'>
<shape>
<appearance>
<material diffuseColor='0 0 0'></material>
</appearance>
<box size='1 1 1'></box>
</shape>
</transform>
<transform translation='3 0 0'>
<shape>
<appearance>
<material id="color3" diffuseColor='0 0 1' ></material>
</appearance>
<box size='1 1 2'></box>
</shape>
</transform>
<transform translation='0 0 0' rotation='0.0 0.0 0.7 -1.55'>
<shape>
<appearance>
<material id="color3" diffuseColor='0 0 0' ></material>
</appearance>
<box size='0.5 7 0.5'></box>
</shape>
</transform>
<transform translation='0 4 0' rotation='0.0 0.0 0.7 -1.55'>
<shape>
<appearance>
<material id="color3" diffuseColor='0 0 0.9' ></material>
</appearance>
<box size='1 7 1.2'></box>
</shape>
</transform>
</scene>
</x3d>
<div id="digital_download">
A
</div>
<div id="digital_download2" style="display: none;">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
$('#digital_download').html('Downloading...'); // Show "Downloading..."
// Do an ajax request
//$('#digital_download').load('http://localhost/index2.php');
$('#digital_download').load('http://localhost/index2.php', function(data){
if (data!="The weather is fine") {
$('#digital_download').html('x=[11,34]; y=x+[10,20]; if x>22 -> c=gray; ');
//alert('YES');
document.getElementById("color").setAttribute('diffuseColor', '0.11 0.11 1');
document.getElementById("color3").setAttribute('diffuseColor', '0.41 0.41 0.22');
};
//
});
</script>
</body>
</html>