Three.js学习（二）几何体的变化

这里开始先介绍一下常用的相机

正投影相机OrthographicCamera

在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

透视投影相机PerspectiveCamera

这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

透视投影相机是个锥型,所以满足视野的 近大远小

在Three.js学习（一）创建一个简单的立方体 - 掘金 (juejin.cn) 成功创建了一个立方体

这里学习改变object的四种属性
position
scale
rotation
quaternion

在学习之前我们先建立出来坐标系，方便我们更好的观察 立方体在xyz轴中的变化 three.js给了我们辅助三维坐标系AxesHelper 其中的值代表坐标系大小

调整相机的角度 我们可以看到z轴

开始改变

-----------------为了方便观察 以下每个示例后都会还原到在中点的立体图

如果你想改变立方体在XYZ轴上的位置
可以通过给cubeMesh设置position
也可以通过cubeMesh.position.set()直接设置xyz的值

如果需要缩放 通过给cubeGeometry设置scale
也可以通过cubeMesh.scale.set()直接设置xyz的值

两种旋转方式

第一种转动场景中的object

使用rotation
通过给cubeMesh设置rotation.x 立方体绕x轴 旋转了45度

但是有一个点需要特别注意
这里我把原先的立方体变为长方体 const cubeGeometry = new THREE.BoxGeometry(1, 2, 0.5)
并且设置在材质样式中 设置 网格模型以线条的模式渲染wireframe:true,

这样设置的原因是 为了看清楚转换后 object自身三维坐标的转换

我设置如下代码

最终效果图

意思是长方体先绕X轴旋转了45度

然后根据最新的三维坐标 再绕Y轴旋转了45度 就变成了最终效果图的样式

如果给cubeMesh设置rotation.reorder('YXZ')则执行顺序会发生改变 Y轴---X轴---Z轴
reorder的意思是(重新排序)
则渲染效果如下

第二种转动场景中的相机

通过设置 三维向量（Vector3）

在相机中通过lookAt给它一个三维向量，则相机聚焦的中心点就会发生变化\

代码如下时 当camera.lookAt(new THREE.Vector3(0,0,0)) 相机是看着中间的

当camera.lookAt(new THREE.Vector3(1,0,0))

当camera.lookAt(new THREE.Vector3(3,0,0))

这里可以观察到相机中点在x轴上又移动了，因为这里使用的是透视投影相机PerspectiveCamera，视野是个锥形，你可以想象你正面看着电脑屏幕 头往右边移动，电脑发生了变化

以下为全部代码

import * as THREE from "three"

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

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

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

/**
 * Axes Helper 辅助三维坐标系
 */
const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

// Object 对象
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)//创建一个立方体几何对象
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: '#ff0000',
    //wireframe:true,//网格模型以线条的模式渲染
})//材质
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)

//cubeMesh.position.x = 2 //立方体在x轴上移动一个单位
// cubeMesh.position.y = 1 //立方体在y轴上移动一个单位
// cubeMesh.position.z = 1 //立方体在z轴上移动一个单位

//cubeMesh.position.set(2,1,1)

//-------------------------------------------------------------------

// cubeMesh.scale.x = 2
// cubeMesh.scale.y = 1.5
// cubeMesh.scale.z = 0

//cubeMesh.scale.set(2,1.5,0) //立方体在x轴上扩展1.2 y轴扩展1.5

//-------------------------------------------------------------------

// cubeMesh.rotation.reorder('YXZ')
// cubeMesh.rotation.x = Math.PI /4
// cubeMesh.rotation.y = Math.PI / 4

scene.add(cubeMesh)


// Camera 相机
const camera = new THREE.PerspectiveCamera(100, sizes.width / sizes.height)
camera.position.z = 3
// camera.position.y = 1
// camera.position.x = 1

// camera.lookAt(new THREE.Vector3(0,0,0))
scene.add(camera)

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