阅读视图

发现新文章，点击刷新页面。

前端3D·Three.js一学就会系列：第二画线

掘金前端

程序员阿峰

2026年3月27日 10:43

各位前端伙伴们，大家好，我是阿峰。最近开始入坑前端3D建站，跟大家一起慢慢深入three.js做网站3D。

今天给大家讲下three.js 画线

一、省略部分

官网，介绍，以及引入库，参看文章片头系列文章：01 第一个3D网站

二、使用方法

创建一个场景

const scene = new THREE.Scene();

创建一个透视摄像机

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

知识点： camera.position.set()：三个参数固定透视摄像机的位置 camera.lookAt()：三个参数固定透视摄像机的拍摄方向

将渲染器添加到页面上

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

创建一个线条

const points = [];
points.push(new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

const line = new THREE.Line( geometry, material );
scene.add( line );

知识点： Vector3：三维向量x、y和z 代表位置 BufferGeometry：是面片、线或点几何体的有效表述 setFromPoints：设置数据来源 LineBasicMaterial：线条材质：可定义属性 color颜色，linewidth线宽等参考LineBasicMaterial 【扩展】 LineDashedMaterial：与LineBasicMaterial同样是线条材质：可定义属性 color颜色，linewidth线宽等参考LineDashedMaterial

渲染场景

function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();

requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。

线条动起来

function animate() {
requestAnimationFrame( animate );
// 旋转方向，及大小
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render( scene, camera );
};

animate();

完整代码（实例）

<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="./three.js"></script>
<!-- <script src="https://threejs.org/build/three.js"></script> -->
<script>
// 创建一个场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

// 展示
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 创建一条线
const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

const line = new THREE.Line( geometry, material );
scene.add( line );

function animate() {
requestAnimationFrame( animate );

line.rotation.x += 0.01;
line.rotation.y += 0.01;

renderer.render( scene, camera );
};

animate();
</script>
</body>
</html>

效果

在这里插入图片描述

总结

以上就是今天要讲的内容，本文仅仅简单介绍了three.js的使用，而three.js提供了非常多的3D显示功能，后续文章，我将带大家慢慢深入了解。

如果这篇这篇文章对您有帮助？关注、点赞、收藏，三连支持一下。有疑问或想法？评论区见。我们下期再见。

前端3D·Three.js一学就会系列：第一个3D网站

掘金前端

程序员阿峰

2026年3月26日 11:21

各位前端伙伴们，大家好，我是阿峰。最近开始入坑前端3D建站，跟大家一起慢慢深入three.js做网站3D。

一、Three.js是什么？

官网

threejs.org/

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

官网示例效果尝鲜

请添加图片描述

二、使用步骤

1.引入three.js库

在线库

<script src="https://threejs.org/build/three.js"></script>

离线可以去官网threejs.org/docs/index.… 下载复制到项目所在的目录下在这里插入图片描述

<script src="./three.js"></script>

2.使用方法

创建一个场景

const scene = new THREE.Scene();

创建一个透视摄像机

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

参数：视野角度（FOV）、长宽比（aspect ratio）、近截面（near）和远截面（far） camera.position.z：透视摄像机位置

将渲染器添加到页面上

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 );

BoxGeometry：立方体，参数为所有顶点和面 MeshBasicMaterial：材质，将应用到对象上，color设置了对象的颜色 Mesh：网格，几何体和几何体材质，作用 scene.add：添加到场景上

渲染场景

function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();

立方体动起来

function animate() {
requestAnimationFrame( animate );
// 旋转方向，及大小
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render( scene, camera );
};

animate();

完整代码（实例）

<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="./three.js"></script>
<!-- <script src="https://threejs.org/build/three.js"></script> -->
<script>
// 创建一个场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, 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;

function animate() {
requestAnimationFrame( animate );

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render( scene, camera );
};

animate();
</script>
</body>
</html>

效果

在这里插入图片描述

总结

以上就是今天要讲的内容，本文仅仅简单介绍了three.js的使用，而three.js提供了非常多的3D显示功能，后续文章，我将带大家慢慢深入了解。

如果这篇这篇文章对您有帮助？关注、点赞、收藏，三连支持一下。有疑问或想法？评论区见。我们下期再见。

【JavaScript面试题-算法与数据结构】手写一个 LRU（最近最少使用）缓存类，支持 `get` 和 `put` 操作，要求时间复杂度 O(1)

