ThreeJs基本操作【场景|相机|物体|GUI|渲染器|控制器】

// 引入htree
import * as THREE from 'three'
// 引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// Debug Gui
import * as dat from 'lil-gui'

// gui
const gui = new dat.GUI()

// canvas 容器
const canvas = document.querySelector('canvas.webgl')

// 获取窗口宽高 用于渲染webgl
const sizes = {
    width:window.innerWidth,
    height:window.innerHeight
}

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


// 创建一个立方体的物体
const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1), //创建一个几何体对象 立方体
    new THREE.MeshBasicMaterial()   //创建一个基本材质
)
gui.add(cube.position,'y').min(-3).max(3).step(0.01).name('物体的y坐标')    //GUI控制属性
gui.add(cube,"visible").name("物体是否可见")    //GUI控制是否可见
scene.add(cube)


// 创建相机 透视相机
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 2
scene.add(camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,canvas)
controls.enableDamping = true   //开启阻力

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
    canvas:canvas,  //渲染容器
    antialias:true  //抗锯齿
})
renderer.shadowMap.enabled = false  //关闭阴影映射
renderer.shadowMap.type = THREE.PCFSoftShadowMap    //设置了阴影映射的类型为PCFSoftShadowMap。PCF是指脉冲耦合滤波器
renderer.setSize(sizes.width,sizes.height)  //设置渲染尺寸
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)) //设置渲染比例

const clock = new THREE.Clock()
// 渲染动画帧
const tick = () => {
    // 获取动画帧执行时间
    const elapsedTime = clock.getElapsedTime()

    controls.update()

    renderer.render(scene,camera)

    // 请求下一帧
    window.requestAnimationFrame(tick)
}
tick()

// 监听窗口大小变化
window.addEventListener('resize',() => {
    sizes.width = window.innerWidth //窗口大小改变时重新获取窗口宽度
    sizes.height = window.innerHeight //窗口大小改变时重新获取窗口高度

    camera.aspect = sizes.width / sizes.height  //相机的宽高比 它影响相机的视场和投影矩阵的计算
    camera.updateProjectionMatrix() //跟新相机的投影矩阵 以便与新的窗口大小相适应

    // 这行代码根据窗口的尺寸和像素比率来设置渲染器的大小
    renderer.setSize(sizes.width,sizes.height)  //设置渲染器的大小
    //  这行代码根据窗口的设备像素比率来设置渲染器的像素比率，确保以最佳的像素密度进行渲染
    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)) //设置渲染器的像素比
})