three.js创建相机，正投影相机-OrthographicCamera和透视相机-PerspectiveCamera参数详解(vue中使用three.js06)

于 2020-09-02 01:08:21 发布
阅读量4.6k 收藏 9
点赞数 5
分类专栏： vue-three.js 文章标签： webgl js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw8704149/article/details/108351628
版权

相机介绍与相机示例

一、相机介绍

Three.js 库中提供了两种不同的相机，正投影相机和透视相机

1.正投影相机-OrthographicCamera

通过正投影相机渲染出来的物体的尺寸都一样，不会因为观察距离的远近而出现近大远小的情况
创建正投影相机的方式

var camera = new THREE.OrthographicCamera( left,right,top,bottom,near,far)

参数说明

参数描述
left左边界：可渲染部分的左边界
right右边界：可渲染部分的右边界
top上边界：可渲染部分的上边界
bottom下边界：可渲染部分的下边界
near近面：基于相机位置，表示从这里开始渲染场景；一般会设置一个很小的值，默认值0.1
far远面：基于相机位置，表示停止渲染的位置；要注意设置合适的距离，保证场景全部可见，默认值1000

在这里插入图片描述
创建正投影相机示例

var scene = new THREE.Scene();//创建场景
//创建正投影相机
var camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
camera.position.set(120, 60, 180); //设置相机位置
camera.lookAt(scene.position); //设置相机方向

2.透视相机-PerspectiveCamera

通过透视相机渲染物体和人们观察物体一样，渲染出来的物体会近大远小，就像观察火车轨道一样，给人的视觉感受是近处的轨道宽远处的窄
创建透视相机的方式
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far )

参数说明

参数描述
fov视场：即可以看到的角度范围，人的视场大约是180度，一般游戏的视场为60度到90度，推荐默认值45
aspect长宽比：这个是渲染结果输出区域的横向长度和纵向长度的比值；长宽比决定了水平视场和垂直视场之间的比例关系，推荐默认值：window.innerWidth/window.innerHeight
near近面：基于相机位置，表示从这里开始渲染场景；一般会设置一个很小的值，推荐默认值0.1
far远面：基于相机位置，表示停止渲染的位置；要注意设置合适的距离，如果设置太小，部分场景可能渲染不到，但如果设置的太大，会影响渲染的效率，默认值1000

在这里插入图片描述
创建透视相机示例

var scene = new THREE.Scene();//创建场景
//创建透视相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)；
camera.position.set(120, 60, 180); //设置相机位置
camera.lookAt(scene.position); //设置相机方向

二、相机参数演示示例

1.示例效果

在这里插入图片描述
在这里插入图片描述

示例功能：

  1. 可以通过单选按钮创建正投影相机或透视相机
  2. 选定相机类型后可以动态设置相机位置和相机方向的参数
  3. 创建不同类型的相机，相机参数展示对应相机类型的参数，以便调整查看参数对视图的影响

