在 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] 删除。
我来说两句