0

无法从场景中移除对象。使用javascriptthreejs，我相信threejs使用css3d在3d中渲染DOM元素

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

是我试图用来删除对象的代码。我在另一个stackoverflow帖子上发现了这一点。

这是我的更多代码：

这是将一些对象添加到场景中的地方

    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);
    }
}
4

0 回答 0