学习ThreeJS
创建第一个应用
使用Three JS进行编程的时候,都是在调用new Three().XXX 来实现方法,让我们先根据官方文档创建一个demo
https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
那我们需要什么东西才能让这个场景build起来呢?
- 一个相机(camera),一般是使用PerspectiveCamera,因为最接近人的眼睛成像效果,还有正交相机等
- 75, // fov 垂直方向上视角的大小 field of view
- window.innerWidth / window.innerHeight, // aspect 纵宽比
- 0.1, // near
- 1000 // far
- 一个场景(scene)
- 一个渲染器 (renderer)
- 需要渲染的东西:使用哪种几何图形,使用什么材质? 这里演示使用基础材质(MeshBasicMaterial)和立方体(BoxGeometry)
拿到了所有的实例,接下来可以开始逻辑部分
然后将创建的实例(cube)加入(add)到场景(scene)中,如下代码:
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)
接着把渲染器加入到浏览器的body中:
document.body.appendChild(renderer.domElement)
创建的渲染器其实就相当于appen了一个canvas到dom里,我们可以调整canvas的大小,这并不是实时resize,如果用户修改窗体可视大小会留白
留个悬念:可以实时监听addListener resize?
renderer.setSize(window.innerWidth, window.innerHeight)
由于创建的相机和cube几何体都默认出现在(0,0,0)的位置,需要对相机在z轴上进行平移
camera.position.z = 5
设置一下地面
// 网格地面
const gridHelper = new THREE.GridHelper(10, 10)
scene.add(gridHelper)
最后把场景和照相机作为参数传到renderer的render函数里
renderer.render(scene, camera)
如果想做出一个动画效果,就像下面代码块一样加上一个animate函数,这段代码每帧都会执行(正常情况下是60次/秒)
function animate() {
requestAnimationFrame(animate) // 不能写死循环,需要调用dom提供的这个动画帧函数
// mdn:https://developer.mozilla.org/zh-TW/docs/Web/API/window/requestAnimationFrame
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera) // 将renderer渲染的时机放到每一帧的函数调用里
}
animate() //调用一下
点击查看代码
<script>
import * as THREE from 'three'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
75, // fov 垂直方向上视角的大小 field of view
window.innerWidth / window.innerHeight, // aspect 纵宽比
0.1, // near
1000 // far
)
camera.position.z = 5
camera.position.y = 2
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)
// 网格地面
const gridHelper = new THREE.GridHelper(10, 10)
cube.position.set(0, 3, 0)
scene.add(gridHelper)
function animate() {
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera)
}
animate()
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!