拜託，使用Three.js讓二維圖片具有3D效果超酷的好嗎 ?

dragonir發表於2022-02-22

宣告：本文涉及圖文和模型素材僅用於個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。

背景

逛 sketchfab 網站的時候我看到有很多二維平面轉 3D 的模型例子，於是仿照他們的例子，使用 Three.js + React 技術棧，將二維漫畫圖片轉化為三維視覺效果。本文包含的內容主要包括：THREE.Group 層級模型、MeshPhongMaterial 高光網格材質、正弦餘弦函式 建立模型移動軌跡等。

效果

實現效果如 ? 下圖所示：頁面主要有背景圖、漫畫圖片主體以及 ? Boom 爆炸背景圖片構成，按住滑鼠左鍵移動模型可以獲得不同檢視，讓圖片在視覺上有 3D 景深效果。

已適配:

? PC端
? 移動端

? 線上預覽：https://dragonir.github.io/3d/#/comic

實現

本文實現比較簡單，和我前面幾篇文章實現基本上是相同的，流程也比較簡單，主要是素材準備流程比較複雜。下面看看具體實現方法。

素材製作

準備一張自己喜歡的圖片作為素材原圖，圖片內容最好可以分成多個層級，以實現 3D 景深效果，本例項中使用的是一張漫畫圖片，剛好可以切分成多個層級。

在 Photoshop 中開啟圖片，根據自己需要的分層數量，建立若干圖層，並將地圖複製到每個圖層上，然後根據對圖層景深層級的劃分，編輯每個圖層，結合使用魔棒工具和套索工具刪除多餘的部分，然後將每個圖層單獨匯出作為素材。我分為 ? 如上 7 個圖層，外加一個邊框，一共有 8 個圖層。

資源引入

其中 OrbitControls 用於鏡頭軌道控制、TWEEN 用於鏡頭補間動畫。

import React from 'react';
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";

場景初始化

初始化渲染容器、場景、攝像機、光源。攝像機初始位置設定為位於偏左方的 (-12, 0, 0)，以便於後面使用 TWEEN 實現翻轉動畫效果。

// 場景
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
// 新增背景圖片
scene.background = new THREE.TextureLoader().load(background);
// 相機
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(-12, 0, 0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 直射光
light = new THREE.DirectionalLight(0xffffff, 1);
light.intensity = .2;
light.position.set(10, 10, 30);
light.castShadow = true;
light.shadow.mapSize.width = 512 * 12;
light.shadow.mapSize.height = 512 * 12;
light.shadow.camera.top = 100;
light.shadow.camera.bottom = - 50;
light.shadow.camera.left = - 50;
light.shadow.camera.right = 100;
scene.add(light);
// 環境光
ambientLight = new THREE.AmbientLight(0xdddddd);
scene.add(ambientLight);

建立漫畫主體

首先建立一個 Group，用於新增圖層網格，然後遍歷圖層背景圖片陣列，在迴圈體中建立每個面的網格，該網格使用平面立方體 PlaneGeometry，材質使用物理材質 MeshPhysicalMaterial，對每個網格位置設定相同的x軸和y軸值和不同的z軸值以建立景深效果。最後將 Group 新增到場景 Scene 中。

var layerGroup = new THREE.Group();
let aspect = 18;
for (let i=0; i<layers.length; i++) {
  let mesh = new THREE.Mesh(new THREE.PlaneGeometry(10.41, 16), new THREE.MeshPhysicalMaterial({
    map: new THREE.TextureLoader().load(layers[i]),
    transparent: true,
    side: THREE.DoubleSide
  }));
  mesh.position.set(0, 0, i);
  mesh.scale.set(1 - (i / aspect), 1 - (i / aspect), 1 - (i / aspect));
  layerGroup.add(mesh);
  // 文字
  if (i === 5) {
    mesh.material.metalness = .6;
    mesh.material.emissive = new THREE.Color(0x55cfff);
    mesh.material.emissiveIntensity = 1.6;
    mesh.material.opacity = .9;
  }
  // 會話框
  if (i === 6) {
    mesh.scale.set(1.5, 1.5, 1.5);
    animateLayer = mesh;
  }
}
layerGroup.scale.set(1.2, 1.2, 1.2);

到這一步，實現效果如下圖所示：

`?` THREE.Group 層級模型

將具有相同主體的網格可以通過 Group 合併在一起，以便於提高執行效率。Three.js 層級模型 Group 的基類是 Object3D，它是 Three.js 中大部分物件的基類，提供了一系列的屬性和方法來對三維空間中的物體進行操縱。如可以通過 .add(object) 方法來將物件進行組合，該方法將物件新增為子物件。

但最好使用 Group 來作為父物件，因為 Group 相比較Object3D 更語義化，可以使用 Group 作為點、線、網格等模型的父物件，用來構建一個層級模型。

建立Boom背景

為了加強視覺效果，我新增了一個? Boom 爆炸圖形平面作為背景，用滑鼠移動的時候隨著光線的變化，可以看到該圖案有金屬漸變效果，這種效果主要是通過高光材質 MeshPhongMaterial 的 specular 和 shininess 屬性實現的。

const boom = new THREE.Mesh(new THREE.PlaneGeometry(36.76, 27.05), new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load(boomImage),
  transparent: true,
  shininess: 160,
  specular: new THREE.Color(0xff6d00),
  opacity: .7
}));
boom.scale.set(.8, .8, .8);
boom.position.set(0, 0, -3);
layerGroup.add(boom)
scene.add(layerGroup);

