2. 程式人生 > >教你如何利用threejs對3D模型面板進行DIY

教你如何利用threejs對3D模型面板進行DIY

阿新 • • 發佈：2020-03-30
一步一步教你如何利用threejs載入gltf模型來實現DIY換膚功能。 ### 模型準備 - ***模型製作*** 模型可以通過網上下載，也可以自己通過c4d、maya、blender等模型製作軟體得到。這裡就不敘述有關模型製作的問題，本文中會在blender進行模型的有關設定。 - ***模型匯出*** 1、匯出前設定 為了在頁面中方便後續的操作，在匯出模型前，將模型的各個部件拆分好進行命名約定（本文以小車模型為例）具體如下圖所示： 圖1 2、匯出模型格式選取 threejs可以載入的模型有很多中，之前.ojb、.json、.FBX等格式都有講過參我之前的文章[從Maya中把模型搬運至網頁的過程](http://www.flowers1225.com/lessons/2018/03/07/1)、[首個threejs-3D專案](https://flowers1225.com/lessons/2016/02/29/1)，所以我這裡選取官方推薦現在使用的格式.gltf、.glb。 > gltf與glb的區別： gltf檔案類似與json格式而glb是以二進位制流進行儲存。 3、模型匯出 在blender中直接有gltf格式匯出的選項，如果沒有特別的要求，按照預設配置匯出就可以了。匯出介面如下圖所示：
圖2 ### 場景建立 - ***使用threejs建立一個場景*** 首先將需要的東西從threejs (r110) 中引入，然後進行建立場景四部曲： ```javascript import {Scene, WebGLRenderer, PerspectiveCamera, Color} from 'three'; ``` 1、Scene ```javascript let scene = new Scene(); scene.background = new Color(0xB3CEFB); scene.fog = new Fog(scene.background, 1, 100); ``` 2、Camera ```javascript let camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 15; ``` 3、Render ```javascript let renderer = new WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); ``` 4、Animate ```javascript const render = function () { requestAnimationFrame(render); renderer.render(scene, camera); } ``` 然後就會看到一個藍藍的場景（因為設定了背景顏色） ### 載入模型 - ***GLTFLoader載入模型至場景*** ```javascript import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; const loader = function () { let gltfLoader = new GLTFLoader(); gltfLoader.load( 'toycar.glb', // your .glb & .gltf gltf => { scene.add(gltf.scene); // 新增至建立好的場景中 // gltf.animations; // Array

相關推薦

教你如何利用threejs對3D模型面板進行DIY

一步一步教你如何利用threejs載入gltf模型來實現DIY換膚功能。 ### 模型準備 - ***模型製作*** 模型可以通過網上下載，也可以自己通過c4d、maya、blender等模型製作軟體得到。這裡就不敘述有關模型製作的問題，本文中會在blender進行模型的有關設定。 - ***模型

手把手教你玩轉 CSS3 3D 技術（轉載）

是不是 col 默認 占滿 概念 ebe 說明 adb relative css3的3d起步 要玩轉css3的3d，就必須了解幾個詞匯，便是透視(perspective)、旋轉(rotate)和移動(translate)。透視即是以現實的視角來看屏幕上的2D事物，從而展現3

手把手教你利用前端字型檔案(.ttf)混淆數字來阻止爬蟲爬取網站資料

先上一張效果圖 假如 正確的數字是321456 這時候使用者看到的就是對的 而爬蟲在抓取資料的時候 抓到得是123456 混淆了數字 怎麼實現呢？ 工具： 1、FontCreator （中文漢化破解版） 當然英語好或者土豪的可以無視 2、做好的字型圖片 步

教你利用Python把圖片轉字元畫！程式碼哆啦A夢你見過嘛？

圖片轉字元畫的關鍵是把圖片的灰度值與自定義的字符集之間建立對映關係，不同區間的灰度值對應不同的字元，之後將圖片每一個畫素對應的字元打印出來，就是我們要的字元畫。 我們可以使用灰度值公式將畫素的 RGB 值對映到灰度值： gray ＝ 0.2126 * r +

朋友印象引流指令碼，教你利用引流指令碼大量精準引流

【使用步驟】 第一步：下載雷電模擬器 版本 2.0.52 第二步：安裝引流指令碼+app 預設會打包在資料夾內 下載後解壓可以看到 第三步：設定雷電模擬器:自定義解析度 寬：480 高：800 DPI：160 第三步：設定雷電模擬器:自定義解析度 寬：4

聰哥哥教你學Python之3D畫圖

