initCannon() {
        //这里是生成高度场的代码
    var matrix = [];//创建构造高度场的数组
    for (var i = 0; i < size; i++) {
        matrix.push([]);
        for (var j = 0; j < size; j++) {
                        //高度由两个余弦函数叠加形成
            var height = Math.cos(i / size * Math.PI * 8) * Math.cos(j / size * Math.PI * 8);
            matrix[i].push(height)
        }
    }
    var hfShape = new CANNON.Heightfield(matrix, {
        elementSize: 1 //数据点的距离设置为1
    });
    var hfBody = new CANNON.Body({ mass: 0, material: physicsMaterial});
    var q = new CANNON.Quaternion();
    q.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), - Math.PI / 2);
    hfBody.addShape(hfShape, new CANNON.Vec3(-size / 2, 0, size / 2), q);//由于这个高度场是XOY平面第一象限上，所以需要旋转和平移，addShape方法为我们提供了这个功能。
    world.addBody(hfBody);
},
initThree() {
        //使用ParametricBufferGeometry配合Heightfield形成网格
    var groundGeom = new THREE.ParametricBufferGeometry((u,v,target) => {
        var height = Math.cos(u * Math.PI * 8) * Math.cos(v * Math.PI * 8);//这里的方法和生成高度场的方法是一样的，不了解ParametricBufferGeometry几何体的可以参考我之前发的博客。
        target.set(u * size - size / 2, height, v * size - size / 2);
    }, size, size)
    let groundMate = new THREE.MeshPhongMaterial({color: 0x666666, side: THREE.DoubleSide});
    groundMesh = new THREE.Mesh(groundGeom, groundMate);
    scene.add(groundMesh);
},