当前位置：首页 > 百度SEO >

前端技术中，3D图形基础有哪些？

96SEO 2026-06-15 04:11 3

前端 3D 图形的入门小白指南

说实话，hen多前端同学听到“三维”就脑子一抽。

哈哈，先别慌。

咱们先把Zui基础的东西捋一遍。

这个过程会像跟老友聊天一样，随性又带点碎碎念。

到底啥叫 3D 图形？

简单来说就是有宽、高还有深度的对象。

想象一下你手里拿着一个立方体。

它Ke以在空间里转，Ke以被光照亮，也Ke以被相机捕捉。

这就是我们在网页上想要呈现的效果。

坐标系 & 矩阵：别怕，这玩意儿其实hen直白

WebGL 默认使用右手坐标系。

X 向右，Y 向上，Z 向屏幕里。

所以一个点的坐标写成。

矩阵就是把这些点批量变换的工具。

平移、旋转、缩放全靠矩阵算出来。

别忘了矩阵乘法是有顺序的，先左乘后右乘，别搞反了不然模型会飞到天上去。

几何体 & 材质：玩具箱里的积木和颜料

几何体是模型的骨架，比如盒子、球体之类。

下面随手写几个常用几何体的创建代码：


// 立方体
const box = new THREE.BoxGeometry;
// 球体
const sphere = new THREE.SphereGeometry;
// 圆柱
const cylinder = new THREE.CylinderGeometry;

材质决定了表面怎么渲染，有颜色、有光泽、有纹理……


// 基础材质——不受光照影响
const basicMat = new THREE.MeshBasicMaterial;
// 标准材质——支持物理光照
const stdMat = new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    roughness: 0.5,
    metalness: 0.8
});
// Phong 材质——高光效果好
const phongMat = new THREE.MeshPhongMaterial({
    color: 0x0000ff,
    shininess: 100
});

光照系统：让场景活起来的魔法师

没有光，所有东西dou黑漆漆的。

常见光源有四种：

环境光

平行光

点光源

聚光灯


// 环境光
const ambient = new THREE.AmbientLight;
scene.add;
// 平行光——类似太阳
const dirLight = new THREE.DirectionalLight;
dirLight.position.set;
scene.add;
// 点光源——灯泡式
const point = new THREE.PointLight;
point.position.set;
scene.add;
// 聚光灯——舞台灯效果
const spot = new THREE.SpotLight;
spot.position.set;
spot.angle = Math.PI / 6;
scene.add;

相机 & 投影：眼睛和视野的设定

相机决定了我们怎么kan待整个世界。


// 主流两种相机
// PerspectiveCamera —— 类似人眼透视
const perspectiveCam = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
perspectiveCam.position.set;
// OrthographicCamera —— 正交投影，无透视失真
const orthoSize = 5;
const orthoCam = new THREE.OrthographicCamera(
    -orthoSize * window.innerWidth / window.innerHeight,
    orthoSize * window.innerWidth / window.innerHeight,
    orthoSize,
    -orthoSize,
    0.1,
    100
);
orthoCam.position.set;
orthoCam.lookAt;

The Renderer：把所有东西画出来的大锅饭

The renderer 把场景和相机合成Zui终画面。


const renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true // 支持透明背景
});
renderer.setSize;
document.body.appendChild;

动画 & 鼠标交互：让页面动起来才叫酷！


const clock = new THREE.Clock;
function animate{
    requestAnimationFrame;
    const delta = clock.getDelta;
    // 简单自转
    boxMesh.rotation.y += delta;
    // 渲染帧
    renderer.render;
}
animate;

MOUSE PICKING —— 用射线检测点击对象：


const raycaster = new THREE.Raycaster;
const mouse = new THREE.Vector2;
window.addEventListener('click', ev=>{
   mouse.x =  *2 -1;
   mouse.y = - *2 +1;
   raycaster.setFromCamera;
   const intersects = raycaster.intersectObjects;
   if{
       intersects.object.material.color.setHex*0xffffff);
   }
});

# 模型加载 & 外部资源管理

*别急，这里不放 CDN 链接，只给个结构示例*


// 假设你Yi经把 GLTFLoader 脚本引入项目中
const loader = new GLTFLoader;
loader.load('models/robot.glb', gltf=>{
   const model = gltf.scene;
   model.scale.set;
   scene.add;
   // 若有动画，开启混合器播放
   const mixer = new THREE.AnimationMixer;
   gltf.animations.forEach.play);
   // 在主循环里记得geng新 mixer
});

# 性Neng优化小技巧

# 实例化渲染——大量相同对象时省显存。


const geometry = new THREE.BoxGeometry;
const material = new THREE.MeshStandardMaterial;
const count=500;
const instancedMesh=new THREE.InstancedMesh;
for{
   const matrix=new THREE.Matrix4;
   matrix.makeTranslation(
       Math.random*20-10,
       Math.random*5,
       Math.random*20-10
   );
   instancedMesh.setMatrixAt;
}
scene.add;

# LOD——根据距离切换模型精度，远处用低模近处用高模。

# 使用纹理压缩格式，比如 KTX2，省带宽也省显存。

# 开启视锥裁剪，让摄像头kan不到的物体直接不渲染。Three.js 默认Yi经帮忙Zuo了大部分工作，但你Ke以自行 fine‑tune.

# 常见坑 & FAQ # 为什么我的 Three.js 页面在百度搜索里找不到？ 🤔

A：百度爬虫对 JavaScript 渲染支持有限。页面Ru果全部靠 WebGL 动态生成 DOM 内容，爬虫往往只Nengkan到一个空白 canvas，从而不给索引分数。

B：解决办法之一是提供 SSR的降级页面或预渲染好的静态快照，让爬虫抓到真实内容。

C：另外把关键文字信息写进 `` 或者 `