《Three.JS零基础入门教程》----之相机详解

于 2024-09-05 10:31:07 发布
阅读量758 收藏 18
点赞数 23
分类专栏： threejs 文章标签： 数码相机 javascript 开发语言 threejs 三维 三维中相机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cui137610/article/details/141924490
版权

下面介绍three.js相机：

一、简介

为了在二维平面呈现三维效果, 我们需要一个观察者, 在二维平面上绘制出观察者看到的三维世界这个观察者就是相机。

相机用于决定场景中哪些部分能被看到，以及如何呈现它们。它类似于真实摄像机的存在。

相机有很多属性，比如位置、目标（或注视点）、视角（FOV）、近面和远面等。这些属性共同决定了相机如何看待场景中的物体，并形成最终的渲染结果。

为了描述一个观察者, 我们需要考虑这样两个问题

·观察方向: 观察者在哪里, 他沿着哪个方向在观察, 看向什么

·可视范围: 太近, 太远, 太偏的物体都看不到

1) 如何描述观察方向

为了描述观察方向, 有几个概念需要理解

·视点(eye point): 观察点的位置

·目标点(lookat point): 观察目标所在的位置

·观察方向(viewing direction): 从视点出发到目标点的射线, 也叫视线

为了在二维平面上绘制, 还需要确定上方向(up direction)

图片

如果我们调整上方向, 最终看到的效果就不同

图片

2) 如何描述可视范围

那如何描述可视范围呢?

·视角(fov): 可以看到的水平, 垂直的角度

·近裁截面(near): 可以看到的最近距离

·远裁截面(far): 可以看到的最远距离

由视角近面远面构成了可视空间(view volume).

常见的可视空间有两种

·长方体可视空间, 由正射投影(orthographic projection)产生

·四棱锥可视空间, 由透视投影(perspective projection)产生

图片

图片

二、透视相机详解

透视相机主要模拟人的视角, 一般观察物体, 会呈现近大远小的特征

图片

1) 相机参数

在初始化创建相机时, 可以设置4个参数

·fov: 垂直方向的视角

·aspect: 宽高比, 水平方向的视角

·near: 近截面

·far: 远截面

下面通过一个示例, 可视化调整相机的参数帮助大家理解每个参数的作用

const camera = new THREE.PerspectiveCamera(45, 2, 10, 20)

// 设置视点
camera.position.set(0, 0, 5)
// 设置观察点
camera.lookAt(0, 0, 0)
 

使用相机可视化工具动态调整参数, 观察相机的变化

import * as THREE from 'three'
import { BaseGui } from './BaseGui'

function cameraHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateProjectionMatrix()
  parent.update()
}

const cameraConfig = {
  fov: {
    name: '可视角度',
    extend: [0, 180],
    handler: cameraHandler,
  },
  aspect: {
    name: '宽高比',
    extend: [1, 3],
    step: 0.1,
    handler: cameraHandler,
  },
  near: {
    name: '近截面',
    extend: [0.1, 20],
    handler: cameraHandler,
  },
  far: {
    name: '远截面',
    extend: [10, 50],
    handler: cameraHandler,
  },
}

export class CameraGui extends BaseGui {
  constructor(options = {}) {
    if (!options.target.isCamera) {
      console.error('target must be an instance of Camera')
      return
    }
    if (!options.scene.isScene) {
      console.log('scene is required')
      return
    }

    super()
    this.init(options)
  }
  init(options) {
    this.helper = new THREE.CameraHelper(options.target)
    this.scene = options.scene
    this.scene.add(this.helper)

    this.camera = this.helper.camera

    options.camera !== false ? this.initCamera() : ''
  }
  initCamera() {
    this.initGuiFolder(this.camera, this.camera.type, this.helper, cameraConfig)
  }
}
 

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

import { MeshGui } from '../gui'
import { CameraGui } from '../gui'

// 一. 创建场景
const scene = new THREE.Scene()

// 二. 创建渲染相机(上帝视角, 观察整个场景)
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(200, 200, 200)
camera.lookAt(0, 0, 0)

