Javascript 使用来自threejs的画布定位div_Javascript_Html_Css

Javascript 使用来自threejs的画布定位div

javascript html css

Javascript 使用来自threejs的画布定位div,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个自定义动画播放器。Three.js用于渲染对象，效果非常好。问题是在底部添加类似control的选项（如播放、暂停等）。我不确定，但画布可能是作为页面的最后一部分呈现的。这是我的代码： <body> <div id="playerContainer"> <div id="renderContainer" style="width:400px;height:300px"></div>

我正在尝试创建一个自定义动画播放器。Three.js用于渲染对象，效果非常好。问题是在底部添加类似

control

的选项（如播放、暂停等）。我不确定，但画布可能是作为页面的最后一部分呈现的。这是我的代码：

<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：

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

由于

controlContainer

具有绝对位置，并且

playerContainer

不是最近的相对位置，因此

controlContainer

应位于底部

也

在这种情况下，当绝对定位其容器时，

范围栏中的位置：绝对

希望这能有所帮助。
尝试使用css：
#controlContainer {
  position: absolute;
  bottom: 0;
}

由于controlContainer
具有绝对位置，并且playerContainer
不是最近的相对位置，因此controlContainer
应位于底部
也
在这种情况下，当绝对定位其容器时，范围栏中的位置：绝对

希望这有帮助
#controlContainer {
  position: absolute;
  bottom: 0;
}