使用Three.js让二维图片呈现3D效果

声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。

场景编辑器(NSDT)

背景

逛 sketchfab 网站的时候我看到有很多二维平面转 3D 的模型例子，于是仿照他们的例子，使用 Three.js + React 技术栈，将二维漫画图片转化为三维视觉效果。本文包含的内容主要包括：THREE.Group 层级模型、MeshPhongMaterial 高光网格材质、正弦余弦函数 创建模型移动轨迹等。

效果

实现效果如 👇 下图所示：页面主要有背景图、漫画图片主体以及 💥 Boom 爆炸背景图片构成，按住鼠标左键移动模型可以获得不同视图，让图片在视觉上有 3D 景深效果。

已适配:

• 💻 PC端
• 📱 移动端

👀 在线预览： 3D

实现

本文实现比较简单，和我前面几篇文章实现基本上是相同的，流程也比较简单，主要是素材准备流程比较复杂。下面看看具体实现方法。

素材制作

准备一张自己喜欢的图片作为素材原图，图片内容最好可以分成多个层级，以实现 3D 景深效果，本实例中使用的是一张漫画图片，刚好可以切分成多个层级。

在 Photoshop 中打开图片，根据自己需要的分层数量，创建若干图层，并将地图复制到每个图层上，然后根据对图层景深层级的划分，编辑每个图层，结合使用魔棒工具和套索工具删除多余的部分，然后将每个图层单独导出作为素材。我分为 👆 如上 7 个图层，外加一个边框，一共有 8 个图层。

资源引入

其中 OrbitControls 用于镜头轨道控制、TWEEN 用于镜头补间动画。

import React from 'react';
import