// 创建透视相机, 借助可视化工具观察
const pCamera = new THREE.PerspectiveCamera(45, 1, 10, 20)
pCamera.position.set(0, 0, 5)
pCamera.updateMatrixWorld()

new CameraGui({
  target: pCamera,
  scene,
})

// 三. 创建物体
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)

// 集成Gui
new MeshGui({
  target: cube,
})

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})
 

效果

图片

示例代码

import * as THREE from 'three'
import { BaseGui } from './BaseGui'

function positionHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateMatrixWorld()
  parent.update()
}
const positionConfig = {
  x: {
    handler: positionHandler,
  },
  y: {
    handler: positionHandler,
  },
  z: {
    handler: positionHandler,
  },
}

function cameraHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateProjectionMatrix()
  parent.update()
}

const cameraConfig = {
  fov: {
    name: '可视角度',
    extend: [0, 180],
    handler: cameraHandler,
  },
  aspect: {
    name: '宽高比',
    extend: [1, 3],
    step: 0.1,
    handler: cameraHandler,
  },
  near: {
    name: '近截面',
    extend: [0.1, 20],
    handler: cameraHandler,
  },
  far: {
    name: '远截面',
    extend: [10, 50],
    handler: cameraHandler,
  },
}

export class CameraGui extends BaseGui {
  constructor(options = {}) {
    if (!options.target.isCamera) {
      console.error('target must be an instance of Camera')
      return
    }
    if (!options.scene.isScene) {
      console.log('scene is required')
      return
    }

    super()
    this.init(options)
  }
  init(options) {
    this.helper = new THREE.CameraHelper(options.target)
    this.scene = options.scene
    this.scene.add(this.helper)

    this.camera = this.helper.camera

    this.position = this.camera.position

    options.camera !== false ? this.initCamera() : ''
    options.position !== false ? this.initPosition() : ''
  }
  initCamera() {
    this.initGuiFolder(this.camera, this.camera.type, this.helper, cameraConfig)
  }
  initPosition() {
    this.initGuiFolder(this.position, '相机坐标', this.helper, positionConfig)
  }
}
 

注意

当调整相机参数时, 需要更新相机的投影矩阵, 否则不会生效

图片

2) 调整视点

示例

import * as THREE from 'three'
import { BaseGui } from './BaseGui'

function positionHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateMatrixWorld()
  parent.update()
}
const positionConfig = {
  x: {
    handler: positionHandler,
  },
  y: {
    handler: positionHandler,
  },
  z: {
    handler: positionHandler,
  },
}

function cameraHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateProjectionMatrix()
  parent.update()
}

const cameraConfig = {
  fov: {
    name: '可视角度',
    extend: [0, 180],
    handler: cameraHandler,
  },
  aspect: {
    name: '宽高比',
    extend: [1, 3],
    step: 0.1,
    handler: cameraHandler,
  },
  near: {
    name: '近截面',
    extend: [0.1, 20],
    handler: cameraHandler,
  },
  far: {
    name: '远截面',
    extend: [10, 50],
    handler: cameraHandler,
  },
}

export class CameraGui extends BaseGui {
  constructor(options = {}) {
    if (!options.target.isCamera) {
      console.error('target must be an instance of Camera')
      return
    }
    if (!options.scene.isScene) {
      console.log('scene is required')
      return
    }

    super()
    this.init(options)
  }
  init(options) {
    this.helper = new THREE.CameraHelper(options.target)
    this.scene = options.scene
    this.scene.add(this.helper)

    this.camera = this.helper.camera

    this.position = this.camera.position

    options.camera !== false ? this.initCamera() : ''
    options.position !== false ? this.initPosition() : ''
  }
  initCamera() {
    this.initGuiFolder(this.camera, this.camera.type, this.helper, cameraConfig)
  }
  initPosition() {
    this.initGuiFolder(this.position, '相机坐标', this.helper, positionConfig)
  }
}
 

⚠️ 特别注意

当调整相机在世界中的位置时, 需要更新世界矩阵

图片

效果

图片

3)  调整观察点

示例

import * as THREE from 'three'
import { BaseGui } from './BaseGui'

function positionHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateMatrixWorld()
  parent.update()
}
const positionConfig = {
  x: {
    handler: positionHandler,
  },
  y: {
    handler: positionHandler,
  },
  z: {
    handler: positionHandler,
  },
}

function lookatHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.lookAt(...Object.values(item))
  camera.updateMatrixWorld()
  parent.update()
}

const lookatConfig = {
  x: {
    handler: lookatHandler,
  },
  y: {
    handler: lookatHandler,
  },
  z: {
    handler: lookatHandler,
  },
}

function cameraHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateProjectionMatrix()
  parent.update()
}

const cameraConfig = {
  fov: {
    name: '可视角度',
    extend: [0, 180],
    handler: cameraHandler,
  },
  aspect: {
    name: '宽高比',
    extend: [1, 3],
    step: 0.1,
    handler: cameraHandler,
  },
  near: {
    name: '近截面',
    extend: [0.1, 20],
    handler: cameraHandler,
  },
  far: {
    name: '远截面',
    extend: [10, 50],
    handler: cameraHandler,
  },
}

export class CameraGui extends BaseGui {
  constructor(options = {}) {
    if (!options.target.isCamera) {
      console.error('target must be an instance of Camera')
      return
    }
    if (!options.scene.isScene) {
      console.log('scene is required')
      return
    }

    super()
    this.init(options)
  }
  init(options) {
    this.helper = new THREE.CameraHelper(options.target)
    this.scene = options.scene
    this.scene.add(this.helper)

    this.camera = this.helper.camera

    this.position = this.camera.position

    options.camera !== false ? this.initCamera() : ''
    options.position !== false ? this.initPosition() : ''
    options.lookAt !== false ? this.initLookAt() : ''
  }
  initCamera() {
    this.initGuiFolder(this.camera, this.camera.type, this.helper, cameraConfig)
  }
  initPosition() {
    this.initGuiFolder(this.position, '相机坐标', this.helper, positionConfig)
  }
  initLookAt() {
    const lookAt = {
      x: 0,
      y: 0,
      z: 0,
    }
    this.initGuiFolder(lookAt, '观察点坐标', this.helper, lookatConfig)
  }
}
 

注意

每次调整观察点时, 需要重新调用lookAt()方法更新

效果

图片

4) 实时渲染

为了能看到添加到场景中的透视相机拍出的图片, 我们可以使用透视相机进行拍照并渲染

效果

图片

我们将渲染的画布分成两个部分

·左边: 实时显示透视相机的渲染结果

·右边: 调整相机参数

示例

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

import { MeshGui } from '../gui'
import { CameraGui } from '../gui'

// 一. 创建场景
const scene = new THREE.Scene()

// 二. 创建渲染相机(上帝视角, 观察整个场景)
const camera = new THREE.PerspectiveCamera(
  45,
  (window.innerWidth / window.innerHeight) * 0.5
)
camera.position.set(20, 20, 20)
camera.lookAt(0, 0, 0)

// 创建透视相机, 借助可视化工具观察
const pCamera = new THREE.PerspectiveCamera(
  45,
  (window.innerWidth / window.innerHeight) * 0.5,
  10,
  20
)
pCamera.position.set(0, 0, 5)
pCamera.updateMatrixWorld()

new CameraGui({
  target: pCamera,
  scene,
})

// 三. 创建物体
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)

// 集成Gui
new MeshGui({
  target: cube,
})

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
renderer.autoClear = false

// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)

function animation() {
  renderer.clear()
  renderer.setViewport(0, 0, window.innerWidth / 2, window.innerHeight)
  renderer.render(scene, pCamera)

  renderer.setViewport(
    window.innerWidth / 2,
    0,
    window.innerWidth / 2,
    window.innerHeight
  )
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = (window.innerWidth / window.innerHeight) * 0.5
  camera.updateProjectionMatrix()

  pCamera.aspect = (window.innerWidth / window.innerHeight) * 0.5
  pCamera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

三、正交相机详解

正交相机使用正视投影, 不管从什么距离, 哪个角度渲染的结果都是一样的. 这种相机主要被用于游戏中

图片

1) 相机参数

在初始化创建相机时, 可以设置4个参数

·left: 左面

