Three.js创建

引入three

import * as THREE from "three"

1.创建场景

    const scene = new THREE.Scene( )

2.创建相机

const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000)

3.设置相机位置

camera.position.set(0, 0, 10)
//添加到场景里面
scene.add(camera)

4.添加物体

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
​
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
​
//根据几何体和材质创建物品
​
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
​
//将几何体添加到场景里面
​
scene.add(cube)

5.初始化渲染器

const render = new THREE.WebGLRenderer()
​
//设置渲染的大小
​
render.setSize(window.innerWidth, window.innerHeight)

6.将webgl渲染到canvas内容添加到body

document.body.appendChild(render.domElement)

7.创建轨道控制器

const controls = new OrbitControls(camera, renderer.domElement)
// 设置控制器阻尼，让其更加贴合实际,必须在动画循环里面调用updata
controls.enableDamping = true
​
//添加坐标轴辅助器
//参数代表坐标轴线长，默认为1
 const axesHelper = new THREE.AxesHelper(5)
 scene.add(axesHelper)

//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
​
​
function render () {
  controls.update()
  renderer.render(scene, camera)
  //渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render)
  // controls.update()
}
​
render()
​
​
// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix()
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})