threejs的学习理解（一）--- 相机

最新推荐文章于 2025-05-05 14:15:10 发布

一个金牛座的前端

最新推荐文章于 2025-05-05 14:15:10 发布

阅读量219

点赞数

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/vue6214/article/details/129752382

版权

threejs源码下载地址：Releases · mrdoob/three.js · GitHub

threejs主要分为场景，照相机，渲染器，控件

完整的步骤创建场景，创建几何体和材质，创建模型和灯光加在场景中，创建照相机和渲染器，渲染，加入控件实现拖拽，拖动和缩放。

完整实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./three.js-r139/build/three.js"></script>
  <script src="./three.js-r139/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
  <script >
    // 创建场景
    var scene = new THREE.Scene()
 
    // 创建几何体
    const geometry = new THREE.BoxGeometry(40,40,40)
 
 
    // 创建材质
    const material = new THREE.MeshPhongMaterial({
      color: 0x4fbbff
    })
 
    // 模型与材质建立连接
    const mesh = new THREE.Mesh(geometry,material)
    mesh.position.set(0,10,0);
    
    // 将模型放在场景中
    scene.add(mesh)
    // 世界坐标
    const axesHelper = new THREE.AxesHelper( 100 );
    scene.add( axesHelper );
 
    //灯光 环境光
    const ambient = new THREE.AmbientLight(0x00ffff,1)
    scene.add(ambient)
 
    // 点光源
    const light = new THREE.PointLight( 0xffffff, 1 );
    light.position.set(-400, -200, -300);
    scene.add( light );
    // 点光源辅助
    const pointLightHelper = new THREE.PointLightHelper( light, 1 );
    scene.add( pointLightHelper );
 
    // 创建相机
    const width = 800
    const height = 500
    const camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
    camera.position.set(200,200,200)
    camera.lookAt(10, 10, 10 )
 
 
    // 渲染
    const render = new THREE.WebGLRenderer()
    render.setSize(width,height)
 
    // 相机与场景建立连接
    render.render(scene,camera)
 
    document.body.appendChild( render.domElement );
 
    // 相机控件实现旋转缩放
    const controls = new THREE.OrbitControls(camera, render.domElement)
    controls.addEventListener('change' , function() {
      render.render(scene,camera)
    })
  </script>
</body>
</html>

相机

Threejs如果想把三维场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera，就像你生活中想获得一张照片，需要一台用来拍照的相机。

个人理解相机像是一个虚拟的立体空间，我们通过设置参数，去控制他的八个顶点的位置，将我们的场景放在这个立体的空间中去获取照片

一. 正投影相机 OrthographicCamera

正投影相机就像一个长方体可视化空间。

参数：

// 构造函数格式
OrthographicCamera( left, right, top, bottom, near, far )

// 正投影相机
const width = window.innerWidth; //canvas画布宽度
const height = window.innerHeight; //canvas画布高度
const k = width / height; //canvas画布宽高比
const s = 600;//控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);

二. 透视投影相机`PerspectiveCamera`

透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律，具有透视效果。与正投影相机相似，它像一个四棱台3D空间，透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体

参数：

PerspectiveCamera( fov, aspect, near, far )

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);