·right: 右面

·top: 上面

·bottom: 下面

·near: 近面

·far: 远面

下面通过一个示例, 可视化调整相机的参数帮助大家理解每个参数的作用

效果

图片

示例

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

import { MeshGui } from '../gui'
import { CameraGui } from '../gui'

// 一. 创建场景
const scene = new THREE.Scene()

// 二. 创建渲染相机(上帝视角, 观察整个场景)
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(20, 20, 20)
camera.lookAt(0, 0, 0)

// 创建正交相机, 借助可视化工具观察
const oCamera = new THREE.OrthographicCamera(-5, 5, 5, -5, 5, 15)
oCamera.position.set(0, 0, 5)
oCamera.updateMatrixWorld()

new CameraGui({
  target: oCamera,
  scene,
})

// 三. 创建物体
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)

// 集成Gui
new MeshGui({
  target: cube,
})

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})
 

import * as THREE from 'three'
import { BaseGui } from './BaseGui'

function positionHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateMatrixWorld()
  parent.update()
}
const positionConfig = {
  x: {
    handler: positionHandler,
  },
  y: {
    handler: positionHandler,
  },
  z: {
    handler: positionHandler,
  },
}

function lookatHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.lookAt(...Object.values(item))
  camera.updateMatrixWorld()
  parent.update()
}

const lookatConfig = {
  x: {
    handler: lookatHandler,
  },
  y: {
    handler: lookatHandler,
  },
  z: {
    handler: lookatHandler,
  },
}

function cameraHandler(item, key, value, parent) {
  const camera = parent.camera

  item[key] = value
  camera.updateProjectionMatrix()
  parent.update()
}

const cameraMapping = {
  PerspectiveCamera: {
    fov: {
      name: '可视角度',
      extend: [0, 180],
      handler: cameraHandler,
    },
    aspect: {
      name: '宽高比',
      extend: [1, 3],
      step: 0.1,
      handler: cameraHandler,
    },
    near: {
      name: '近截面',
      extend: [0.1, 20],
      handler: cameraHandler,
    },
    far: {
      name: '远截面',
      extend: [10, 50],
      handler: cameraHandler,
    },
  },
  OrthographicCamera: {
    left: {
      name: '左面',
      extend: [-10, 10],
      handler: cameraHandler,
    },
    right: {
      name: '右面',
      extend: [-10, 10],
      handler: cameraHandler,
    },
    top: {
      name: '上面',
      extend: [-10, 10],
      handler: cameraHandler,
    },
    bottom: {
      name: '底面',
      extend: [-10, 10],
      handler: cameraHandler,
    },
    near: {
      name: '近面',
      extend: [1, 10],
      handler: cameraHandler,
    },
    far: {
      name: '近面',
      extend: [10, 20],
      handler: cameraHandler,
    },
  },
}

export class CameraGui extends BaseGui {
  constructor(options = {}) {
    if (!options.target.isCamera) {
      console.error('target must be an instance of Camera')
      return
    }
    if (!options.scene.isScene) {
      console.log('scene is required')
      return
    }

    super()
    this.init(options)
  }
  init(options) {
    this.helper = new THREE.CameraHelper(options.target)
    this.scene = options.scene
    this.scene.add(this.helper)
    console.log(this.scene)

    this.camera = this.helper.camera

    this.position = this.camera.position

    options.camera !== false ? this.initCamera() : ''
    options.position !== false ? this.initPosition() : ''
    options.lookAt !== false ? this.initLookAt() : ''
  }
  initCamera() {
    this.initGuiFolder(
      this.camera,
      this.camera.type,
      this.helper,
      cameraMapping[this.camera.type]
    )
  }
  initPosition() {
    this.initGuiFolder(this.position, '相机坐标', this.helper, positionConfig)
  }
  initLookAt() {
    const lookAt = {
      x: 0,
      y: 0,
      z: 0,
    }
    this.initGuiFolder(lookAt, '观察点坐标', this.helper, lookatConfig)
  }
}
 

2) 实时渲染

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

import { MeshGui } from '../gui'
import { CameraGui } from '../gui'

// 一. 创建场景
const scene = new THREE.Scene()

