1
私はカスタムアニメーションプレーヤーを作成しようとしています。 Three.jsはレンダリングオブジェクトに使用され、完全に動作します。問題は、下部にcontrolオプション（再生、一時停止など）を追加することです。私は確信していませんが、おそらくキャンバスはページの最後の部分としてレンダリングされます。そこに私のコードです：threejsのカンバスとdivの位置付け
<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>
は、結果は次のとおりです。 私は（相対および絶対）CSSの位置について何かを読んで、同様にこれを試してみましたenter image description here
：
<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しか含まれていません。その要素の高さを設定すると、キャンバスはまだ下にあります。あなたのCSSの
<PLAYER>
<CANVAS/>
<CONTROL/>
</PLAYER>