javascript - How to position divs -
i'm trying create custom animation player. three.js used render object , works perfectly. problem add control options on bottom(like play,pause etc). i'm not sure canvas rendered last part of page. there code:
<body> <div id="playercontainer"> <div id="rendercontainer" style="width:400px;height:300px"></div> <div id="controlcontainer" style="width:400px;height:30px"> <input id="rangebar" type="range" min="0" max="100" value="0" step="1" style="width:400px;height:30px"/> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://threejs.org/build/three.js"></script> <script src="jquery.fullscreen-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/5/tween.js"></script> <script> container = document.getelementbyid( 'rendercontainer' ); bar = document.getelementbyid( 'rangebar' ); document.body.appendchild( container ); var scene = new three.scene(); var camera = new three.perspectivecamera(75, $('#rendercontainer').width()/$('#rendercontainer').height(), 0.1, 1000); camera.position.z = 5; camera.position.y = 0; camera.position.x = 0; renderer = new three.webglrenderer(); renderer.setsize( $('#rendercontainer').width(), $('#rendercontainer').height()-30 ); container.appendchild( renderer.domelement ); var loader = new three.objectloader(); loader.load("model(1).json", function ( obj ) { scene.add( obj ); render(); }, function ( xhr ) { console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); }, function ( xhr ) { console.error( 'an error happened' ); } ); var render = function () { requestanimationframe(render); renderer.render(scene, camera); tween.update(); }; render(); </script> </body> and result is: enter image description here
i read positions in css(relative , absolute) , tried well:
<div id="playercontainer" style="position: relative;"> <div id="rendercontainer" style="width:400px;height:300px"></div> <div id="controlcontainer" style="width:400px;height:30px"> <input id="rangebar" type="range" min="0" max="100" value="0" step="1" style="position: absolute;top:400px;width:400px;height:30px"/> </div> </div> but works worst. in both solutions playercontainer contains controlcontainer , when set height element canvas still @ bottom. how possible hierarchy:
<player> <renderer/> <control/> </player> @update want that:
when:
-green - playercontainer -red - renderercontainer -yellow - controlcontainer
you have use javascript append rendercontainer element playercontainer element after canvas has been rendered.
however, since have append rendercontainer fist child of playercontainer, should use insertbefore().
this code should trick:
var playercontainer = document.getelementbyid("playercontainer"); playercontainer.insertbefore(document.getelementbyid("rendercontainer"), playercontainer.firstchild); i have created fiddle you. can see working example here: https://jsfiddle.net/nashcheez/lvjykl23/
Comments
Post a Comment