Three.js第一课-安装&第一个3D页面最近，我开始着手学习Three.js，在本系列教程中，我将从零开始，一步步深

前言

最近，我开始着手学习Three.js，在本系列教程中，我将从零开始，一步步深入学习，同时以浅显易懂的方式向大家分享Three.js的基础知识和技术要点。无论你是刚刚踏入前端开发领域，还是已经有一定经验的开发者，我相信这些教程都能为你提供有益的信息。通过这个系列，我希望能够帮助你快速入门Three.js，并且激发你对于在网页上构建引人入胜的3D交互体验的兴趣。

无论你是为了提升自身技能，还是寻找新的灵感，这个系列都将是你学习和探索Three.js世界的好去处。让我们一起踏上这段充满创造力和乐趣的学习旅程吧！

使用脚手架创建新项目

这里拿Vite+Vue举例，React同理

安装Three.js

使用

导入three.js

在script中导入Three
import * as Three from 'three'

创建场景

const scene = new Three.Scene()

创建相机

const camera = new Three.PerspectiveCamera(
    // 观看视角 45度
    45,
    // 宽高比
    window.innerWidth / window.innerHeight,
    // 最小距离平面
    0.1,
    // 最大距离平面
    1000
)

创建渲染器

const render = new Three.WebGLRenderer()
// 设置渲染的宽高
render.setSize(window.innerWidth, window.innerHeight)
// 将canvas画布添加到容器中
document.body.appendChild(render.domElement)

创建物体

// 定义形状
// BoxGeometry(几何体)
const geometry = new Three.BoxGeometry(1, 1, 1)
// 定义材质
const material = new Three.MeshBasicMaterial({ color: "pink" })
// 创建物体
const good = new Three.Mesh(geometry, material)

添加物体到场景中

scene.add(good);

设置相机的位置以及照射位置

// 设置相机的位置
camera.position.set(0, 0, 5);
// 设置相机观看的位置
camera.lookAt(0, 0, 0)

定义渲染函数

function animate() {
    // 使用requestAnimationFrame进行动画的平滑过渡
    requestAnimationFrame(animate)
    // 旋转
    good.rotation.x += 0.01;
    good.rotation.y += 0.01;
    good.rotation.z += 0.01;
    // 渲染
    render.render(scene, camera)
}

全代码

<template>
    
</template>
 
<script setup lang='ts'>
import * as Three from "three"
// 创建场景
const scene = new Three.Scene()
// 创建相机
const camera = new Three.PerspectiveCamera(
    // 观看视角 45度
    45,
    // 宽高比
    window.innerWidth / window.innerHeight,
    // 最小距离平面
    0.1,
    // 最大距离平面
    1000
)
// 创建渲染器
const render = new Three.WebGLRenderer()
// 设置渲染的宽高
render.setSize(window.innerWidth, window.innerHeight)
// 将canvas画布添加到容器中
document.body.appendChild(render.domElement)

// 定义形状
// BoxGeometry(几何体)
const geometry = new Three.BoxGeometry(1, 1, 1)
// 定义材质
const material = new Three.MeshBasicMaterial({ color: "pink" })
// 创建物体
const good = new Three.Mesh(geometry, material)

// 将物体添加到场景中
scene.add(good);

// 设置相机的位置
camera.position.set(0, 0, 5);
// 设置相机观看的位置
camera.lookAt(0, 0, 0)

// 渲染函数
function animate() {
    // 使用requestAnimationFrame进行动画的平滑过渡
    requestAnimationFrame(animate)
    // 旋转
    good.rotation.x += 0.01;
    good.rotation.y += 0.01;
    good.rotation.z += 0.01;
    // 渲染
    render.render(scene, camera)
}
animate()
</script>
 
<style lang='scss' scoped></style>

Three.js第一课-安装&第一个3D页面

前言