宿州做企业网站公司,旅游的网站怎么做,网站服务器安全配置,wordpress空间转移要求#xff1a;在透视相机模式下绘制一个图标#xff0c;图标大小始终为32*32px。图标如下#xff1a; 实现思路#xff1a;
使用THREE.Sprite。因为 SpriteMaterial 支持配置 sizeAttenuation 使Sprite大小不随相机的深度而衰减。所以我们只要保证sprite的初始的大小合适…要求在透视相机模式下绘制一个图标图标大小始终为32*32px。图标如下 实现思路
使用THREE.Sprite。因为 SpriteMaterial 支持配置 sizeAttenuation 使Sprite大小不随相机的深度而衰减。所以我们只要保证sprite的初始的大小合适在以后的相机深度变化的时候就不会改变大小了。
开始操作
第一次的操作
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: falsesprite不随相机的深度变化而变化那这个d就要有一个默认值。我盲猜这个默认值是1。那这个fov的值计算如下
Math.atan(0.5) * 180 / Math.PI * 2
这个值经过计算是53.13010235415598
现在我们设置相机fov为这个值去看一下效果 果然是满屏的。所以这个d确实是1.
找到了这个fov我们设计相机的fov为这个值现在我们去设置sprite的scale去改变Sprite的大小
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了。
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)
}
完成。
