I am currently in the process of developing my own custom animation player. Utilizing Three.js for object rendering has been successful so far. However, the challenge lies in incorporating control options at the bottom of the player interface (such as play and pause buttons). I suspect that the canvas is being rendered as the last element on the page. Here is a snippet of my 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>
The output can be viewed here: enter image description here
After researching css positioning techniques like relative and absolute, I attempted to implement it in this manner:
<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>
Unfortunately, this solution did not produce the desired outcome. In both scenarios, the playerContainer only contains the controlContainer element, causing the canvas to remain at the bottom. How can I achieve the following hierarchy?
<PLAYER>
<RENDERER/>
<CONTROL/>
</PLAYER>
@UPDATE I am aiming for a layout similar to this:
https://i.stack.imgur.com/V85hj.png
as illustrated below:
-green - playerContainer
-red - rendererContainer
-yellow - controlContainer