Three.js环境搭建与开发初识(附详细代码)
更新时间：2026年03月21日 09:17:59 作者：前端王校长
Three.js作为基于WebGL的JavaScript 3D库,凭借其易用性和强大的功能,已成为前端开发者实现3D场景的主流选择,这篇文章主要介绍了Three.js环境搭建与开发的相关资料,需要的朋友可以参考下
概述
本文档将详细介绍如何搭建ThreeJS开发环境以及创建您的第一个ThreeJS应用程序。通过本文档，您将学会：
- 如何安装和配置ThreeJS开发环境
- 如何创建一个简单的3D立方体并让它旋转
- 如何将ThreeJS与Vue和React框架集成
第一部分：环境搭建与第一个应用
1. 初始化项目
要创建一个ThreeJS项目，首先需要初始化一个新的npm项目并安装必要的依赖：
npm create vite@latest my-threejs-app cd my-threejs-app npm install npm install three
这将创建一个基于Vite的新项目，并安装ThreeJS作为依赖项。
2. 项目结构
典型的ThreeJS项目结构如下：
my-threejs-app/ ├── public/ │ └── css/ │ └── style.css ├── src/ │ └── main.js ├── index.html ├── package.json └── vite.config.js
3. HTML文件配置
在index.html中，我们需要设置基本的HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="stylesheet" href="css/style.css" rel="external nofollow" />
</head>
<body>
<div id="app"></div>
<script type="module" src="src/main-mk.js"></script>
</body>
</html>
注意：我们引入了CSS样式表来确保Canvas元素正确显示。
4. CSS样式配置
在public/css/style.css中设置基本样式：
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
这些样式确保Canvas元素占据整个浏览器窗口且没有默认的边距。
5. 核心JavaScript代码
这是ThreeJS应用的核心代码（在src/main-mk.js中）：
import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();
// 修改场景背景色
scene.background = new THREE.Color(0xeeeeee);
// 创建透视相机
const camera = new THREE.PerspectiveCamera(
45, // 视角
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 近平面
10000, // 远平面
)
// 创建WebGL渲染器
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;
// 动画循环函数
function animate() {
requestAnimationFrame(animate);
// 让立方体持续旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
// 启动动画循环
animate()
这段代码包含了ThreeJS应用的三个核心组件：
- 场景（Scene）：所有3D对象的容器
- 相机（Camera）：定义观察者视角
- 渲染器（Renderer）：负责将场景和相机组合起来渲染为图像
6. 项目的package.json配置
{
"name": "01-startapp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^4.3.9"
},
"dependencies": {
"three": "^0.153.0"
}
}
第二部分：与Vue框架集成
1. Vue项目配置
当将ThreeJS与Vue集成时，需要在Vue项目中安装额外的依赖：
{
"name": "threejsvue",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"three": "^0.153.0",
"vue": "^3.2.47"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",
"vite": "^4.3.9"
}
}
2. 在Vue组件中使用ThreeJS
在Vue的App.vue文件中可以直接集成ThreeJS代码：
<script setup>
// 导入threejs
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();
</script>
<template>
<div></div>
</template>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
display: block;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
</style>
第三部分：与React框架集成
1. React项目配置
当将ThreeJS与React集成时，需要在React项目中安装相应的依赖：
{
"name": "react3d",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"three": "^0.153.0"
},
"devDependencies": {
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"vite": "^4.3.9"
}
}
2. 在React组件中使用ThreeJS
在React的App.jsx文件中可以这样集成ThreeJS：
import { useState,useEffect ,Component} from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
// 导入threejs
import * as THREE from "three";
import './App.css'
class App extends Component{
render(){
return <div></div>
}
componentDidMount(){
// 创建场景
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();
}
}
export default App
总结
通过以上步骤，我们已经成功搭建了ThreeJS开发环境，并创建了独立运行的ThreeJS应用以及与Vue和React框架集成的应用。ThreeJS的三个核心概念——场景、相机和渲染器是构建任何3D应用的基础，理解它们的作用和关系对于后续学习非常重要。
无论是在纯JavaScript项目还是在现代前端框架（Vue、React）中，ThreeJS的基本使用方法都是一致的，只是集成方式略有不同。掌握了这些基础知识后，您可以进一步探索ThreeJS的更多功能，如光照、材质、纹理等高级特性。
到此这篇关于Three.js环境搭建与开发初识的文章就介绍到这了,更多相关Three.js环境搭建与开发内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
这篇文章主要介绍了微信小程序之店铺评分组件及vue中用svg实现的评分显示组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
JavaScript实现字符串与日期的互相转换及日期的格式化
这篇文章主要介绍了JavaScript实现字符串与日期的互相转换及日期的格式化的方法,这里格式化使用的是正则表达式来替换日期后进行格式化,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了详解js中class的多种函数封装方法，介绍了不同函数的封装方法，感兴趣的朋友可以参考一下2016-01-01
下面小编就为大家分享一篇原生js实现移动端触摸轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
JS面向对象之从prototype到class再到私有属性详解
JavaScript的原型prototype是JavaScript中的一个重要概念,它是一种特殊类型的对象,每个JavaScript对象都有一个原型对象,这篇文章主要介绍了JS面向对象之从prototype到class再到私有属性的相关资料,需要的朋友可以参考下2026-01-01
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
这篇文章主要介绍了Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码,需要的朋友可以参考下2017-07-07
这篇文章主要为大家详细介绍了JS实现多重选项卡切换轮播图制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了解析JS在获取当前月的最后一天遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了微信小程序实现表单验证源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
这篇文章主要介绍了JS遍历JSON数组及获取JSON数组长度操作,涉及javascript简单json数组遍历与运算相关操作技巧,需要的朋友可以参考下2018-12-12
最新评论