看著那些高大尚的表格、線形圖或者是遊戲中的統計分析圖等等。如果是用Java這門後端語言來實現，實現倒不是很大的問題，不過需要一定的精力和時間投入。但是那樣代價太大了。 今天我主要介紹的是Python的3D畫圖API，以下是程式碼示例: 示例一: # -*- codi

教你利用Composer安裝Magento 2.0

2014年12月的Magento的2.0測試版釋出。我是如此渴望得到它，因為“Magento2將標誌著一個轉折點，並會擴大其市場佔有率上！”（馬克拉維爾，在eBay擔任產品副總裁、中型市場和Magento總經理）。 Wow, sound great! 在等待公測版本中，我們應該抓緊時

利用Python對QQ空間資料進行分析，瞭解你的QQ好友

對如下內容進行了分析: 好友發說說月份統計 好友所屬星座統計 好友手機裝置統計 好友發說說小時統計 對好友的好友進行統計 本人對於Python學習建立了一個小小的學習圈子，為各位提供了一個平臺，大家一起來討論學習Python。歡迎各位到來Python學習群：96041

【three.js : 3D】【load】threejs：3D模型匯入問題

  轉載：threejs：3D模型匯入問題 想想複雜的模型就交給3D設計師進行創作，而我們開發時只需引入模型檔案，是不是很美滋滋？ 當然，如果你時間充裕，又對模型創作感興趣，那你確實可以花時間好好學習3D建模軟體的使用，這樣以後就可以自己建立所需模型，由自己匯出與匯入模型檔案。

pandas創始人手把手教你利用Python進行資料分析（思維導圖）

4步教你開發風控評分模型

“你的模型準麼？” “你的模型真的有用麼？” “你的模型對風控有價值麼？” 在為P2P公司建立風控評分模型過程中，這是最常見的問題。為了回答這一問題，我們想先討論下如何從實際業務出發，以怎樣的開發流程才能建立一個有效、有用、有價值的模型，希望讀後能給你一定的啟發。

ThreeJS載入3D模型

效果：   程式碼： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Bunny</title> <style>body{backgro

手把手教你如何部署深度學習模型

摘要： 本文將講解如何部署深度學習模型，讓你不再對如何快速地將機器學習模型部署到生產中感到困擾 我剛剛訓練了機器學習模型——那麼現在呢？ 這篇文章介紹了一種快速的方法，將經過訓練的機器學習模型部署到生產中。 請閱讀以下內容：如果您已經成功地使用諸如Tensorflow或

教你利用一款小軟體輕鬆下載iPhone網頁上的視訊

蘋果手機有個痛點，就是不支援檔案管理。對於那些需要在移動端處理文件或者說整理檔案的朋友來說，沒有檔案管理這個功能絕對讓人抓狂，好在作為良心企業的Readdle，為我們開發了Documents，並且免費。目前的版本是Documents 6，可以在App Store免費下載。

GA：利用GA對一元函數進行優化過程，求x∈(0,10)中y的最大值——Jason niu

title variable ati 過程 優化 mea ... http [] x = 0:0.01:10; y = x + 10*sin(5*x)+7*cos(4*x); figure plot(x, y) xlabel(‘independent variable

利用python對2012美國大選進行資料分析(四，時間處理)

1，str轉datetime 我們可以使用pd.to_datetime(series,format='%Y%m%d')將字元轉化為日期，格式為年月日。 data_vs['time'] = pd.to_datetime(data_vs['contb_receipt_dt']

TensorFlow實現人臉識別(5)-------利用訓練好的模型實時進行人臉檢測

經過前面複雜的操作，訓練出來對於某一個人的識別模型。本文將利用該模型對於開啟的視訊或者攝像頭實時的識別該人。 讀取視訊 ==> 識別人臉 ==> 繪製標誌 程式碼如下： #-*- coding:UTF-8 -*- import tensor

EL之RF(RFC)：利用RF對二分類問題進行建模並評估

EL之RF(RFC)：利用RF對二分類問題進行建模並評估 輸出結果   設計思路   核心程式碼 auc = [] nTreeList = range(50, 2000, 50) for iTrees in nTreeList:

EL之RF(RFC)：利用RF對多分類問題進行建模並評估(六分類+分層抽樣)

EL之RF(RFC)：利用RF對多分類問題進行建模並評估(六分類+分層抽樣) 輸出結果 設計思路   核心程式碼 missCLassError = [] nTreeList = range(50, 2000, 50) for iTrees in n

EL之GB(GBC)：利用GB對二分類問題進行建模並評估

EL之GB(GBC)：利用GB對二分類問題進行建模並評估 輸出結果 T1、純GB演算法 T2、以RF為基學習器的GB演算法         設計思路   核心程式碼