I am currently in the process of developing a custom animation player using Three.js for rendering objects, which is functioning perfectly. However, I am encountering difficulty when trying to incorporate control options at the bottom of the player (such as play, pause, etc). It seems that the canvas is being rendered as the last part of the page. Below is the code snippet:
<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 occurred' );
}
);
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
TWEEN.update();
};
render();
</script>
</body>
The current result can be previewed here: enter image description here
To address this issue, I have experimented with CSS positions (relative and absolute) as follows:
<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>
However, this second approach proved to be less effective. In both scenarios, the playerContainer only contains the controlContainer, and setting any height for the element results in the canvas remaining at the bottom. How can I achieve the desired hierarchy as shown below?
<PLAYER>
<CANVAS/>
<CONTROL/>
</PLAYER>