前端Three.js入门（一）-Three的第一个简单的页面

一天睡25小时
325 阅读6分钟

前言

小编想学点3d酷炫效果，迫不及died的点开了b站，立马点击第一个《老陈打码》的视频，开始了我的Three.js美妙（痛苦）之旅.....先附上官网链接：threejs.org/

1.Three的简单3D页面

首先，我们可以在终端新建一个文件夹，命名为01-three初学习。然后在终端开始我们的项目安装。

# 初始化项目01-start_three
npm init vite@latest
# 一开始我们不用任何的框架，选择Vanilla即可，然后再选择JavaScript

然后修改style.css的代码如下，可以把样式放进public的css下面（public/css）

* {
  margin: 0;
  padding: 0;

}

canvas {
  display: block;//将<canvas>元素设置为块级元素，使其占据一整行
  position: fixed;//将<canvas>元素固定在视口中，即使页面滚动，它也不会移动。
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

然后我们删除main.js文件。然后在index.html文件里面先引入css样式。

 <link rel="stylesheet" href="public/css/style.css" />

然后我们在终端开始安装three.js

npm install three

安装好之后我们就可以在main.js里面开始创建我们的第一个3d页面。

1-导入three.js

import * as THREE from 'three'

2-创建场景与相机

//创建场景
const scene = new THREE.Scene()
//创建相机
const camera = new THREE.PerspectiveCamera(
  45,//视角
  window.innerWidth / window.innerHeight,//宽高比
  0.1,//近平面
  1000//远平面
);

3-创建渲染器

  • 这里创建了一个WebGL渲染器实例。WebGL是一种基于OpenGL ES的JavaScript API，用于在浏览器中渲染2D和3D图形。
  • THREE.WebGLRenderer是Three.js中用于WebGL渲染的核心类，它会利用GPU硬件加速来高效地渲染3D场景。
  • renderer.domElement是渲染器生成的<canvas>元素，它是WebGL渲染的载体。
  • 通过将renderer.domElement添加到document.body中，渲染器生成的3D内容会显示在网页中。
//创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//将渲染器添加到body中

4-创建几何体、材质和网格

  1. 几何体（Geometry）

几何体定义了3D物体的形状和结构，即物体的顶点、边和面。它描述了物体在三维空间中的几何信息。

  1. 材质（Material）

材质定义了物体的外观，包括颜色、纹理、透明度、光照效果等。它决定了物体如何与光线交互以及如何被渲染。

  1. 网格（Mesh）

网格是将几何体和材质结合起来，形成一个可以渲染的3D物体。它是几何体和材质的载体，决定了物体在场景中的位置、旋转和缩放。

//创建几何体
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);

5-我们可以设置一下相机的位置

1·相机的作用：

  • 相机是观察3D场景的“眼睛”，它决定了我们能看到什么以及如何看到。
  • 在Three.js中，相机（如PerspectiveCamera）定义了视角、视野范围（FOV）、近平面、远平面等参数，用于渲染场景中的可见部分。

2·为什么需要设置相机位置：

(1) 物体不可见

  • 如果相机和物体都位于原点，相机可能会“卡”在物体内部，导致无法正确渲染物体。
  • 例如，你的立方体位于原点，如果相机也位于原点，相机可能会被立方体遮挡，导致画面一片空白。

(2) 视角不合适

  • 如果相机离物体太近或太远，可能会导致物体在画面中显得过大或过小，影响视觉效果。
  • 例如，如果相机离立方体太近，可能只能看到立方体的一部分；如果太远，立方体会显得很小。

(3) 无法控制观察方向

  • 相机的位置决定了观察的方向。通过调整相机的位置，可以控制从哪个角度观察场景。
  • 例如，将相机放在立方体的前方、侧面或上方，会得到不同的视觉效果。
//设置相机位置
camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0)//相机看向原点

6-开始渲染，可以使用循环渲染，让正方体动起来

  • animate函数是一个递归调用的渲染循环，它通过requestAnimationFrame实现动画效果。
  • 在每一帧中，立方体的旋转角度被更新，然后调用renderer.render重新渲染场景，从而实现立方体的动态旋转效果。
//渲染循环
function animate() {
  // 递归调用渲染函数
  requestAnimationFrame(animate);
  // 旋转立方体
  cube.rotation.x += 0.01;
  // 旋转立方体
  cube.rotation.y += 0.01;
  // 渲染场景和相机
  renderer.render(scene, camera);
}
animate();

下面是完整代码：

//导入three.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);//将渲染器添加到body中

//创建几何体
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.set(0, 0, 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.使用vue开发threejs

也是先初始化好项目 npm install vite@latest，项目名看自己。然后框架我们选择vue框架+JavaScript语言编程。然后我们进入项目 cd threejsvue，然后先安装好依赖 npm i 还有npm i three

然后我们在App.vue文件里面简单清理一下代码：下面代码大家可以直接复制进去（是刚刚第一节的css代码）

<script setup>
</script>

<template>
  <div></div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
body{
  width: 100vw;
  height: 100vh;
}
canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
</style>

然后我们可以在<script setup></script?里面复制我们第一节所写的代码，如下：

<script setup>
//导入three.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);//将渲染器添加到body中

//创建几何体
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.set(0, 0, 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();
</script>

然后结果也是一个3d正方形在旋转。

小编会继续更新three相关内容的（最近正在学习），希望大家给个简单的赞或者关注收藏，谢谢大家！

avatar
文章
阅读
粉丝