// 二. 创建渲染相机(上帝视角, 观察整个场景)
const camera = new THREE.PerspectiveCamera(
  45,
  (window.innerWidth / window.innerHeight) * 0.5
)
camera.position.set(20, 20, 20)
camera.lookAt(0, 0, 0)

// 创建透视相机, 借助可视化工具观察
// 创建正交相机, 借助可视化工具观察
const oCamera = new THREE.OrthographicCamera(-5, 5, 5, -5, 5, 15)
oCamera.position.set(0, 0, 5)
oCamera.updateMatrixWorld()

new CameraGui({
  target: oCamera,
  scene,
})

// 三. 创建物体
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)

// 集成Gui
new MeshGui({
  target: cube,
})

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
renderer.autoClear = false

// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)

function animation() {
  renderer.clear()
  renderer.setViewport(0, 0, window.innerWidth / 2, window.innerHeight)
  renderer.render(scene, oCamera)

  renderer.setViewport(
    window.innerWidth / 2,
    0,
    window.innerWidth / 2,
    window.innerHeight
  )
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = (window.innerWidth / window.innerHeight) * 0.5
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

jnfy
关注
专栏目录
Three.js 基础入门--第07课：基础功能之 Camera 相机
liuhao9999的博客
04-11 608
相机是 Three.js 抽象出来的一个对象，使用此对象，我们可以定义显示的内容，并且可以通过移动相机位置来显示不同的内容。下面讲解一下 Three.js 中相机的通用属性和常用的相机对象。
《Three.js零基础入门教程》相关源码
07-20
1. three.js快速入门-新手上路 2. 顶点概念、几何体结构 3. 材质对象 4. 点线面模型对象 5. 光源对象 6. 层级模型、树结构 7. 几何体对象、曲线、三维建模 8. 纹理贴图 9. 相机对象(投影方式) 10. 精灵模型、粒子...
Threejs之Camera相机
最新发布
你华还是你华
08-29 356
相机在Threejs中扮演着至关重要的角色，它决定了我们从哪个视角来观察场景。在Threejs中，创建相机轻松设定视角、宽高比等参数，掌控视觉体验。相机虽无形，却决定所见，需搭配物体、灯光等可见元素，共同构建生动场景。它是连接现实与虚拟的桥梁，让想象触手可及。在Threejs中有正交相机、透视相机、立方相机、立体相机，接下来我们将重点记录透视相机，因为透视相机是比较还原我们人眼的效果。本文只介绍常用参数，更多参数请点这里。
Three.js——相机
modaoshi51991的博客
05-20 775
在Three.js中，相机（Camera）是用于定义视图和渲染场景的一个关键组件。相机决定了你从哪个角度和位置观察场景中的物体，以及如何呈现这些物体。Three.js 提供了几种不同类型的相机，每种相机都有其特定的用途和特性。
threejs-相机
qq_37987033的博客
07-05 1390
threejs相机
【Three.js】第七章 Cameras 相机
m0_68324632的博客
05-25 1634
我们已经创建过了一个`PerspectiveCamera`，但还有其他类型的相机，如您在文档中所见。
h5：three.js+photo-sphere-viewer.js 全景场景切换，全景家居
12-19
首先，`three.js`是一个流行的JavaScript 3D库，它为浏览器中的3D图形渲染提供了强大的支持。它允许开发者在网页上创建复杂的3D模型、动画和交互，而无需依赖Flash或其他插件。通过three.js，我们可以构建一个360度...
three.js-dev-examples-models.zip
08-26
Three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得简单易行。这个压缩包"three.js-dev-examples-models.zip"包含了与Three.js相关的模型示例，是学习和理解如何在Web环境中加载和展示3D模型的...
基于three.js和photo-sphere-viewer生成720全景图项目源码.zip
12-12
基于three.js和photo-sphere-viewer生成720全景图项目源码.zip基于three.js和photo-sphere-viewer生成720全景图项目源码.zip基于three.js和photo-sphere-viewer生成720全景图项目源码.zip基于three.js和photo-sphere...
three.js+photo-sphere-viewer.js 全景图场景切换
02-07
在本项目中，我们主要探讨的是如何利用three.js和photo-sphere-viewer.js库来创建一个全景图场景切换的应用。这个应用旨在提供一种沉浸式的360度视角体验，让用户能够在不同的全景图之间自由切换，同时具备前进和...
three.js多相机技术
03-17
由于一个渲染器（renderer）对应一个相机（camera），当需要多个视图时会消耗大量内存； 故在此封装了一个在单个渲染器上使用多个相机展示不同视图内容的DEMO,大大减少了功耗； 内涵代码和思路文档
ThreeJs开发（移动，旋转，相机，纹理，鼠标事件等源代码）
11-16
threejs开发小实例，实现了创建场景灯光，摄像机，对物体的移动，旋转，以及摄像机的移动旋转，动画效果，灯光设置（源代码）
Three.js相机简明教程
新缸中之脑
07-11 1238
相机校准是 3D 计算机图形学中的一个基本概念，涉及设置虚拟相机以模拟真实世界相机的视角和行为。在 Three.js（一种流行的 3D 渲染 JavaScript 库）中，了解相机校准对于创建逼真且身临其境的 3D 场景至关重要。在本文中，我们将探讨 Three.js 中相机校准的基础知识，面向希望提高 3D 图形技能的初学者。
我们来学一学threejs的相机。深度学习，了解！
qq_29335275的博客
12-18 467
<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>threejs之相机</title>         <script src="../js/three.js">&
three.js(相机 （Camera）)
w418856的博客
05-24 1355
3立方相机（CubeCamera）：立方体相机是一种特殊的相机，它能够捕获周围环境，生成立方体贴图，并将其应用到材质上。●OrthographicCamera( 摄像机视锥体左侧面，摄像机视锥体右侧面，摄像机视锥体上侧面， 摄像机视锥体下侧面 ，摄像机视锥体近端面，摄像机视锥体远端面 )上述代码将创建一个透视相机，将其位置设置为 (0, 0, 10)，然后将其朝向设置为原点 (0, 0, 0)。●摄像机的远端面，默认值是2000。●摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。
three.js中的相机介绍
yinge0508的博客
12-25 334
地址：http://www.hewebgl.com/article/getarticle/59
threejs (二) 相机
cwjxyp的博客
11-07 805
创建相机辅助线创建一个透视相机观察正交相机上面的可以配置设置对象的属性：可以是number和boolean类型和方法类型，点击gui插件方法名称时，会执行改方法。
THREE.JS学习笔记二：照相机
6块腹肌的博客
01-05 1350
我们使用 Three.js 创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景 如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕 的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。 照相机分正交投影和透视投影 (图片来源于Three.js入门指南) (a)透视投影，(b)正交投影 正交投影照相机（Orthographic ...
three.js three.js入门指南-中文基础教程
01-23
three.js是一款用于创建3D图形的JavaScript库。它提供了丰富的功能和工具，可以在Web上轻松创建复杂的3D场景和动画效果。如果你想学习three.js，可以按照下面的入门指南来开始。 首先，你需要了解一些基本的Web开发知识，比如HTML、CSS和JavaScript。然后，你需要在你的项目中引入three.js库，你可以通过下载源代码或者使用CDN来获取这个库。一旦你引入了库，你就可以开始使用three.js创建3D场景了。 在使用three.js之前，你需要了解一些基本概念，比如场景（Scene）、相机（Camera）、渲染器（Renderer）和几何体（Geometry）。你可以通过在文档和教程中学习这些概念。 一旦你理解了基本概念，你就可以尝试创建一些简单的3D图形和动画效果。你可以尝试创建立方体、球体或者其他基本形状，也可以尝试给它们添加材质和光照效果。通过不断的尝试和实践，你会逐渐掌握three.js的使用方法和技巧。 除了基本形状和物体，你还可以学习如何导入模型和纹理，以及如何添加交互和动画效果。通过持续学习和实践，你可以创建出更加复杂和精美的3D场景和动画效果。 总的来说，学习three.js需要持续的学习和实践。希望这个入门指南可以帮助你快速入门three.js，并在Web上创建出令人惊叹的3D图形和动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值