❌

普通视图

发现新文章，点击刷新页面。
今天 — 2026年1月15日技术
昨天 — 2026年1月14日技术

2025年终总结-都在喊前端已死，这一年我的焦虑、挣扎与重组：AI 时代如何摆正自己的位置

✇掘金 前端
作者 猪猪拆迁队
2026年1月14日 19:32
前言 今年这一年，我整个人一直处于一种紧绷的焦虑状态。 这种焦虑来自于一种真切的危机感：作为前端，我发现自己曾经引以为傲的“技术壁垒”在 AI 面前像纸一样薄。但最近，我突然想通了。当我意识到 AI

深入掌握 AI 全栈项目中的路由功能：从基础到进阶的全面解析

✇掘金 前端
作者 社恐的下水道蟑螂
2026年1月14日 18:32
在构建现代 Web 应用的过程中，路由管理是必不可少的一部分。本文将深入探讨 AI 全栈项目中的路由功能，涵盖基础知识、进阶概念以及常见的最佳实践。无论您是初学者还是有一定经验的开发者，希望本文能够帮

Three.js 环境搭建与开发初识

✇掘金 前端
作者 前端王校长
2026年1月14日 17:58

概述

本文档将详细介绍如何搭建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" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <link rel="stylesheet" href="css/style.css" />
  </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, // 近平面
)

// 创建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应用的三个核心组件：

  1. 场景（Scene）：所有3D对象的容器
  2. 相机（Camera）：定义观察者视角
  3. 渲染器（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的更多功能，如光照、材质、纹理等高级特性。

❌
❌