threejs之 GridHelper

qq_37200686

已于 2023-05-16 15:46:22 修改

阅读量755

点赞数

分类专栏： webgl和threejs 文章标签： javascript

于 2023-05-16 15:17:46 首次发布

本文链接：https://blog.csdn.net/qq_37200686/article/details/130706071

版权

webgl和threejs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了在Three.js环境中，如何创建并使用GridHelper来辅助可视化。作者发现GridHelper默认是在XZ平面上，通过旋转GridHelper使其与XY平面对齐，以便观察和调试。同时，文中提到了PlaneGeometry、PerspectiveCamera和AxesHelper的使用。

摘要由CSDN通过智能技术生成

GridHelper

gridHelper为二维辅助网格，注意：这个二维不像其他threejs元素，如PlaneGeometry的二维为x轴和y轴。而gridHelper的二维为x轴和z轴组成的那个平面。

我自己在本地中绘制了一个Plane，还有3纬坐标轴axesHelper，和一个gridHelper，这三个元素的位置都为默认位置，camera的位置设置为（0，0，400），我们看一下呈现效果

可以看到，plan可以看到，而gridHelper则为和x轴重合的一根线，由此可以看出gridHelper 的二维是x和z轴组成的二维平面，所以，想要看到网格，我们需要移动camera或者gridHelper。但是我的网格辅助需要x和y轴组成的平面，所以我选择旋转gridHelper

代码如下：

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer({
    alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width,height);
canvasDom.appendChild(renderer.domElement);

camera = new THREE.PerspectiveCamera(
    70,
    width / height,
    1,
    1000
);
camera.pisition.set(0,150,400);

const light = new THREE.DirectionalLight(0xffeedd);
light.position.set(0,0,1000);
scene.add(light);

const plan = new THREE.PlaneGeometry(400,40);
const m = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const mesh = new THREE.Mesh(plan,m);
scene.add(mesh);

const axes = new THREE.AxesHelper(500);
scene.add(axes);

const gridHelper = new THREE.GridHelper( 400, 40, colorCenterLine, colorGrid );
gridHelper.rotateX(Math.PI / 2);
scene.add(gridHelper)

renderer.render(scene,camera);