深入学习threejs（学习）

原创于 2025-08-30 08:43:58 发布 · 691 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端

1、下载 threejs 依赖包

pnpm install three

2、第一个简单的 Threejs 案例

// 导入thress.js

import * as THREE from 'three'

// 创建场景

const scene = new THREE.Scene()

// 创建相机

const camera = new THREE.PerspectiveCamera(

45, // 视角

window.innerWidth / window.innerHeight, // 长宽比

0.1, // 近平面

1000 // 远平面

)

// 创建渲染器

const renderer = new THREE.WebGLRenderer()

renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

// 创建几何体

const geometry = new THREE.BoxGeometry(1, 1, 1)

// 创建材质

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

// 创建网格

const cube = new THREE.Mesh(geometry, material)

// 添加网格到场景

scene.add(cube)

// 设置相机位置

camera.position.z = 5

camera.lookAt(0, 0, 0)

// 渲染场景

function animate() {

requestAnimationFrame(animate)

// 旋转立方体

cube.rotation.x += 0.01

cube.rotation.y += 0.01

// 渲染场景

renderer.render(scene, camera)

}

animate()

2.1、CSS代码可忽略

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

canvas{

display: block;

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

}

1、坐标辅助器与轨道控制器

// 导入thress.js

import * as THREE from 'three'

// 导入轨道控制器

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

// 创建场景

const scene = new THREE.Scene()

// 创建相机

const camera = new THREE.PerspectiveCamera(

45, // 视角

window.innerWidth / window.innerHeight, // 长宽比

0.1, // 近平面

1000 // 远平面

)

// 创建渲染器

const renderer = new THREE.WebGLRenderer()

renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

// 创建几何体

const geometry = new THREE.BoxGeometry(1, 1, 1)

// 创建材质

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

// 创建网格

const cube = new THREE.Mesh(geometry, material)

// 添加网格到场景

scene.add(cube)

// 设置相机位置

camera.position.z = 5

camera.position.y = 2

camera.position.x = 2

camera.lookAt(0, 0, 0)

// 添加世界坐标轴辅助器

const axesHelper = new THREE.AxesHelper(5)

scene.add(axesHelper)

// 添加轨道控制器

const controls = new OrbitControls(camera, renderer.domElement)

// 设置带阻尼的惯性

controls.enableDamping = true

// 设置阻尼系数

controls.dampingFactor = 0.05

// 设置旋转速度

controls.autoRotate = true

// 渲染场景

function animate() {

//更新控制器

controls.update()

requestAnimationFrame(animate)

// 旋转立方体

// cube.rotation.x += 0.01

// cube.rotation.y += 0.01

// 渲染场景

renderer.render(scene, camera)

}

animate()