ThreeJs-07操控物體實現傢俱編輯器

Heymar-10發表於2024-12-18

本章節實現效果,透過gui快速新增場景,傢俱,並且可以快速設定傢俱實現一個編輯器效果

GIF

一.基礎設定與物體新增列表

用之前做過的一個案例來改

image-20241203222614342

首先不要這個模型,然後換個背景顏色,並且新增一個網格輔助器

image-20241203223414939

image-20241203223420894

1.1 新增場景

先往事件物件裡面新增一個函式,到時候點選就會呼叫這個函式,而這個函式就是往場景加這個變數,到時候會把這個變數賦值為要載入的場景模型

image-20241203224245672

image-20241203224323711

一樣的載入模型,只不過不是直接載入而是而是點選後才會把basicscene放進去

image-20241203224803185

GIF

1.2 新增物體

接下來做兩個按鈕去新增盆栽和沙發

因為這裡可能會有很多物體,所以採用迴圈的方式,假如資料為這樣,這樣的資料可以後端給

image-20241203230013934

給gui建立一個資料夾,用迴圈的方式,去給這個資料夾新增按鈕,並且注意點選的按鈕是去哪裡面找這個函式才能新增這個物體進來

image-20241203230520929

GIF

二.使用變換控制器操作物體

image-20241204220049916

匯入後建立控制器

首先需要傳入兩個引數攝像機和canvas元素

然後當控制器改變的時候,也不斷的去重新整理場景的變化

image-20241204221922625

同時監聽拖動物體上的控制器這個事件,拖動的時候軌道控制器不動,也就是場景不動

image-20241204222127419

然後當新增一個物體進來的時候要讓這個物體有控制器,就透過他的attach方法繫結物體

image-20241204222319850

犯了一個巨傻的錯誤搞了半天,不多說了

反正最後效果就是這樣

GIF

2.1 傢俱列表與控制物體切換

先建立一個傢俱列表資料夾

然後邏輯就是在之前點選新增一個物體之後就往這個資料夾裡面丟一個gui並且作用是給這個物體新增變化控制器起到選擇到他的作用

image-20241210224223274

GIF

2.2 位移旋轉縮放模式

需要用到模式

image-20241210224841923

image-20241210225233311

GIF

當然也可以透過設定鍵盤事件來快速設定

image-20241210225448461

2.3 座標的切換以及取消選擇物體

有兩個座標區域性和世界座標,可以讓物體繞著什麼座標來旋轉位移等,取消選擇直接呼叫方法

image-20241210225810776

image-20241210225838733

2.4 縮放位移旋轉的固定比例

現在的縮放位移等都是比較隨意,如果想固定每次位移等距離就可以這麼設定,首先在gui可以定義一個變數不再是函式

image-20241210230423077

然後建立一個資料夾,注意如果gui是變數,可以在後面跟一個物件,來設定變數的可選值範圍,然後透過eventobj拿到每一次改變的值,賦值給tcontrols

image-20241210230544072

GIF

旋轉縮放同理,就是設定方法不同

注意gui可以設定一個範圍,並且每次拖動改變的大小

image-20241210230817102

2.5 吸附地面與室內燈光開關

現在隨意拖動是可以拖到場景下面的,如果想要保持物體一直在地面

同樣設定一個gui的變數

image-20241210231334554

新增一個按鈕

改變這個變數即可,隨後可以利用控制器的change事件,去不斷地獲取變數的值,讓y軸一直為0就不會掉入地面

image-20241210231602572

image-20241210231711354

GIF

室內的燈光開啟,首先定義一個gui

需要給渲染器色調對映

同時把曝光調為1

image-20241210232107928

透過判斷燈光的值來改變曝光

image-20241210232225690

GIF

相關文章