使用canvas從三個位置定位div

我正在嘗試創建一個自定義動畫播放器。 Three.js用於渲染對象，並且完美運行。問題是在底部添加類似control選項的東西（如播放，暫停等）。我不確定，但可能畫布呈現爲頁面的最後一部分。這裏是我的代碼：使用canvas從三個位置定位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>

，其結果是： 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，當我爲該元素設置任何高度時，我的畫布仍處於底部。這怎麼可能得到這個層次：

<PLAYER> 
    <CANVAS/> 
    <CONTROL/> 
</PLAYER>

來源

2017-04-13 karl person

嘗試在你的CSS：

#controlContainer { 
    position: absolute; 
    bottom: 0; 
}

由於controlContainer有位置絕對和playerContainer是近親沒有，controlContainer應該定位在底部。

而且

在rangeBarposition: absolute絕對定位它的容器時，沒有必要在這種情況下，。

希望這會有所幫助。

來源

2017-04-24 10:29:01 mjanisz1

使用canvas從三個位置定位div

回答

相關問題