掘金前端

程序员阿峰

2026年3月24日 12:27

一、数据结构设计

为了实现 get 和 put 操作的时间复杂度 O(1) ，我们组合了两种数据结构：

哈希表（Map 或普通对象）
- 存储键到双向链表节点的映射。
- 作用：通过 key 直接定位到节点，实现 O(1) 的查找。
双向链表（Node 类实现）
- 维护所有节点的 使用顺序：链表头部（head 之后）是最近使用的节点，链表尾部（tail 之前）是最久未使用的节点。
- 作用：在 O(1) 时间内完成节点的 移动到头部、删除尾部 等操作。

此外，使用两个 哨兵节点（伪头 head 和伪尾 tail），避免处理链表为空或只有一个节点时的边界条件，使插入和删除操作更简洁。

以下是 JavaScript 手写的 LRU 缓存类，使用哈希表 + 双向链表实现，确保 get 和 put 操作时间复杂度为 O(1)：

javascript

class LRUCache {
    /**
     * @param {number} capacity 缓存容量
     */
    constructor(capacity) {
        this.capacity = capacity;
        this.cache = new Map(); // 键 → 节点
        // 创建哨兵头尾节点，简化边界处理
        this.head = new Node(0, 0);
        this.tail = new Node(0, 0);
        this.head.next = this.tail;
        this.tail.prev = this.head;
    }

    /**
     * 获取键对应的值，并将该节点移动到链表头部（最近使用）
     * @param {number} key
     * @return {number}
     */
    get(key) {
        if (!this.cache.has(key)) {
            return -1;
        }
        const node = this.cache.get(key);
        this._moveToHead(node);
        return node.value;
    }

    /**
     * 插入或更新键值对，并将节点置于头部（最近使用）
     * 若容量超限，删除尾部节点（最久未使用）
     * @param {number} key
     * @param {number} value
     * @return {void}
     */
    put(key, value) {
        if (this.cache.has(key)) {
            // 已存在：更新值并移到头部
            const node = this.cache.get(key);
            node.value = value;
            this._moveToHead(node);
        } else {
            // 不存在：新建节点
            if (this.cache.size === this.capacity) {
                // 容量已满，删除尾部节点（最久未使用）
                const tailNode = this.tail.prev;
                this._removeNode(tailNode);
                this.cache.delete(tailNode.key);
            }
            const newNode = new Node(key, value);
            this.cache.set(key, newNode);
            this._addToHead(newNode);
        }
    }

    /**
     * 将节点从原位置移除，并添加到头部
     * @param {Node} node
     */
    _moveToHead(node) {
        this._removeNode(node);
        this._addToHead(node);
    }

    /**
     * 从链表中移除节点
     * @param {Node} node
     */
    _removeNode(node) {
        const prev = node.prev;
        const next = node.next;
        prev.next = next;
        next.prev = prev;
    }

    /**
     * 将节点插入到哨兵头节点之后（头部）
     * @param {Node} node
     */
    _addToHead(node) {
        node.prev = this.head;
        node.next = this.head.next;
        this.head.next.prev = node;
        this.head.next = node;
    }
}

/**
 * 双向链表节点
 */
class Node {
    constructor(key, value) {
        this.key = key;
        this.value = value;
        this.prev = null;
        this.next = null;
    }
}

使用示例

javascript

const lru = new LRUCache(2);
lru.put(1, 1);      // 缓存: {1=1}
lru.put(2, 2);      // 缓存: {1=1, 2=2}
console.log(lru.get(1)); // 返回 1，并移动 1 到头部 → 缓存顺序: 2,1
lru.put(3, 3);      // 容量已满，删除尾部 2 → 缓存: {1=1, 3=3}
console.log(lru.get(2)); // 返回 -1 (未找到)
lru.put(4, 4);      // 容量已满，删除尾部 1 → 缓存: {3=3, 4=4}
console.log(lru.get(1)); // 返回 -1
console.log(lru.get(3)); // 返回 3
console.log(lru.get(4)); // 返回 4

复杂度说明

get: 哈希表查找 O(1) + 链表移动 O(1) → 总体 O(1)
put: 哈希表插入/更新 O(1) + 可能删除尾部 O(1) + 链表操作 O(1) → 总体 O(1)