threejs在透视相机模式下,绘制像素大小固定的元素

要求:在透视相机模式下绘制一个图标,图标大小始终为32*32px。图标如下:

实现思路:

使用THREE.Sprite。因为 SpriteMaterial 支持配置 sizeAttenuation 使Sprite大小不随相机的深度而衰减。所以我们只要保证sprite的初始的大小合适,在以后的相机深度变化的时候就不会改变大小了。

开始操作

第一次的操作:

javascript 复制代码
drawAddSprite(type: InterActiveType = InterActiveType.Default) {
    // 这个sprite我是自己用canvas画出来的,比较简单,就不贴了
    const texture = generateAddIconCanvasTexture(type);
    const material = new THREE.SpriteMaterial({ map: texture, sizeAttenuation: false });
    material.map.colorSpace = 'srgb';
    const sprite = new THREE.Sprite(material);
    scene.add(sprite)
}

我们看一下效果

我设置sizeAttenuation: false之前,我以为这个图标会占满屏(高度上满屏),毕竟这个图标跟相机没关系了。但是并没有。后来意识到sizeAttenuation: false 只是设置了相机的深度跟Sprite没有关系,但是透视相机的fov还是会影响到sprite的大小的。我们去验证一下,当我不断修改相机的fov时,图标随着fov的增大而减小。

思路:

  1. 第一步,我们找到一个fov值,在这个值下,我们看到的图标是占满屏幕的

  2. 在第一步的fov值下,我们要求图标大小是32*32的,那只需要设置Sprite的scale为 32 / canvas.clientHeight

我们来实现一下上面的思路:

  1. 我们来找这个fov

这个d就是相机的深度,既然设置了 sizeAttenuation: false,sprite不随相机的深度变化而变化,那这个d就要有一个默认值。我盲猜这个默认值是1。那这个fov的值计算如下

javascript 复制代码
Math.atan(0.5) * 180 / Math.PI * 2

这个值经过计算是53.13010235415598

现在我们设置相机fov为这个值去看一下效果

果然是满屏的。所以这个d确实是1.

找到了这个fov,我们设计相机的fov为这个值,现在我们去设置sprite的scale去改变Sprite的大小

javascript 复制代码
drawAddSprite(type: InterActiveType = InterActiveType.Default) {
    const texture = generateAddIconCanvasTexture(type);
    const material = new THREE.SpriteMaterial({ map: texture, sizeAttenuation: false });
    material.map.colorSpace = 'srgb';
    const sprite = new THREE.Sprite(material);
    const scale = 32 / canvas.clientHeight;
    sprite.scale.set(scale, scale, 1);
    scene.add(sprite)
}

看一下效果,已经实现了。

但是呢,我们如果我们的fov不是固定的怎么办呢,只需要加上如下配置就可以动态的根据fov去获得这个scale了。

javascript 复制代码
drawAddSprite(type: InterActiveType = InterActiveType.Default) {
    const texture = generateAddIconCanvasTexture(type);
    const material = new THREE.SpriteMaterial({ map: texture, sizeAttenuation: false });
    material.map.colorSpace = 'srgb';
    const sprite = new THREE.Sprite(material);
    const fullFov = ((Math.atan(0.5) * 180) / Math.PI) * 2;
    const { fov } = camera;
    let scale = 32 / dom.clientHeight;
    scale *= Math.tan((fov / 2 / 180) * Math.PI) / Math.tan((fullFov / 2 / 180) * Math.PI);
    sprite.scale.set(scale, scale, 1);
    scene.add(sprite)
}

完成。

相关推荐
陈小峰_iefreer1 小时前
stone 3d v3.3.0版本发布,含时间线和连接器等新功能
3d·webgl·metaverse·cadcg
supermapsupport1 天前
SuperMap GIS基础产品FAQ集锦(20250421)
服务器·webgl·supermap·idesktop
zhu_zhu_xia1 天前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
伶俜monster1 天前
光影编程师:Threejs Shader 基础全攻略
前端·webgl·three.js
烛阴2 天前
Swizzling--OpenGL的向量的灵活组合
前端·webgl
前端小崔2 天前
从零开始学习three.js(14):一文详解three.js中的场景Scene
webgl·three.js·数据可视化
烛阴2 天前
Vec--OpenGL的顶点基础
前端·webgl
该怎么办呢3 天前
webgl入门实例-11模型矩阵 (Model Matrix)基本概念
线性代数·矩阵·webgl
该怎么办呢3 天前
webgl入门实例-11WebGL 视图矩阵 (View Matrix)基本概念
数码相机·矩阵·webgl
KenXu3 天前
YYEVA WebGPU 渲染实现技术解析
前端·webgl