camera相机坐标分析

  camera位置的设置，在初始化camera时，一般都会先设置好它的3个属性，position/up/lookAt.以demo为例讲解一下这三个属性。在这之前，我们先了解一下three.js的坐标系，使用的是右手坐标系，如下图所示：
在这里插入图片描述
在这里插入图片描述
  右手坐标系，逆时针为正面，顺时针为反面
  就是这么有气质的手势~~大拇指指向x轴正方向，食指指向y轴正方向，中指指向z轴正方向。
  相机初始化代码如下：

camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 500;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({x : 0 ,y : 0, z : 0});
1.camera.position

  camera.position: 顾名思义，就是camera在坐标系中的所在位置，处于z轴正方向上离原点500处。

2.camera.lookAt

  位置设置后相机看向哪里呢？默认情况下，是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是我们由屏幕外向屏幕内看一样。改变.position属性后，如果不执行.lookAt()方法，相机的观察方向不变(相机看向的就是position的z值垂直向里看的方向)，因为改变.position属性只会改变相机对象视图矩阵的平移部分，只有执行.lookAt()方法才会从.position属性提取数据计算视图矩阵的旋转部分。如果设置了lookAt比如camera.lookAt({x : 0 ,y : 0, z : 0})这样相机就会看向原点。 另外，camera.up设置的方向必须与camera位置和lookAt的连线不能平行，否则拍不到场景，这个大家自己可以摆摆手势体会一下～

3.camera.up

  那么up又是干什么的呢，其实就是相机"头顶"朝向哪个方向，默认和y轴正方向同向。如下
在这里插入图片描述
  camera.up({x : 0 ,y : 0, z : 1})，如下相当于躺着看
在这里插入图片描述

  另外，camera.up设置的方向必须与camera位置和lookAt的连线不能平行，否则拍不到场景，这个大家自己可以摆摆手势体会一下～。向上面那个就会导致拍不到哦

4.新理解
  • 创建一个三维坐标系和一个圆台用来辅助显示up改变后渲染效果的改变
  • 场景插入三维坐标轴，用来查看up属性值改变渲染效果区别
  • 如果你想改变.up的属性值，需要先重置.up的属性值，然后执行.lookAt()方法。
  • 把相机对象.up属性默认值new THREE.Vector3(0,1,0)改为相反方向new
  • up方向和lookAt方向不能平行，不然会出现一些无法理解的情况产生（先这样理解）。

在这里插入图片描述

  THREE.Vector3(0,-1,0)，沿着y轴负方向，up改变后的渲染效果你可以看到，绿色y轴向下，与原来方向相反。

在这里插入图片描述
  代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>第一个three.js文件_WebGL三维场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <!-- <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> -->
  <script src="./js/three.js"></script>
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.CylinderGeometry( 2, 5, 40, 32 )
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(100, 100, 200); //设置相机位置
 
    
   camera.up.set(0, -1, 0);
   camera.lookAt(0,0,10); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    
    scene.add( new THREE.AxesHelper( 150 ) )
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
  </script>
</body>
</html>
# 前端 # javascript # html
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

手把手带你使用LangChain框架从0实现RAG，大模型入门到精通，收藏这篇就足够了！

本文将带大家用 LangChain 框架，结合向量数据库，构建一个简易的 RAG 系统，并完成一个端到端的问答任务。

avatar 2048 AI社区

NVIDIA Blackwell B200 与 Hopper H100 架构深度对比：技术迭代驱动算力市场格局重构

企业对算力的需求，促进了算力平台的发展，天罡智算平台（https://www.tiangangaitp.com）就是其中的佼佼者：提供弹性GPU算力，灵活选择GPU类型和数量，按需动态使用，打破固定时长租期的束缚，只需为实际使用的资源付费。预计至2025年底，在训练如DeepSeek 670B等大型MoE模型时，B200的每token能耗仅相当于H100的四分之一，从而在长期运行中带来显著的电力成

avatar 2048 AI社区
cover

深入 LangChain：大模型工程框架架构全解析，大模型入门到精通，收藏这篇就足够了！

avatar 2048 AI社区