2.示例代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <div>
        <label>相机类型：</label>
        <el-radio v-model="cameraType" label="PerspectiveCamera" @change="radioChange">透视相机</el-radio>
        <el-radio v-model="cameraType" label="OrthographicCamera" @change="radioChange">正投影相机</el-radio>
      </div>
      <el-collapse accordion>
        <div>
          <el-collapse-item :title="item.name" v-for="(item,key) in properties" :key="key">
            <el-col v-for='(paramsItem,paramsItemKey) in item.params' :key="paramsItemKey">
              <el-col :span="5">
                <span class="vertice-span">{{paramsItem.name}}</span>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="paramsItem.value" :min="paramsItem.min" :max="paramsItem.max" :step="paramsItem.step" :format-tooltip="formatTooltip"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{paramsItem.value}}</span>
              </el-col>
            </el-col>
          </el-collapse-item>
        </div>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
  data () {
    return {
      cameraType: 'PerspectiveCamera',
      sliderProperties: {
        position: {
          name: '相机位置-position',
          params: {
            positionX: {
              name: 'x',
              value: 120,
              min: -1800,
              max: 1800,
              step: 1
            },
            positionY: {
              name: 'y',
              value: 60,
              min: -1800,
              max: 1800,
              step: 1
            },
            positionZ: {
              name: 'z',
              value: 180,
              min: -1800,
              max: 1800,
              step: 1
            }
          }
        },
        lookAt: {
          name: '相机方向',
          params: {
            lookAtX: {
              name: 'x',
              value: 0,
              min: -180,
              max: 180,
              step: 1
            },
            lookAtY: {
              name: 'y',
              value: 0,
              min: -180,
              max: 180,
              step: 1
            },
            lookAtZ: {
              name: 'z',
              value: 0,
              min: -180,
              max: 180,
              step: 1
            }
          }
        },
        PerspectiveCameraParams: {
          name: '相机参数',
          params: {
            fov: {
              name: '视场',
              value: 45,
              min: 0,
              max: 360,
              step: 1
            },
            aspect: {
              name: '长宽比',
              value: 2,
              min: 0.1,
              max: 10,
              step: 0.1
            },
            near: {
              name: '近面',
              value: 0.1,
              min: 0.1,
              max: 100,
              step: 0.1
            },
            far: {
              name: '远面',
              value: 1000,
              min: 100,
              max: 10000,
              step: 10
            }
          }
        },
        OrthographicCameraParams: {
          name: '相机参数',
          params: {
            left: {
              name: '左边界',
              value: -150,
              min: -1000,
              max: 0,
              step: 1
            },
            right: {
              name: '右边界',
              value: 230,
              min: 0,
              max: 1000,
              step: 1
            },
            top: {
              name: '上边界',
              value: -50,
              min: -500,
              max: 0,
              step: 1
            },
            bottom: {
              name: '下边界',
              value: 360,
              min: 0,
              max: 500,
              step: 1
            },
            near: {
              name: '近面',
              value: 200,
              min: -1000,
              max: 100,
              step: 10
            },
            far: {
              name: '远面',
              value: 300,
              min: 100,
              max: 10000,
              step: 10
            }
          }
        }
      },
      planeGeometry: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  computed: {
    properties () {
      let obj = {}
      for (let key in this.sliderProperties) {
        if (
          this.sliderProperties[key].name !== '相机参数' ||
          !key.indexOf(this.cameraType)
        ) {
          obj[key] = this.sliderProperties[key]
        }
      }
      return obj
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    formatTooltip (val) {
      return val
    },
    radioChange (value) {
      if (value === 'PerspectiveCamera') {
        this.sliderProperties.lookAt.params.lookAtX.value = 0
        this.sliderProperties.lookAt.params.lookAtY.value = 0
        this.sliderProperties.lookAt.params.lookAtZ.value = 0
      } else {
        this.sliderProperties.lookAt.params.lookAtX.value = 25
        this.sliderProperties.lookAt.params.lookAtY.value = -135
        this.sliderProperties.lookAt.params.lookAtZ.value = 70
      }
    },
    // 初始化
    init () {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createCube() // 创建方块
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene () {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh () {
      this.planeGeometry = new THREE.PlaneGeometry(180, 180) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
      }) // 材质对象Material
      const plane = new THREE.Mesh(this.planeGeometry, planeMaterial)

      // 设置平面位置
      plane.rotation.x = -0.5 * Math.PI
      plane.position.set(0, 0, 0)
      plane.receiveShadow = true

      // 平面对象添加到场景中
      this.scene.add(plane)
    },
    // 创建光源
    createLight () {
      // 创建方向光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7)
      directionalLight.position.set(-20, 40, 60)
      this.scene.add(directionalLight)

      // 环境光
      const ambientLight = new THREE.AmbientLight(0x292929)
      this.scene.add(ambientLight)
    },
    // 创建相机
    createCamera () {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)

      this.camera.position.set(120, 60, 180) // 设置相机位置
      console.log(this.scene.position)
      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender () {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.setClearColor(0xeeeeee, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    // 更新相机属性
    updateCameraProperties () {
      if (this.cameraType === 'PerspectiveCamera') {
        this.camera = new THREE.PerspectiveCamera(
          this.sliderProperties.PerspectiveCameraParams.params.fov.value, // 视场
          this.sliderProperties.PerspectiveCameraParams.params.aspect.value, // 长宽比
          this.sliderProperties.PerspectiveCameraParams.params.near.value, // 近面
          this.sliderProperties.PerspectiveCameraParams.params.far.value // 远面
        )
        this.camera.position.set(
          this.sliderProperties.position.params.positionX.value,
          this.sliderProperties.position.params.positionY.value,
          this.sliderProperties.position.params.positionZ.value
        )
        this.camera.lookAt(
          new THREE.Vector3(
            this.sliderProperties.lookAt.params.lookAtX.value,
            this.sliderProperties.lookAt.params.lookAtY.value,
            this.sliderProperties.lookAt.params.lookAtZ.value
          )
        )
      } else {
        this.camera = new THREE.OrthographicCamera(
          this.sliderProperties.OrthographicCameraParams.params.left.value, // 左边界
          this.sliderProperties.OrthographicCameraParams.params.right.value, // 右边界
          this.sliderProperties.OrthographicCameraParams.params.top.value, // 上边界
          this.sliderProperties.OrthographicCameraParams.params.bottom.value, // 下边界
          this.sliderProperties.OrthographicCameraParams.params.near.value, // 近面
          this.sliderProperties.OrthographicCameraParams.params.far.value // 远面
        )
        this.camera.position.set(
          this.sliderProperties.position.params.positionX.value,
          this.sliderProperties.position.params.positionY.value,
          this.sliderProperties.position.params.positionZ.value
        )
        this.camera.lookAt(
          new THREE.Vector3(
            this.sliderProperties.lookAt.params.lookAtX.value,
            this.sliderProperties.lookAt.params.lookAtY.value,
            this.sliderProperties.lookAt.params.lookAtZ.value
          )
        )
        this.planeGeometry.scale = new THREE.Vector3(20, 20, 20)
      }
    },
    createCube () {
      const cubeGeometry = new THREE.BoxGeometry(4, 4, 4) // 创建几何对象geom

      for (let j = 0; j < this.planeGeometry.parameters.height / 5; j++) {
        for (let i = 0; i < this.planeGeometry.parameters.width / 5; i++) {
          const rnd = Math.random() * 0.75 + 0.25
          const cubeMaterial = new THREE.MeshLambertMaterial() // 创建材质对象material
          cubeMaterial.color = new THREE.Color(rnd, 0, 0)
          const cube = new THREE.Mesh(cubeGeometry, cubeMaterial) // 创建网格对象cube

          cube.position.z =
            -(this.planeGeometry.parameters.height / 2) + 2 + j * 5
          cube.position.x =
            -(this.planeGeometry.parameters.width / 2) + 2 + i * 5
          cube.position.y = 2

          this.scene.add(cube) // 将网格对象添加到场景
        }
      }
    },
    render () {
      this.updateCameraProperties()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls () {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值