我正在尝试创建一个自定义动画播放器。 Three.js 用于渲染对象，并且运行良好。问题是在底部添加诸如 control 选项之类的内容(如播放、暂停等)。我不确定，但 Canvas 可能会呈现为页面的最后一部分。这是我的代码:
<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>
结果是: enter image description here
我读了一些关于 css 中的位置(相对和绝对)的内容，并尝试了这个:
<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>
但效果最差。在这两个解决方案中，playerContainer 仅包含controlContainer，当我为该元素设置任何高度时，我的 Canvas 仍然位于底部。如何获得这个层次结构:
<PLAYER>
<CANVAS/>
<CONTROL/>
</PLAYER>
最佳答案
尝试你的CSS:
#controlContainer {
position: absolute;
bottom: 0;
}
作为controlContainer具有绝对位置，并且 playerContainer是最近的亲戚不是，controlContainer应位于底部。
还有
position: absolute在rangeBar在这种情况下，当绝对定位其容器时，没有必要。
希望这有帮助。
关于javascript - 使用来自 Threejs 的 Canvas 定位 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43400764/