javascript - オブジェクトthreejs css3d javascriptを削除できません

Question

オブジェクトをシーンから削除することはできません。javascript threejs を使用しており、threejs は DOM 要素を 3D でレンダリングするために css3d を使用していると思います

  var obj, i;
for ( i = scene.children.length - 1; i >= 0 ; i -- ) {
    obj = scene.children[ i ];
    if ( obj !== camera) {
        scene.remove(obj);
    }

オブジェクトを削除するために使用しようとしていたコードです。別のスタックオーバーフローの投稿で見つけました。

これが私のコードの一部です：

これは、いくつかのオブジェクトがシーンに追加される場所です

    function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.z = 400;

    scene = new THREE.Scene();

    for (var i = 0; i < menu.length; i++) {
        var element = document.createElement('img');
        element.src = menu[i] + ".png";
        element.onclick = function (mymenu) {
            return function () {
                eval(
                        mymenu + "()"
                )
            }
        }(menu[i])


        var object = new THREE.CSS3DObject(element);
        object.position.x = Math.random() * 4000 - 2000;
        object.position.y = Math.random() * 4000 - 2000;
        object.position.z = Math.random() * 4000 - 2000;
        object.scale.x = 0.5;
        object.scale.y = 0.5;
        scene.add(object);
        objects.push(object);
        var object = new THREE.Object3D();
        object.position.x = window.innerWidth / 3.5 * -1;
        object.position.y = ( i * 240 ) - 50;
        grid.push(object);


    }


    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.position = 'absolute';
    document.getElementById('container').appendChild(renderer.domElement);
    // document.body.appendChild( renderer.domElement );
    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.rotateSpeed = 0.5;
    controls.addEventListener('change', render);
    transform(grid, 1000);
    window.addEventListener('resize', onWindowResize, false);


}

次に、この関数にさらにいくつか追加されます。

function torchlight2() {

    var j = 0;
    for (var i = 0; i < 3; i++) {
        var element = document.createElement('iframe');
        //element.src = 't.html';
        element.src = 'http://www.youtube.com/embed/' + torchlight2s[i];
        element.style.cssText = " -webkit-transform: translateZ(0);   -moz-transform: translateZ(0);            -ms-transform: translateZ(0);                -o-transform: translateZ(0);              transform: translateZ(0);            -webkit-backface-visibility: hidden;          -moz-backface-visibility: hidden;         -ms-backface-visibility: hidden;        backface-visibility: hidden;         -webkit-perspective: 1000;          -moz-perspective: 1000;         -ms-perspective: 1000;           perspective: 1000;             ";
        element.width = 320;
        element.height = 200
        var object = new THREE.CSS3DObject(element);
        object.position.x = Math.random() * 4000 - 2000;
        object.position.y = Math.random() * 4000 - 2000;
        object.position.z = Math.random() * 4000 - 2000;
        scene.add(object);
        objects.push(object);
        var object = new THREE.Object3D();
        object.position.x = ( i * 340 ) - 240;
        object.position.y = ( j * 240 ) - 150;
        object.position.z = -100;
        //targets.grid.pop();
        grid.push(object);
        transform(grid, 2000);
    }
}

次に、これが呼び出されたときに、古いオブジェクトの一部を削除したいと思います。まったく機能するようになったら、削除する数を微調整します。

    function warframe() {

    var obj, i;
    for ( i = scene.children.length - 1; i >= 0 ; i -- ) {
        obj = scene.children[ i ];
        if ( obj !== camera) {
            scene.remove(obj);
        }
    }

    var j = 0;
    for (var i = 0; i < 3; i++) {
        var element = document.createElement('iframe');
        //element.src = 't.html';
        element.src = 'http://www.youtube.com/embed/' + warframes[i];
        element.style.cssText = " -webkit-transform: translateZ(0);   -moz-transform: translateZ(0);            -ms-transform: translateZ(0);                -o-transform: translateZ(0);              transform: translateZ(0);            -webkit-backface-visibility: hidden;          -moz-backface-visibility: hidden;         -ms-backface-visibility: hidden;        backface-visibility: hidden;         -webkit-perspective: 1000;          -moz-perspective: 1000;         -ms-perspective: 1000;           perspective: 1000;             ";
        element.width = 320;
        element.height = 200
        var object = new THREE.CSS3DObject(element);
        object.position.x = Math.random() * 4000 - 2000;
        object.position.y = Math.random() * 4000 - 2000;
        object.position.z = Math.random() * 4000 - 2000;
        scene.add(object);
        objects.push(object);
        var object = new THREE.Object3D();
        object.position.x = ( i * 340 ) - 240;
        object.position.y = ( j * 240 ) - 150;
        object.position.z = -100;
        //targets.grid.pop();
        grid.push(object);
        transform(grid, 2000);
    }
}