Three.js搭建小米SU7三維汽車實戰(5)su7登場

汽車模型加載

我們在sktechfab上下載的汽車是glb的文件格式,所以使用gltfLoader進行加載。這里將小車直接加載進來看看效果;
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
....其余代碼省略
const gltfLoader = new GLTFLoader();
gltfLoader.load("/src/assets/models/su7.glb", (gltf) => {const model = gltf.scene;scene.add(model);
});

我們會發現小車是黑的,這是因為我們當前場景中并沒有光照信息,我們需要為場景添加光照。

無光照時的模型

const ambientLight = new THREE.AmbientLight(0xf7f8fc, 0.2);
scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight(0xf7f8fc, 1);
directionalLight.position.set(0, 5, 0);
scene.add(directionalLight);

添加光照之后小車有了顏色,但是細微觀察還缺少了一些效果,比如汽車漆面上的反射效果。

表面反射

我們可以給當前的場景設置環境屬性,來為場景中所有的物體添加環境反射,這需要我們準備一張**全景圖**

全景圖概念

全景圖的原理其實很簡單,如下圖所示,假設我們所處的空間在一個很大的立方體內部,那么全景圖就是用六張圖片,賦予立方體六個面的紋理,我們在立方體內部觀察,每個方向的圖片都不一樣,這樣就有了身臨其境的感覺

全景圖下的觀察效果

一般全景圖是由6張圖片組成,也可以使用hdr格式的壓縮圖片,兩者都可以實現全景圖
本案例中給大家提供的是hdr的全景圖,我們使用RGBELoader來進行加載,并且設置環境屬性,注意不要設置背景

const texture = new THREE.CubeTextureLoader().setPath('/src/assets/texture/park/').load(['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg',])
// 創建一個紋理加載器, 加載紋理圖片
const texture = new RGBELoader().load('/src/assets/hdr/city.hdr', () => {texture.mapping = THREE.EquirectangularReflectionMappingscene.background = texture
})

可以看到我們的油漆表面有了一層反射效果

細心的同學不難發現,我們的小車一部分在地下,這是建模的問題,我們可以在three中進行調整,將平面往下走0.02個單位即可

mesh.position.set(0, -0.02, 0);

我們還可以觀察到,和懂車帝官網對比,我們的su7沒有在地面上展示出來陰影,接下來我們設置一下陰影效果。

添加陰影

添加陰影需要幾個步驟 1. 設置渲染器支持陰影貼圖 2. 設置物體支持投射陰影 3. 設置平面能夠接受陰影 4. 設置燈光支持投射陰影 5. 設置平面為standard材質 這五個步驟對應的源碼為:
renderer.shadowMap.enabled=true

我們的模型是不能直接設置投射陰影的,模型是一棵樹的結構,需要遍歷到每一個葉子節點,然后設置投射陰影