新增後效果：

`?` MeshPhongMaterial 高光網格材質

MeshPhongMaterial 是一種用於具有鏡面高光的光澤表面的材質。該材質使用非物理的 Blinn-Phong 模型來計算反射率。與 MeshLambertMaterial 中使用的 Lambertian 模型不同，該材質可以模擬具有鏡面高光的光澤表面，如塗漆木材。

建構函式：

MeshPhongMaterial(parameters: Object)

parameters：可選，用於定義材質外觀的物件，具有一個或多個屬性。材質的任何屬性都可以從此處傳入(包括從Material繼承的任何屬性)。

特殊屬性：

.emissive[Color]：材質的放射光顏色，基本上是不受其他光照影響的固有顏色。預設為 黑色。
.emissiveMap[Texture]：設定發光貼圖。預設值為 null。放射貼圖顏色由放射顏色和強度所調節。
.emissiveIntensity[Float]：放射光強度。調節發光顏色。預設為 1。
.envMap[TextureCube]：環境貼圖。預設值為 null。
.isMeshPhongMaterial[Boolean]：用於檢查此類或派生類是否為 Phong 網格材質。預設值為 true。
.lightMap[Texture]：光照貼圖。預設值為 null。
.lightMapIntensity[Float]：烘焙光的強度。預設值為 1。
.reflectivity[Float]：環境貼圖對錶面的影響程度。預設值為 1，有效範圍介於 0（無反射） 和 1（完全反射） 之間。
.refractionRatio[Float]：空氣的折射率除以材質的折射率。折射率不應超過 1。預設值為 0.98。
.shininess[Float]：.specular 高亮的程度，越高的值越閃亮。預設值為 30。
.skinning[Boolean]：材質是否使用蒙皮。預設值為 false。
.specular[Color]：材質的高光顏色。預設值為 0x111111 的顏色 Color。這定義了材質的光澤度和光澤的顏色。
.specularMap[Texture]：鏡面反射貼圖值會影響鏡面高光以及環境貼圖對錶面的影響程度。預設值為 null。

? 使用 Phong 著色模型計算著色時，會計算每個畫素的陰影，與 MeshLambertMaterial 使用的 Gouraud 模型相比，該模型的結果更準確，但代價是犧牲一些效能。

鏡頭控制、縮放適配、動畫

鏡頭補間動畫，鏡頭切換到正確位置。

Animations.animateCamera(camera, controls, { x: 0, y: 0, z: 20 }, { x: 0, y: 0, z: 0 }, 3600, () => { });

鏡頭控制，本示例中顯示了模型平移以及水平垂直旋轉的角度，以達到最好的預覽效果。

controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.enablePan = false;
// 垂直旋轉角度限制
controls.minPolarAngle = 1.2;
controls.maxPolarAngle = 1.8;
// 水平旋轉角度限制
controls.minAzimuthAngle = -.6;
controls.maxAzimuthAngle = .6;

螢幕縮放適配。

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}, false);

對於會話框圖層網格，我給它新增了在一條光滑曲線上左右移動的動畫效果，主要是通過修改它在 x 軸和 y 軸上的 position 來實現的。

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls && controls.update();
  TWEEN && TWEEN.update();
  // 會話框擺動動畫
  step += 0.01;
  animateLayer.position.x = 2.4 + Math.cos(step);
  animateLayer.position.y = .4 + Math.abs(Math.sin(step));
}

