无论与相机的距离如何,对象都在屏幕上保持相同的大小

菲尔

在 Three.js 中,我有一个远离相机的矩形,我如何计算 3D x 和 y 比例以应用于矩形,以便矩形在屏幕上以像素为单位保持相同的大小,无论距离多远从相机它是。

在这里,我制作了一个代码笔,显示矩形远离相机。我希望它在屏幕上保持相同的宽度和高度,无论它在 z 索引中有多远,这意味着矩形的 x 和 y 比例需要根据 z 轴上的距离而有所不同,这需要根据 z 索引动态发生。

我不知道如何计算这个,我怀疑它的一些函数将以下一些作为输入,z 索引偏移,物体的高度或宽度,相机的视野,纵横比,屏幕宽度和高度。最终的结果是物体看起来不会远离相机,即使它正在远离。

https://codepen.io/philip368320/pen/bGwJPvE

var width = window.innerWidth;
var height = window.innerHeight;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var cubeGeometry = new THREE.CubeGeometry(100, 100, 0.000001);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//cube.rotation.y = Math.PI * 45 / 180;
scene.add(cube);


var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.y = 0;
camera.position.z = 400;
camera.lookAt(cube.position);

scene.add(camera);

var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide });
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);

scene.add(skybox);

var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);

scene.add(pointLight);

var clock = new THREE.Clock();

var n = 0;

function render() {
  requestAnimationFrame(render);
  n = n + clock.getDelta() * 30;
  cube.position.z = -n;
  renderer.render(scene, camera);
}

render();
菲尔

基于https://stackoverflow.com/users/4045502/prisoner849在上面的评论中给出的信息,这是这个链接三个 JS 保持标签大小缩放,它讨论了一个保持文本标签大小相同的例子没有不管离相机多远。示例代码笔已更新为两个表面,一个表面远离相机,但在屏幕像素上保留其当前宽度和高度。因此,当它远离相机时,它在屏幕像素上保持相同的宽度和高度。“无论与相机的距离如何,对象都在屏幕上保持相同的大小”。那是cube1。另一个立方体 2 没有移动。

https://codepen.io/philip368320/pen/bGwJPvE

var width = window.innerWidth;
var height = window.innerHeight;

var useScaleFactor = true;
var scaleVector = new THREE.Vector3();

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var cubeGeometry = new THREE.CubeGeometry(100, 100, 0.000001);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
var cube1 = new THREE.Mesh(cubeGeometry, cubeMaterial);
var cube2 = new THREE.Mesh(cubeGeometry, cubeMaterial);
//cube.rotation.y = Math.PI * 45 / 180;
scene.add(cube1);
scene.add(cube2);


var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.y = 0;
camera.position.z = 400;
camera.lookAt(cube1.position);

scene.add(camera);

var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide });
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);

scene.add(skybox);

var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);

scene.add(pointLight);

var clock = new THREE.Clock();

var n = 0;


function render() {
  requestAnimationFrame(render);
  n = n + clock.getDelta() * 30;
  cube1.position.z = -n;
  cube2.position.x = 200;
  
  if (useScaleFactor) {
        var scaleFactor = 400.0;
        var scale = scaleVector.subVectors(cube1.position, camera.position).length() / scaleFactor;
        cube1.scale.set(scale, scale, 1);
  }
  
  renderer.render(scene, camera);
}

render();

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

调整窗口大小时如何保持对象大小相同

将图像保持在h1旁边,无论屏幕大小如何都居中

无论屏幕大小如何,都可以保持背景图像的响应能力

无论屏幕大小如何,都可以保持一致

无论屏幕大小如何,使div出现在相同位置

无论第一个输入的大小如何如何使2个输出保持一定距离?

如何设置相机与缩放对象的距离?

无论屏幕大小如何如何使某些短语显示在一行上

无论屏幕大小如何,如何使图像完全适合整个屏幕?

无论屏幕大小如何如何使svg占据屏幕的100%

如何保持android屏幕大小?

无论文本大小,都在相同的垂直位置获得文本底部

在移动设备上div如何保持相同的大小

无论iPad和iPhone中对象的大小如何,SpriteKit中的物理特性都相同

THREE.JS更新透视相机的fov值并保持相同的相机距离

ConstraintLayout 如何打包保持相同的距离比例

如何使动画视图与所有设备上的屏幕底部保持一致的距离?

如何避免使用 ID 在屏幕上复制相同的对象?

无论图像大小如何,如何保持按钮位置

CSS - 无论屏幕监视器如何,固定大小

CSS Position Divs是否以相同的增量增大,无论大小如何?

HTML / CSS大小相同,无论文本如何

当屏幕上的链接图像变小时,如何保持Bootstrap 4的大小?

如何使服务器上的屏幕保持与离开时相同的状态(分割完好)?

无论屏幕大小如何,如何使带有图像的表格适合屏幕?

如何获得导航栏以在所有设备上保持相同大小?

如何使用CSS将<div>放置在屏幕中央(无论屏幕大小)?

无论原始图片的大小如何,如何将帖子的WordPress Feature图片设置为相同的大小?

如何保持imageView不在屏幕上[Kotlin]