update length and width dynamic on html
Tommy Ngo
in droidscript
var autoRotate = true;
//Called when application is started.
function OnStart()
{
app.SetScreenMode( "Game" );
app.SetOrientation("Portrait" );
lay = app.CreateLayout( "linear", "VCenter,FillXY" );
lay.SetBackColor( "black" );
//Create a web control.
web = app.CreateWebView(1,.6,"NoScrollBars,fit");
lay.AddChild( web );
//Create a text label and add it to layout.
txt = app.CreateText( "Hello" );
txt.SetTextSize( 32 );
// lay.AddChild( txt );
btn = app.CreateButton( "BTN", 0.3, 0.1 );
spinLength = app.CreateSpinner( "Length,1,2,3,4,5,6,7,8,9,10", 0.3 );
spinLength.SetOnTouch( spinLength_OnChange );
spinWidth = app.CreateSpinner( "Width,1,2,3,4,5,6,7,8,9,10", 0.3 );
spinWidth.SetOnTouch( spinWidth_OnChange );
spinHeight= app.CreateSpinner( "Height,1,2,3,4,5,6,7,8,9,10", 0.3 );
spinHeight.SetOnTouch( spinHeight_OnChange );
lay.AddChild(spinLength );
lay.AddChild(spinWidth );
lay.AddChild(spinHeight);
lay.AddChild(btn );
btn.SetOnTouch(btn_OnTouch);
btn2 = app.CreateButton( "[fa-pause]", 0.1,-1, "FontAwesome" );
btn2.SetOnTouch( ToggleRotate );
lay.AddChild( btn2 );
//Add layout to app.
app.AddLayout( lay );
web.LoadUrl( "Html/test2dwireframe.html" );
}
function spinLength_OnChange( item )
{
web.Execute('length= "'+item+'";');
web.Execute( "rotate(" + autoRotate + ")" );
}
function spinWidth_OnChange( item )
{
web.Execute('width= "'+item+'";');
}
function spinHeight_OnChange( item )
{
web.Execute('height= "'+item+'";');
}
function btn_OnTouch()
{
//web.LoadUrl( "Html/test2dwireframe.html" );
//web.LoadUrl( "Html/test2dsurface.html" );
}
function btnExit_OnTouch()
{
app.Exit();
}
//Show page load progress.
function web_OnProgess( progress )
{
app.Debug( "progress = " + progress );
if( progress==100 ) app.HideProgress();
}
//Toggle auto-rotation.
function ToggleRotate()
{
autoRotate = !autoRotate;
web.Execute( "rotate(" + autoRotate + ")" );
}
in test2dwireframe.html
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="test.js"></script>
<script src="OrbitControls.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var autoRotate=true, count=0;
var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
var length=2;
var width=3;
var height=5;
var borderV13_6Bottom= new THREE.Geometry();
borderV13_6Bottom.vertices.push(new THREE.Vector3(length, 0, 0));
borderV13_6Bottom.vertices.push(new THREE.Vector3(0, 0, 0));
borderV13_6Bottom.vertices.push(new THREE.Vector3(0, width, 0));
borderV13_6Bottom.vertices.push(new THREE.Vector3(length,width , 0));
borderV13_6Bottom.vertices.push(new THREE.Vector3(length, 0, 0));
borderV13_6Bottom.vertices.push(new THREE.Vector3(length, 0,height ));
borderV13_6Bottom.vertices.push(new THREE.Vector3(length, width,height ));
borderV13_6Bottom.vertices.push(new THREE.Vector3(length,width , 0));
borderV13_6Bottom.vertices.push(new THREE.Vector3(length,width , height));
borderV13_6Bottom.vertices.push(new THREE.Vector3(0, width,height));
borderV13_6Bottom.vertices.push(new THREE.Vector3(0,width, 0));
borderV13_6Bottom.vertices.push(new THREE.Vector3(0, width,height ));
borderV13_6Bottom.vertices.push(new THREE.Vector3(0, 0, height));
borderV13_6Bottom.vertices.push(new THREE.Vector3(length, 0, height));
borderV13_6Bottom.vertices.push(new THREE.Vector3(0, 0, height));
borderV13_6Bottom.vertices.push(new THREE.Vector3(0,0,0));
var lineBorderV13_6Bottom = new THREE.Line(borderV13_6Bottom, material);
scene.add(lineBorderV13_6Bottom) ;
camera.position.set(.2, 1.3, 3 );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( length/2, width/2, 0 );
controls.update();
function animate()
{
requestAnimationFrame(animate) ;
if( autoRotate )
{
lineBorderV13_6Bottom.rotation.x = count * 0.04;
lineBorderV13_6Bottom.rotation.y = count * 0.02;
count++;
}
render() ;
}
function render()
{
renderer.render( scene, camera );
}
function rotate( auto )
{
autoRotate = auto;
animate() ;
}
animate() ;
</script>
</body>
</html>