three 渲染场景 基础配置

初始化场景

cosnt  scene = new THREE.Scene()

创建相机

cosnt camera = new THREE.PerspectiveCamera(75,window.innerWidht/window.innerHeight,0.1,1000)
//括号中的  （角度，宽高比，近端，远端）

camera.position.set(0,0,10)
// 设置相机位置 (x,y,z)

scene.add(camera)
//相机添加到场景中

添加物体

创建几何体

const cubeGeometry = new THREE.BoxGeometry(1,1,1)   //几何体
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00})  // 材质

// 根据几何体和材质 创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)

scene.add(cube)  //物体添加到场景中

初始化渲染器

const renderer = new THREE.WebGLRenderer()   //初始化渲染器
renderer.setSize(window.innerWidht,window.innerHeight)  //设置渲染的尺寸大小
document.body.appendChild(renderer.domElement)  //将webgl 渲染的canvas内容添加到body

导入轨道控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

创建轨道控制器

const controls = new OrbitControls(camera,renderer.domElement)   // 传入参数 相机 和渲染器的cavas

添加辅助坐标轴

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

设置渲染函数

function render(){
  renderer.render(scene,camera)  //  使用渲染器，通过相机将场景渲染进来
  requestAnimationFrame(render)   // 下一帧渲染的时候调用render函数
}

render()

适配页面的变化

// 监听画面变化 更新渲染画面
window.addEventListener("resize",()=>{
   // 更新摄像头
   camera.aspect = window.innerWidth / window.innerHeight
   // 更新摄像机的投影矩阵
   camera.updateProjectionMatrix()
   // 更新渲染器
   renderer.setSize(window.innerWidth,window.innerHeight)
   // 设置渲染器的像素比
   renderer.setPixelRatio(window.devicePixelRatio)
})