Three.js - 透视相机（PerspectiveCamera）（三）

简介

在three.js中，摄像机的作用就是不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景，就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机（PerspectiveCamera） 它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。

透视相机(`PerspectiveCamera`)

属性

大多数属性发生改变之后，都需要调用.updateProjectionMatrix()来使得这些改变生效。
常见属性：

.fov、.aspect、.near、.far 后期可修改这四个参数，来实现动画效果。
.zoom 获取或者设置摄像机的缩放倍数，默认值为1

方法

常见方法：

.setViewOffset() 设置偏移量，对于多窗口或者多显示器的设置是很有用的。
.clearViewOffset() 清除任何由.setViewOffset()设置的偏移量。
.getEffectiveFOV() 结合.zoom（缩放倍数），以角度返回当前垂直视野角度。
.updateProjectionMatrix() 更新摄像机投影矩阵。在任何参数被改变以后必须被调用。

位置

PerspectiveCamera对象的基类是Object3D，它具有:

.position 设置相机在三维坐标中的位置。

 camera.position.set(0,0,0);

.up 设置相机拍摄时相机头顶的方向。

 camera.up.set(0,1,0);

.lookAt 设置相机拍摄时指向的方向。

camera.lookAt(0, 0, 0);

开始使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>学习</title></head><body><canvas id="c2d" class="c2d" width="1000" height="500"></canvas><script type="module">import * as THREE from 'https://threejs.org/build/three.module.js'const canvas = document.querySelector('#c2d')// 渲染器const renderer = new THREE.WebGLRenderer({ canvas })const fov = 40 // 视野范围const aspect = 2 // 相机默认值 画布的宽高比const near = 0.1 // 近平面const far = 1000 // 远平面// 透视投影相机const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)camera.position.set(0, 10, 20)camera.lookAt(0, 0, 0)// 场景const scene = new THREE.Scene()scene.background = new THREE.Color('black'){// 地面 平铺const planeSize = 20const loader = new THREE.TextureLoader()const texture = loader.load('https://threejs.org/manual/examples/resources/images/checker.png')texture.wrapS = THREE.RepeatWrappingtexture.wrapT = THREE.RepeatWrappingtexture.magFilter = THREE.NearestFilterconst repeats = planeSize / 2texture.repeat.set(repeats, repeats)const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize)const planeMat = new THREE.MeshPhongMaterial({map: texture,side: THREE.DoubleSide})const mesh = new THREE.Mesh(planeGeo, planeMat)mesh.rotation.x = Math.PI * -0.5scene.add(mesh)}{// 方块const cubeSize = 4const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize)const cubeMat = new THREE.MeshPhongMaterial({ color: '#8f4b2e' })const mesh = new THREE.Mesh(cubeGeo, cubeMat)mesh.position.y = 2scene.add(mesh)}{// 灯光const color = 0xffffffconst intensity = 1// 方向光const light = new THREE.DirectionalLight(color, intensity)light.position.set(0, 10, 0)light.target.position.set(-5, 0, 0)scene.add(light)scene.add(light.target)}// 渲染function render() {renderer.render(scene, camera)requestAnimationFrame(render)}requestAnimationFrame(render)</script></body>
</html>

本节我们详细了解透视相机，其他内容只需要先熟悉。

修改相机

在页面上添加按钮，修改相机。
需要注意的是透视相机的矩阵信息修改后，都需要执行.updateProjectionMatrix()来应用改变。

    ...<canvas id="c2d" class="c2d" width="1000" height="500"></canvas><input id="onPosition" type="button" value="移动位置" /><input id="onView" type="button" value="修改视野范围" />...// 透视投影相机...// 点击 移动相机document.querySelector('#onPosition').addEventListener('click', function () {camera.position.set(0, 20, 20)})// 点击 修改相机 视野范围document.querySelector('#onView').addEventListener('click', function () {camera.fov = 20camera.updateProjectionMatrix()})...

添加相机控件

Three.js提供了许多控件OrbitControls是最常用的相机控件。

...
import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js'
...// 透视投影相机
...// 控制相机
const controls = new OrbitControls(camera, canvas)
...// 渲染
function render() {controls.update()...
}

