Question

我正在尝试创建自定义动画播放器。 Three.js用于渲染对象，它完美地工作。问题是在底部添加类似控制选项的内容（如播放，暂停等）。我不确定，但画布可能是页面的最后一部分。有我的代码：

Range: '!' min=1 max=1;

结果是： enter image description here

我读了一些关于css（相对和绝对）位置的东西，并尝试了这个：

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

但效果最差。在两个解决方案中，playerContainer只包含controlContainer，当我为该元素设置任何高度时，我的画布仍然在底部。如何获得这种层次结构：

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

@UPDATE 我想要这样的东西：

当：

<PLAYER>
  <RENDERER/>
  <CONTROL/>
</PLAYER>

Answer 1

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

但是，由于您必须将renderContainer添加为playerContainer的第一个孩子，因此您应该使用insertBefore()。

这段代码可以解决问题：

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

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

我为你创造了一个小提琴。您可以在此处查看工作示例：https://jsfiddle.net/nashcheez/LvjykL23/

如何定位div

1 个答案: