如何在ThreeJS中将坐标原点设置为左上角而不是中心？
如何在ThreeJS中将坐标原点设置为左上角而不是中心？
提问于 2021-03-07 17:06:33
在ThreeJS中将任何对象添加到场景中时，默认情况下该对象位于中心。所以它的位置是(0,0,0)，尽管它是在中心绘制的。当坐标为(0,0,0)时，我需要在左上角设置默认位置。下面是一个非常简单的示例，显示默认坐标为中心中心：https://jsfiddle.net/qy3572dt/
var scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 50 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: 'red' } ) );
sprite.position.set(0,0,1);
scene.add( sprite );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();回答 1
Stack Overflow用户
发布于 2021-03-07 20:53:12
由于您使用的是精灵，因此只需更改Sprite.center即可。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
color: 'red'
}));
sprite.position.set(0, 0, 1);
sprite.center.set(0, 1);
scene.add(sprite);
scene.add(new THREE.AxesHelper());
renderer.render(scene, camera);body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/three@0.126.1/build/three.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66514801
复制相关文章
相似问题
腾讯云开发者
