1.用Babylon.js构建绿地

一只灰灰子

已于 2024-05-02 18:23:58 修改

阅读量101

点赞数 3

分类专栏： 3D场景构建文章标签： javascript 开发语言 ecmascript

于 2024-05-02 18:17:14 首次发布

本文链接：https://blog.csdn.net/a_huihuizi/article/details/138396781

版权

3D场景构建专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 = 0; // 0度，即与地面平行  
    camera.upperBetaLimit = Math.PI / 2; // 90度，即垂直向上  
  
    // 添加绿地  
    const ground = BABYLON.Mesh.CreateGround("ground", 100, 100, 2, scene);  
    ground.material = new BABYLON.StandardMaterial("groundMaterial", scene);  
    ground.material.backFaceCulling = false;  
    ground.material.diffuseColor = new BABYLON.Color3(0.1, 0.6, 0.1); // 绿地颜色  
  
    // 渲染循环  
    engine.runRenderLoop(() => {  
      scene.render();  
    });  
  
    // 窗口大小变化时调整渲染大小  
    window.addEventListener('resize', () => {  
      engine.resize();  
    });  
  
    return () => {  
      // 清理资源  
      engine.dispose();  
    };  
  }, []);  
  
  return <canvas ref={canvasRef} style={{ width: '100%', height: '500px' }} />;  
};  
  
export default BabylonCanvas;

效果图：