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

最近想要在页面上某个模型上面添加一个面板,展示该模型的详细详细,不管怎么调整照相机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))
}

PerspectiveCamera的四个参数为:

  1. fov:眼球张开的角度,0°时相当于闭眼。
  2. aspect:可视区域横纵比。
  3. near:眼睛能看到的最近垂直距离。
  4. far:眼睛能看到的最远垂直距离

将near参数调大到5时,我发现模型表面已经基本不会闪烁,问题解决。(如果还有一点点闪烁,再调大到6或7等慢慢调)

你可能感兴趣的:(问题,three.js)