projectVector结果不在-1和1之间(three.js)
projectVector结果不在-1和1之间(three.js)
提问于 2013-03-07 04:27:30
注意:下面的代码使用WestLangley的修复进行了更新。
我已经尝试了几个从3D投影到2D的例子。然而，当我尝试使用projectVector时，结果不是在-1和1之间，所以当我乘以窗口的宽/高时，我得到了非常大的数字(远远大于我的屏幕分辨率)。希望我的问题是简单的。我使用的是three.min.js r56，我的内部窗口尺寸是1366x418。
以下代码为3D点(1200,625,100)生成投影(x，y)：(-7.874704599380493，-13.403168320655823)。我知道我仍然需要将这个结果乘以窗口高度和宽度的一半，但是结果(x，y) (以像素为单位)远远超出了屏幕。
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="three.min.js"></script>
</head>
<body>
<canvas id='container'></canvas>
<script>
/// GLOBAL VARIABLES
var camera, scene, renderer, container, projector;
init();
function toXYCoord (object) {
var vector = projector.projectVector(object.position.clone(), camera);
return vector;
}
/// INIT
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 20000 );
scene.add(camera);
camera.position.set(0,-1500,1500);
camera.lookAt(scene.position);
camera.updateMatrixWorld(); ///////////////// THIS IS THE FIX
projector = new THREE.Projector();
// sphere
var sphere = new THREE.Mesh( new THREE.SphereGeometry( 200, 32, 16 ), new THREE.MeshBasicMaterial({ color: 0x000000 }) );
sphere.position.set(1200,625,100);
scene.add(sphere);
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer( { canvas: container, antialias:true } );
renderer.setSize( window.innerWidth, window.innerHeight );
var testVector = toXYCoord(sphere);
console.log(window.innerWidth + "x" + window.innerHeight);
console.log("Got: (" + testVector.x + "," + testVector.y + ")");
renderer.render( scene, camera );
}
</script>
</body>
</html>Stack Overflow用户
回答已采纳
发布于 2013-03-07 10:10:30
渲染器会为您执行一些通常在渲染循环中完成的计算。
在您的例子中，它们没有完成，因为您已经将对render()的单个调用作为脚本的最后一行。
您需要将以下行放在camera.lookAt()之后
camera.updateMatrixWorld();或者，您可以将您的
renderer.render( scene, camera );调用，以便它在调用toXYCoord()函数之前发生。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15257305
复制相关文章
相似问题
腾讯云开发者
