threejs之 GridHelper

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);