首頁
推薦：將 NSDT 編輯器 加入你的3D開發工具鏈
背景逛 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 的相關知識，可閱讀我往期文章。轉載請注明原文地址和作者。如果覺得文章對你有幫助，不要忘了一鍵三連哦 。
轉載：https://www.cnblogs.com/dragonir/p/15921635.html3D建模學習工作室
logo設計網(www.just4love.cn)，專業的logo免費設計在線生成網站，全自動智能化logo設計，商標設計，logo在線生成！
歡迎使用logo設計網制作屬于您公司自己的logo，不僅專業而且經濟實惠，全方位滿足您公司品牌化、視覺化的需求。
在線智能LOGO設計
[掃碼關注我們]
二維碼失效
微信登錄