ThreeJs:添加一个总是面向透视相机的Gridhelper
ThreeJs:添加一个总是面向透视相机的Gridhelper
提问于 2022-09-22 04:30:16
我有一个threejs场景视图，包含一个网格，一个透视相机，在其中我移动相机与OrbitControls。
我需要在threejs视图上添加一个测量网格，它“面向”我的透视相机。
它通过在网格助手上应用Pi/2的xRotation来“启动”以下代码
window.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 300 );
window.camera.position.z = 150;
window.grid1 = new THREE.GridHelper(500, ~~(500 * 2))
window.grid1.material.transparent = true;
window.grid1.material.depthTest = false;
window.grid1.material.blending = THREE.NormalBlending;
window.grid1.renderOrder = 100;
window.grid1.rotation.x = Math.PI / 2;
window.scene.add(window.grid1);
window.controls = new OrbitControls(window.camera, window.renderer.domElement );
window.controls.target.set( 0, 0.5, 0 );
window.controls.update();
window.controls.enablePan = false;
window.controls.enableDamping = true;但是，一旦我开始用轨道控制移动，网格助手就不会与摄像机保持一致。
我试着在renderLoop上使用
window.grid1.quaternion.copy(window.camera.quaternion);和
window.grid1.lookAt(window.camera.position)这似乎部分地起作用了，网格助手在“地板”上对齐，而不是面对摄像机。
我怎样才能做到这一点？
温柔点，我从threejs开始:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-22 05:10:29
这有点麻烦，但是您可以将网格封装在一个THREE.Group中，然后旋转它：
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 300 );
camera.position.z = 150;
const grid1 = new THREE.GridHelper(500, ~~(500 * 2));
grid1.material.transparent = true;
grid1.material.depthTest = false;
grid1.material.blending = THREE.NormalBlending;
grid1.renderOrder = 100;
grid1.rotation.x = Math.PI / 2;
const gridGroup = new THREE.Group();
gridGroup.add(grid1);
scene.add(gridGroup);
// ...然后，在呈现循环中，使组面向摄像机(而不是网格)：
gridGroup.lookAt(camera.position)这是因为它在某种程度上模拟了在THREE.Plane中设置正常的行为。GridHelper被旋转为垂直于摄像机，并且它被包装成一组没有旋转。因此，通过旋转这个组，网格总是被偏移，这样它就垂直于摄像机。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73814681
复制相关文章
![关于在eclipse中中文汉字乱码的解决方式[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/f9d22e6e1401fe93c69992e133ae69a6.jpeg)
点击加载更多
相似问题
在AJAX和excel中显示汉字
在WPF中突出显示/characters行
无法在Qt-Embedded 4.7.3中显示汉字
在php中如何显示汉字？
在HTML文件中显示汉字
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