添加相机辅助线

Three.js提供了一个函数(CameraHelper)用于模拟相机视锥体。要展示模拟相机视锥体，需要两个相机才能查看。

...
<input id="cameraBol" type="button" value="切换相机" />...
// 场景
...
// 辅助相机
const camera1 = new THREE.PerspectiveCamera(20, aspect, 10, 50)
camera1.position.set(0, 5, 20)
camera1.lookAt(0, 0, 0)
const cameraHelper = new THREE.CameraHelper(camera1)
// 辅助线加入 场景
scene.add(cameraHelper)
let cameraBol = true
// 点击 切换相机
document.querySelector('#cameraBol').addEventListener('click', function () {cameraBol = !cameraBol
})
...// 渲染
function render() {...cameraHelper.update()if (cameraBol) {renderer.render(scene, camera)} else {renderer.render(scene, camera1)}...
}

黄色线的范围表示相机视锥体的范围
这里通过切换渲染器传入的相机参数，来展示辅助相机需要渲染的内容。

Three.js - 透视相机（PerspectiveCamera）（三）相关推荐

针孔相机（透视相机模型）
大多数运动结构(线性和非线性)技术都是从假设透视投影模型开始的,如图 3所示,该模型可以追溯到 Durer 和文艺复兴时期的画家.替代投影模型包括副透视或正交案例.在这里,三个 3D 特征点投影到图像 ...
js声明变量的三种方式
JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用正确用法: <script type="text/javascript"> ...
[js] setTimeout的第三个参数有什么用？
[js] setTimeout的第三个参数有什么用? 第三个参数将作为定时器到期触发的函数的参数个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...
java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
Auto.js 全命令整理(三) 输出专题
Auto.js 全命令整理(三) 输出专题目录 Auto.js 全命令整理(三) 输出专题 Console Toast Dialogs 末各种输出方法,让你了解程序现在在干什么- Console ...
Android开发-WebView中实现Android调用JS JS调用Android 【三】
老早之前就想总结下Webview相关的知识点了,因为互联网大潮中,很多APP都会使用到Webview,像那些不计其数的电商APP,无一例外的使用Webview:或者一些非电商APP中的像广告页面,注册 ...
JS 流行库（三）：Zepto
JS 流行库(三):Zepto Zepto 框架是一个类似于 jQuery 的轻量级框架,抛弃了低级浏览器的适配问题,所以体积更小,如果会使用 jQuery,那么基本上也会使用 Zepto,jQuer ...
相机标定(三)——手眼标定
相机标定(一)--内参标定与程序实现相机标定(二)--图像坐标与世界坐标转换相机标定(三)--手眼标定一.简述手眼标定目的在于实现物体在世界坐标系和机器人坐标系中的变换. 在标定时,一般在工作 ...
前端点滴（JS进阶）（三）---- JavaScript 两链一包
前端点滴(JS进阶)(三)----倾尽所有一.作用域链 1. 作用域的概念 2. 作用域链二.面向对象编程 1. 知识回顾 2. 定义对象 (1)new 内置对象 (2)直接量语法 (3)Es5 ...
Three.js漫游相机控制器/three.js第三人称视角漫游/three.js第一人称视角漫游
Three.js三维可视化引擎没有实现第三人称漫游控制器,第一人称实现的也很一般,大部分满足不了需求,需要自己手动去写一个.以下是模仿其它平台写的第三人称视角漫游,也可以简便的改写成第一人称. 下面是 ...

Three.js - 透视相机（PerspectiveCamera）（三）

简介

透视相机(`PerspectiveCamera`)

属性

方法

位置

开始使用

修改相机

添加相机控件

添加相机辅助线

Three.js - 透视相机（PerspectiveCamera）（三）相关推荐

最新文章

热门文章

Three.js - 透视相机（PerspectiveCamera）（三）

简介

透视相机(PerspectiveCamera)

属性

方法

位置

开始使用

修改相机

添加相机控件

添加相机辅助线

Three.js - 透视相机（PerspectiveCamera）（三）相关推荐

最新文章

热门文章

透视相机(`PerspectiveCamera`)