gltfLoader.load("/src/assets/models/su7.glb", (gltf) => {const model = gltf.scene;model.traverse((mesh) => {if (mesh.isMesh) {mesh.castShadow = true;}});scene.add(model);
});
const geom = new THREE.CircleGeometry(20, 150);
const material = new THREE.MeshStandardMaterial({color: new THREE.Color(0xffffff),side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geom, material);
mesh.rotation.x -= (90 * Math.PI) / 180;
mesh.position.set(0, -0.02, 0);
scene.add(mesh);
mesh.receiveShadow=true
directionalLight.castShadow=true

實現效果,我們發現和懂車帝官網的陰影比較起來,第一是顏色不夠深,第二是邊緣沒有進行柔滑,我們很難和懂車帝做的一模一樣,只能盡量去模擬這個效果,因為懂車帝官網的效果是用一張圖片做的,我們沒有這樣的圖片資源

懂車帝官網效果

提高陰影的質量

陰影本質上其實是一張貼圖,貼圖的分辨率是最能提高質量的方法 提高之后可以看到陰影更細致了,但是顏色還沒有加深

我們可以通過aoMap加深陰影顏色
aoMap叫做環境遮擋貼圖,通過設置aoMap,我們可以加深陰影的顏色,這個aoMap我們需要設置在地板上
可以看到陰影的顏色更深了,這是aoMap的功勞

const floorTexture = new THREE.TextureLoader().load("/src/assets/images/changjing2.jpg"
);
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(1, 1);const geom = new THREE.CircleGeometry(20, 29);
const material = new THREE.MeshStandardMaterial({// 強制three使用雙面渲染這個平面side: THREE.DoubleSide,transparent: true,
//   aoMap能讓有陰影的地方更明顯aoMap: floorTexture,aoMapIntensity:1.5
});
const mesh = new THREE.Mesh(geom, material);
mesh.position.set(0, -0.02, 0);
scene.add(mesh);
mesh.rotation.x -= (90 * Math.PI) / 180;
mesh.receiveShadow = true;

然后我們設置一下柔和陰影,讓其邊緣變的模糊

directionalLight.shadow.radius = 8; // 柔化陰影邊緣

陰影的最終效果到這里差不多了,剩下的參數大家可以自己調整一下

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/81611.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/81611.shtml
英文地址,請注明出處:http://en.pswp.cn/web/81611.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ETL怎么實現多流自定義合并?

隨著信息技術的迅猛發展以及數據生成環境的多樣化,互聯網、物聯網和社交媒體的廣泛應用導致各種設備和平臺不斷產生大量數據,需要整合這些數據,從而進行數據融合。數據集成和管理平臺ETLCloud,主要用于支持數據的抽取(…

數據結構- 10種常見樹:二叉樹、平衡二叉樹、完全二叉樹

一、樹 樹型結構是一類重要的非線性數據結構。其中以樹和二叉樹最為常用,直觀看來,樹是以分支關系定義的層次結構。把它叫做“樹”是因為它常看起來像一棵倒掛的樹,也就是說它常是根朝上,而葉朝下的。 1.樹的定義: 樹…

Java常用加密方式

一,加密算法分類 對稱加密:指加密和解密的密鑰相同,優點就是加解密的效率高且易于實現。 非對稱加密:指加密和解密的密鑰不相同,也稱為公私要加密。 不可逆加密:特征就是加密過程不需要密鑰,…

SQLite軟件架構與實現源代碼淺析

概述 SQLite 是一個用 C 語言編寫的庫,它成功打造出了一款小型、快速、獨立、具備高可靠性且功能完備的 SQL 數據庫引擎。本文檔將為您簡要介紹其架構、關鍵組件及其協同運作模式。 SQLite 顯著特點之一是無服務器架構。不同于常規數據庫,它并非以單獨進…

讓 Deepseek GPS測速

下面是一個簡單的微信小程序GPS測速功能的實現代碼&#xff0c;包括前端頁面和后端邏輯。 1. 頁面結構 (index.wxml) <view class"container"><view class"speed-display"><text class"speed-value">{{speed}}</text>…

什么是軟件的生命周期,以及常見的開發測試模型

目錄 一、軟件的生命周期 1、什么是生命周期&#xff1f; 2、每個階段都要做些什么&#xff1f; 二、常見的開發模型 1、瀑布模型 2、螺旋模型 3、增量模型、迭代模型 4、敏捷模型 scrum模型 三個角色 五個會議 一、軟件的生命周期 1、什么是生命周期&#xff…

JWT安全:弱簽名測試.【實現越權繞過.】

JWT安全&#xff1a;假密鑰【簽名隨便寫實現越權繞過.】 JSON Web 令牌 (JWT)是一種在系統之間發送加密簽名 JSON 數據的標準化格式。理論上&#xff0c;它們可以包含任何類型的數據&#xff0c;但最常用于在身份驗證、會話處理和訪問控制機制中發送有關用戶的信息(“聲明”)。…

數據分析與應用-----使用scikit-learn構建模型

目錄 一、使用sklearn轉換器處理數據 &#xff08;一&#xff09;、加載datasets模塊中的數據集 &#xff08;二&#xff09;、將數據集劃分為訓練集和測試集 ?編輯 train_test_spli &#xff08;三&#xff09;、使用sklearn轉換器進行數據預處理與降維 PCA 二、 構…

【Tomcat】Tomcat端口僅允許本地訪問設置方法

要設置Tomcat端口僅允許本地訪問&#xff0c;可以通過以下兩種主要方式實現&#xff1a; 方法一&#xff1a;修改Tomcat配置文件&#xff08;推薦&#xff09; 修改 server.xml 文件 打開Tomcat的配置文件 conf/server.xml&#xff0c;找到 <Connector> 標簽&#xff08;…

arcgis字段計算器中計算矢量面的每個點坐標

python腳本 函數 def ExportCoordinates(feat):coors = []partnum = 0partcount = feat.partCountwhile partnum < partcount:part = feat.getPart(partnum)pnt = part.next()while pnt:coors.append("({}, {})".format(pnt.X,pnt.Y))pnt = part.next()if not p…

企業級AI開啟落地戰,得場景者得天下

文&#xff5c;白 鴿 編&#xff5c;王一粟 這兩周&#xff0c;企業級智能體開發平臺頗有你方唱罷我方登臺的架勢。 微軟、騰訊、網易等國內外巨頭&#xff0c;近期都相繼宣布推出了新一代智能體開發平臺。相比于兩年前&#xff0c;智能體開發的產品邏輯已經有了翻天覆地的變…

探索C++標準模板庫(STL):String接口實踐+底層的模擬實現(中篇)

前引&#xff1a;上一篇文章小編已經整理出了String的常用接口&#xff0c;梳理了各個接口的功能、參數&#xff0c;如何使用等各種實例。本篇文章將帶大家看看String這些接口的實踐使用&#xff0c;探索這些接口的實用性&#xff0c;是如何增加代碼效率的。在本篇文章的末尾&a…

【模型顯著性分析】配對樣本 t 檢驗

寫在前面&#xff1a;本博客僅作記錄學習之用&#xff0c;部分圖片來自網絡&#xff0c;如需引用請注明出處&#xff0c;同時如有侵犯您的權益&#xff0c;請聯系刪除&#xff01; 文章目錄 前言 t t t 檢驗配對樣本 t t t 檢驗&#xff08;適用于相關組&#xff09;代碼論文描…

商旅平臺排名:十大商旅服務平臺解析

商旅平臺排名&#xff1a;十大商旅服務平臺解析 在企業降本增效的關鍵轉型期&#xff0c;商旅管理正成為優化運營成本與提升管理效能的核心場景。如何在保障出行體驗的同時實現差旅成本精細化管控、管理流程智能化&#xff0c;成為越來越多企業的戰略焦點。隨著AI技術在數據洞…

題海拾貝:P1208 [USACO1.3] 混合牛奶 Mixing Milk

Hello大家好&#xff01;很高興我們又見面啦&#xff01;給生活添點passion&#xff0c;開始今天的編程之路&#xff01; 我的博客&#xff1a;<但凡. 我的專欄&#xff1a;《編程之路》、《數據結構與算法之美》、《題海拾貝》、《C修煉之路》 歡迎點贊&#xff0c;關注&am…

每天掌握一個Linux命令 - ab(Apache Benchmark)

Linux 命令工具 ab 使用指南 一、工具概述 ab&#xff08;Apache Benchmark&#xff09; 是 Apache 官方提供的開源壓力測試工具&#xff0c;用于衡量 Web 服務器的性能。它通過模擬多并發請求&#xff0c;測試服務器在高負載下的響應速度、吞吐量和穩定性&#xff0c;常用于…

AI的“空間盲癥“

<------最重要的是訂閱“魯班模錘”------> 當我們看到一張照片時&#xff0c;大腦會自動分析其中的空間關系——哪個物體在前&#xff0c;哪個在后&#xff0c;左邊是什么&#xff0c;右邊是什么。但對于當今最先進的AI系統來說&#xff0c;這種看似簡單的空間理解卻是…

數據擬合實驗

實驗類型&#xff1a;●驗證性實驗 ○綜合性實驗 ○設計性實驗 實驗目的: 進一步熟練掌握最小二乘多項式擬合算法&#xff0c;提高編程能力和解決擬合問題的實踐技能。 實驗內容&#xff1a; 1 對下列數據&#xff0c;求解最小二乘拋物線f(x)Ax2BxC x -3 -1 1 3 y 15 5 …

系統思考:心智模式與業務創新

在最近的項目交付討論中&#xff0c;我頻繁聽到一個詞&#xff1a;“缺合適的人”。這讓我陷入了深思&#xff1a;我們是否還在傳統的生產力概念&#xff1f;納瓦爾提出的三種杠桿&#xff1a;勞動力、資本、零邊際成本產品。在當今這個信息化、全球化的商業世界中&#xff0c;…

python分步合并處理excel數據

文章目錄 概要整體架構流程技術名詞解釋技術細節小結概要 客戶需求 1. 背景與目標 用戶需要將三個包含農業實驗數據的Excel表格(AK、AN、AP)合并為一個結構化數據集,用于后續分析。每個表格包含相同類型的字段(如對照組與PSB處理組的樣本數、均值、標準差),但需通過字…