`?` 正弦餘弦函式建立模型移動軌跡

使用 step 變數並在函式 Math.cos() 和 Math.sin() 的幫助下，建立出一條光滑的軌跡。step+= 0.01 定義的是球的彈跳速度。

到此，本示例的完整實現都描述完畢了，大家感興趣的話，可以動手試著把自己喜歡的圖片改造成 3D 檢視。拜託，使用 Three.js 這樣展示圖片超酷的好嗎！ ?

? 完整程式碼：https://github.com/dragonir/3d/tree/master/src/containers/Comic

總結

本文知識點主要包含的的新知識：

THREE.Group 層級模型
MeshPhongMaterial 高光網格材質
正弦餘弦函式 建立模型移動軌跡

想了解場景初始化、光照、陰影、基礎幾何體、網格、材質及其他 Three.js 的相關知識，可閱讀我往期文章。轉載請註明原文地址和作者。如果覺得文章對你有幫助，不要忘了一鍵三連哦 ?。

附錄

本文作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/15921635.html

MetaWork：拜託，這樣遠端結對程式設計超酷的！
2022-04-23
程式設計
APISpace 的二維碼生成器，效果好、使用易
2023-03-09
API
jquery實現的具有漸變效果的圖片切換
2017-04-01
jQuery
拜託，面試別再讓我數1了！！！
2018-10-08
面試
使用Three.js實現神奇的3D文字懸浮效果
2022-03-09
JS3D
使用CSS3實現3D圖片滑塊效果
2014-06-11
CSSS33D
JS實現類似圖片3D效果
2013-11-30
JS3D
php生成二維碼圖片
2019-02-16
PHP
使用 three.js 中的 CSS3DRenderer 實現 3d 卡片的效果
2019-04-16
JSCSSS33D
three.js實現的地球3D旋轉效果
2017-04-17
JS3D
css3實現滑鼠劃過圖片具有閃光效果
2017-02-20
CSSS3
三種讓網站圖片生成灰色效果的方法
2013-12-21
網站
Android 生成帶圖片的二維碼
2015-05-15
Android
讓View具有彈性效果的動畫——SpringAnimation
2019-03-22
View動畫Spring
委託載入圖片
2016-03-02
43 Three.js自定義二維圖形THREE.ShapeGeometry
2017-12-15
JS
二維CANVAS基本語法（圖片Image）
2018-01-15
Canvas
three.js 3D立方體效果程式碼例項
2017-02-20
JS3D
使用純 CSS 實現超酷炫的粘性氣泡效果
2022-07-05
CSS
常用的思維導圖工具有哪些
2019-09-16
canvas實現二維碼和圖片合成
2019-02-16
Canvas
three.js 將圖片馬賽克化
2020-07-19
JS
three.js實現的3D球狀拖動旋轉效果
2017-04-17
JS3D
讓View具有減速效果的動畫——FlingAnimation
2019-03-22
View動畫
flex圖片居中效果
2017-02-19
Flex
使用CSS的clip-path實現圖片剪下效果
2021-01-12
CSS
設定二維碼圖片背景透明教程
2019-06-29
PHP 修改圖片顏色（生成彩色二維碼）
2017-10-27
PHP
使用 jquery.qrcode.js 生成網站地址url二維碼圖片
2019-05-11
jQueryJS網站
基於ZXingAndroid實現生成二維碼圖片和相機掃描二維碼圖片即時解碼的功能
2018-03-29
Android
基於ZXing Android實現生成二維碼圖片和相機掃描二維碼圖片即時解碼的功能
2018-03-29
Android
一個小技巧，讓您的ABAP OPEN SQL具有自描述效果
2020-04-25
SQL
拜託，面試別再問我TopK了！！！
2018-10-08
面試TopK
拜託，面試別再問我JVM了！！！
2018-10-29
面試JVM
Three.js 進階之旅：物理效果-3D乒乓球小遊戲 ?
2023-03-20
JS3D遊戲
CSS圖片的灰色顯示效果
2018-06-28
CSS
HTML中圖片的蒙朧效果！
2005-06-07
HTML
android圖片輪播效果，RollViewPager的簡單使用
2016-05-06
AndroidViewpager