1.用Babylon.js构建绿地

import React, { useEffect, useRef } from 'react';  
import * as BABYLON from 'babylonjs';  
  
const BabylonCanvas = () => {  
  const canvasRef = useRef(null);  
  
  useEffect(() => {  
    if (!canvasRef.current) return;  
  
    // 创建引擎  
    const canvas = canvasRef.current;  
    const engine = new BABYLON.Engine(canvas, true);  
  
    // 创建场景  
    const scene = new BABYLON.Scene(engine);  
  
    // 光源（可选）  
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);  
    light.intensity = 0.7;  
  
    // 相机初始位置应设置在绿地上方，朝向地面  
    const camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, 0, 20, BABYLON.Vector3.Zero(), scene); // 初始仰角-PI/2，水平角0，半径20  
    camera.attachControl(canvas, true);  
  
    // 限制相机的仰角范围，确保只能看到绿地以上（即天空和绿地上半部分）  
    camera.lowerBetaLimit &