【Three.js基础学习】2.Cameras

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

   总结了一些学习的要点：

    1.摄像机的类型 ，关于three.js 中可以设置的，透视，正交摄像机

    2.透视相机的四个参数：视角，宽高比，近参数，远参数 （远近若小于，或超出则不渲染）

    3.实现相机根据鼠标移动，同时根据鼠标移动环绕中间的立方体

    4.three.js提供了轨道控制方法OrbitControls，可以控制物体放大缩小移动等

---

一、实现代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
/* 
    课程要点：
    1.摄像机的类型 ，关于three.js 中可以设置的，透视，正交摄像机
    2.透视相机的四个参数：视角，宽高比，近参数，远参数 （远近若小于，或超出则不渲染）
    3.实现相机根据鼠标移动，同时根据鼠标移动环绕中间的立方体
    4.three.js提供了轨道控制方法OrbitControls，可以控制物体放大缩小移动等
*/


/**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Sizes
const sizes = {
    width: 800,
    height: 600
}

// Cursor  如果要控制摄像机，上下左右移动
const cursor = {
    x:0,
    y:0
}
window.addEventListener('mousemove',(event)=>{
    cursor.x = event.clientX / sizes.width - 0.5
    cursor.y = -(event.clientY / sizes.height -0.5) // 取反是因为three.js认为向下是负

    // console.log(cursor.x )
})


// Scene
const scene = new THREE.Scene()

// Object
const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)

scene.add(mesh)

// Camera 四个参数：视野，宽高比，近参数 1，远参数 1000  
// PerspectiveCamera 模拟人眼看到的
// OrthographicCamera 用于2D 物体远近大小都保持不变 
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height,0.1,9999)

// const aspectRatio = sizes.width/sizes.height; // 保持渲染的不变
// const camera = new THREE.OrthographicCamera(
//     -1 * aspectRatio,
//     1 * aspectRatio,
//     1 ,
//     -1 ,
//     0.1 ,
//     100 ,
// )

// camera.position.x = 2
// camera.position.y = 2
camera.position.z = 3
camera.lookAt(mesh.position)
scene.add(camera)

// Controls
const controls = new OrbitControls(camera,canvas)
// 添加阻尼
controls.enableDamping = true
// 更改轨道位置
// controls.target.y = 1
// controls.update()

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)

// Animate
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update objects
    // mesh.rotation.y = elapsedTime;

    // Update camera
    // camera.position.x = cursor.x * 3
    // camera.position.y = cursor.y * 3
    // camera.lookAt(new THREE.Vector3()) // 这个是移动的物体，不是相机
    // camera.lookAt(mesh.position) // 物体在网格中间，相机视角移动 // 但是看不到后面
    
    // 可以看到后面
    // camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 3
    // camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 3
    // camera.position.y = cursor.y * 5
    // camera.lookAt(mesh.position) 

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

二、知识点

1.OrbitControls 轨道控制器

需要找到你node_modules下面的文件引入

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'controls.update()

const controls = new OrbitControls(camera,canvas)   // 参数是相机和画布

要更改轨道位置，同时需要在tick()中使用

controls.update()

// 添加阻尼

controls.enableDamping = true

不过只有controls.update()在tick中使用时，才能实时更新，阻尼效果流畅

至此可以实现控制物体的放大缩小等操作

2.事件监听

const cursor = {
    x:0,
    y:0
}
window.addEventListener('mousemove',(event)=>{
    cursor.x = event.clientX / sizes.width - 0.5
    cursor.y = -(event.clientY / sizes.height -0.5) // 取反是因为three.js认为向下是负

    // console.log(cursor.x )
})

event.clientX ，event.clientY 获取鼠标距离窗口的x,y的距离

    //Update camrea
    camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 3
    camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 3
    camera.position.y = cursor.y * 5
    camera.lookAt(mesh.position) 

实现相机根据鼠标移动，同时根据鼠标移动环绕中间的立方体

其中Math.PI 是Π，为了一个完整的圆圈

3.相机

1.PerspectiveCamera 透视相机

Camera 四个参数：视野，宽高比，近参数 1，远参数 1000   这里的远近随意取值

上面举例  相机最近到1，可以显示，在近就不会显示物体 ，远同理

 PerspectiveCamera模拟人眼看到的

2.OrthographicCamera

const aspectRatio = sizes.width/sizes.height; // 保持渲染的不变
const camera = new THREE.OrthographicCamera(
    -1 * aspectRatio,
    1 * aspectRatio,
    1 ,
    -1 ,
    0.1 ,
    100 ,
)

用于2D 物体远近大小都保持不变

举个例子，这些参数：左右 上下，远近 ，那么就像一个正方体一样延申出去

而aspectRatio 是为了渲染时候保持不变，图下应该是正立方体，但是变形了，就是没有加宽高比

---

总结

通过轨道控制器实现效果如图下，可以通过鼠标进行点击等操作