时间戳

首页 > 解决方案 > 从场景中移除的三个.js 对象仍在显示中

javascript - 从场景中移除的三个.js 对象仍在显示中

问题描述

我正在尝试在three.js 中将一些文本显示为精灵，并希望使用对象移动精灵。所以我使用画布来创建用于映射 SpriteMaterial 的纹理，然后从中创建精灵。然后，当我移动对象并添加一个带有更新文本的新对象时，我删除了精灵。但问题是，即使在移除之后，移除的精灵仍然会显示。另外我想知道是否有更好的方法来执行我想做的事情。这是我创建精灵的代码：

function makeTextSprite(theMessage, theParameters) {
    if (theParameters === undefined) theParameters = {
    };

    var fontface = theParameters.hasOwnProperty("fontface") ?
       theParameters["fontface"] : "Arial";

    var fontsize = theParameters.hasOwnProperty("fontsize") ?
       theParameters["fontsize"] : 18;

    var borderThickness = theParameters.hasOwnProperty("borderThickness") ?
       theParameters["borderThickness"] : 4;

    var borderColor = theParameters.hasOwnProperty("borderColor") ?
       theParameters["borderColor"] : {
          r: 0, g: 0, b: 0, a: 1.0
       };

    var backgroundColor = theParameters.hasOwnProperty("backgroundColor") ?
       theParameters["backgroundColor"] : {
          r: 255, g: 255, b: 255, a: 1.0
       };

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.font = "Bold " + fontsize + "px " + fontface;

    // get size data (height depends only on font size)
    var metrics = context.measureText(theMessage);
    var textWidth = metrics.width;

    // background color
    context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + ","
                           + backgroundColor.b + "," + backgroundColor.a + ")";
    // border color
    context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + ","
                           + borderColor.b + "," + borderColor.a + ")";

    context.lineWidth = borderThickness;


    // text color
    context.fillStyle = "rgba(255, 0, 0, 1.0)";

    context.fillText(theMessage, borderThickness, fontsize + borderThickness);

    // canvas contents will be used for a texture
    var texture = new THREE.Texture(canvas)
    texture.needsUpdate = true;

    var spriteMaterial = new THREE.SpriteMaterial(
          {
             map: texture, useScreenCoordinates: true
          });
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(100, 50, 1.0);
    return sprite;
 }

这是我更新精灵文本和位置的代码：function setCoordinatePosition()

{
    if(scene.getObjectByName('text')!=undefined)
    {
        scene.remove("text");
    }

    var sliderValue = document.getElementById("slider").getElementsByTagName("input")[0].value;
    var coordinate_info = "(" + (vx/100)*sliderValue + ", " + (vy/100)*sliderValue + ", " + (vz/100)*sliderValue + ")";  
    text = makeTextSprite(coordinate_info,{ fontsize: 50, borderColor: { r: 0, g: 0, b: 0, a: 1.0 }, backgroundColor: { r: 255, g: 255, b: 255, a: 0.8 } , borderThickness: 5});
    text.name = "text";
    scene.add(text);
    text.position.set(sphere.position.x,sphere.position.y,sphere.position.z);

    text.position.y += 5;
    render();
}

这是我得到的结果： 在此处输入图像描述

我希望那个红色文本显示黄色球体的坐标并跟随它。

标签： javascripthtmlthree.js

解决方案

Scene.remove 需要对对象的引用，而不是名称

scene.remove(scene.getObjectByName('text'));

代替

scene.remove("text");

场景是 Object3D 的一个实例，所以它使用这个方法

如果您要实现的是将文本与球体一起移动，则可以使用此方法简单地将文本添加为​​球体的子项。您还必须调整相对位置。

sphere.add(textSprite)

推荐阅读