Hello Babylonjs

王老急888

已于 2022-06-05 22:16:36 修改

阅读量281

点赞数

CC 4.0 BY-SA版权

文章标签： 3d

于 2022-06-05 19:57:55 首次发布

本文链接：https://blog.youkuaiyun.com/wanghao_sh/article/details/125135808

本文详细介绍了如何在Babylon.js中设置初始摄像机视角，包括理解ArcRotateCamera的参数、调整坐标系以便正确放置GroundMesh，以及运用DirectionalLight创建光源。这些基础知识对于初学者和进阶开发者都是不可或缺的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Babylonjs真的很酷！

找了好久，不知道怎么设定初始的观测角度，感觉就是调整camera的参数。仔细读了好几遍，原来就是通过。
https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction#arc-rotate-camera

const camera = new ArcRotateCamera(
  'camera',
  0,
  Math.PI / 3,
  20,
  new Vector3(0, 0, 0)
);
//camera.setPosition(new Vector3(0, 20, 20));

alpha设为0，beta设为Math.PI/3，即180度的1/3，即60度。注意！如果调用了setPosition方法，将会覆盖原有的alpha、beta值。

babylonjs的坐标系是左手系，即Z轴是从屏幕外指向屏幕里。
GroundMesh默认是XZ平面，需要将GroundMesh沿X轴逆时针翻转90度。

const ground = MeshBuilder.CreateGround('ground', {
  width: 5,
  height: 5,
});
ground.rotation.x = -Math.PI / 2;

使用DirectionalLight，光是从光源位置，即position位置指向direction位置。

const light = new DirectionalLight('dLight', new Vector3(0, 0, 10));
light.position = new Vector3(0, 0, -10);