threejs加入精灵模型sprite时不管坐标在哪里都会被其他模型遮挡怎么回事，模型出现不停闪烁问题

小半 • 2023年1月22日下午6:40 • 技术随笔 • 阅读 306

最近想要在页面上某个模型上面添加一个面板，展示该模型的详细详细，不管怎么调整照相机camera，都要使面板朝向我们的显示屏，这个时候使用精灵模型sprite最为合适。

	var texture = new THREE.TextureLoader().load("/model/img/station101.png")
    // 创建精灵材质对象SpriteMaterial
    var spriteMaterial = new THREE.SpriteMaterial({
        color:0xffffff,//设置精灵矩形区域颜色
        map: texture,//设置精灵纹理贴图
        transparent: true,
        opacity: 0.5
    })
    // 创建精灵模型对象，不需要几何体geometry参数
    var sprite = new THREE.Sprite(spriteMaterial)
    sprite.name = 'label-sprite'
    scene.add(sprite);

可是，当我在场景scene添加sprite时，一直都找不到精灵模型面板，只有调整角度当背景为默认scene的黑色时，才会看到sprite。

起初，我一直以为时我材质的参数设置有问题，然后在网上找到的都是和我一样。后来分析发现，这种问题的原因是和渲染器render起了冲突。起因就是我在渲染器使用了深度缓冲logarithmicDepthBuffer

// 渲染器
function initRenderer() {
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        logarithmicDepthBuffer: true
    })
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.getElementById("3d-container").appendChild(renderer.domElement)
}

将 logarithmicDepthBuffer: true 注释掉就可以了。

但是，我设置深度缓冲logarithmicDepthBuffer是为了解决模型的谍影闪烁（模型的重叠部分会不停的闪烁问题）。难道说在清晰度和精灵模型之间我只能两者取一了吗，鱼与熊掌不可兼得？

后来又发现，解决谍影闪烁不一定要使用暴力的logarithmicDepthBuffer，只需要修改camera的参数就可以了

// 相机
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 3000);
    camera.position.set(-96, 1120, 965)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
}