Fatal编程技术网

Javascript 如何定位div

javascript jquery html css

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

我正在尝试创建一个自定义动画播放器。Three.js用于渲染对象，效果非常好。问题是在底部添加控制选项（如播放、暂停等）。我不确定，但画布可能是作为页面的最后一部分呈现的。这是我的代码：

<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>
渲染画布后，必须使用javascript将
renderContainer
元素附加到
playerContainer
元素中

但是，由于必须将
renderContainer
附加为
playerContainer
的第一个子元素，因此应该使用

这段代码应该做到以下几点：

var playerContainer = document.getElementById("playerContainer");

playerContainer.insertBefore(document.getElementById("renderContainer"), playerContainer.firstChild);
我为你做了一把小提琴。您可以在这里看到工作示例：

画布渲染后，必须使用javascript将
renderContainer
元素附加到
playerContainer
元素中

但是，由于必须将
renderContainer
附加为
playerContainer
的第一个子元素，因此应该使用

这段代码应该做到以下几点：

var playerContainer = document.getElementById("playerContainer");

playerContainer.insertBefore(document.getElementById("renderContainer"), playerContainer.firstChild);
我为你做了一把小提琴。您可以在这里看到工作示例：

我将所有代码都放在那里（除了
body
标记那里是空的
head
）。我的模型是json文件，我应该把它放在那里吗？那么你想把你的
#playerContainer
放在画布的底部吗？@nashcheez我编辑了我的帖子，并把它放在了简单的图像上。我把我所有的代码都放在那里（除了
body
标记那里是空的
head
）。我的模型是json文件，我应该把它放在那里吗？那么你想把你的
#playerContainer
放在画布的底部吗？@nashcheez我编辑了我的帖子，把它放在那里只是一张图片 
-green - playerContainer
-red - rendererContainer
-yellow - controlContainer

var playerContainer = document.getElementById("playerContainer");

playerContainer.insertBefore(document.getElementById("renderContainer"), playerContainer.firstChild);