最近想要在页面上某个模型上面添加一个面板,展示该模型的详细详细,不管怎么调整照相机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的四个参数为:
- fov:眼球张开的角度,0°时相当于闭眼。
- aspect:可视区域横纵比。
- near:眼睛能看到的最近垂直距离。
- far:眼睛能看到的最远垂直距离
将near参数调大到5时,我发现模型表面已经基本不会闪烁,问题解决。(如果还有一点点闪烁,再调大到6或7等慢慢调)