DreamTexture.js 是面向 three.js 開發(fā)者的?3D 模型紋理自動生成與設(shè)置開發(fā)包，可以為 webGL 應(yīng)用增加 3D 模型的快速自動紋理化能力。

圖一為原始模型, 圖二圖三為貼圖后的模型。提示詞：

city, Realistic , cinematic , Front view ,Game scene graph

1、DreamTexture.js 開發(fā)包內(nèi)容

DreamTexture.js 基于 Three.js 和穩(wěn)定擴散（stable diffusion） AI 模型開發(fā)，用于實現(xiàn)?3D 模型的自動紋理化，當然版本 V1.0，主要文件及目錄組織結(jié)構(gòu)如下：

2、DreamTexture.js 開發(fā)包快速上手

以 ESM 庫為例介紹如何使用?DreamTexture.js 開發(fā)包為 Three.js 應(yīng)用增加 3D 模型的自動化紋理能力。

首先參考開發(fā)包中的穩(wěn)定擴散服務(wù)安裝指南部署自己的 stable diffusion api 服務(wù)，支持 windows 和 Linux。

接下來安裝 three.js 開發(fā)環(huán)境，安裝完成后需要引入 DreamTexture.js 庫文件，以 ESM 庫為例，引入代碼如下：

import * as THREE from 'three';
import DreamTexture from './dream-texture.esm.min';

現(xiàn)在創(chuàng)建一個場景，在場景中導(dǎo)入 GLTF 模型 ，并可以適當?shù)男D(zhuǎn)或移動模型：

//將模型導(dǎo)入到場景
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('monkey.glb', async (e) => {
  scene.add(e.scene);
});

// 將模型旋轉(zhuǎn)到任何你想要的角度!
box.rotation.y = -Math.PI / 4;

然后實例化一個 DreamTexture 對象，注意要在參數(shù)中指定你的穩(wěn)定擴散 API 服務(wù)的 URL：

//初始化DreamTexture對象，傳入您的stable diffusion api 地址
const dt = new DreamTexture({
  baseUrl: 'http://127.0.0.1:7860', //stable diffusion url
});

現(xiàn)在就可以調(diào)用 DreamTexture 對象的 setTexture 方法傳入提示詞等參數(shù), 讓 AI 模型自動生成生成一張紋理圖片，并投射到模型上，代碼如下：

//編寫提示詞和其他參數(shù)
// 成功啟動stable diffusion api后，可在 http://127.0.0.1:7860/docs 查看文檔
const params = {
    prompt: 'monkey head, Brown hair, cartoon',//描述所需圖像的細節(jié)越詳細，Stable Diffusion生成效果越接近描述，較少描述則更具創(chuàng)意性。
    negative_prompt: 'blurry',//不希望Stable Diffusion生成的內(nèi)容，用于排除不需要的元素。
    denoising_strength: 0.85,// 去噪強度
    cfg_scale: 15,//文字CFG比例
    image_cfg_scale: 7,//圖片CFG比例
    steps: 10,//采樣步數(shù)
    sampler_index: 'DPM++ SDE Karras',
    sampler_name: '',
};
dt.setTexture(scene, params).then((res) => {
  console.log('紋理添加成功！');
});

3D 模型的自動紋理化效果如下：

案例 1：

圖一為原始模型, 圖二圖三為貼圖后的模型。提示詞：

car, Realistic , photography , hyper quality , high detail , high resolution , Unreal Engine , Side view

案例 2：

圖一為原始模型, 圖二圖三為貼圖后的模型。圖二提示詞：

Realistic , photography, bottle, porcelain

圖三：將'porcelain'換為'glass'

3、DreamTexture.js 開發(fā)包 cjs/umd 庫文件的使用

DreamTexture?支持三種常用的 js 庫格式，除了前面介紹的 esm 格式，還支持 cjs、umd 格式：

cjs 庫的引入代碼如下：

const ProjectedMaterial = require('./dream-texture.cjs.js');

umd 庫的引入代碼如下：

<script src="./three.js"></script>
<script src="./dream-texture.umd.js"></script>

4、DreamTexture.js 開發(fā)包 API 接口說明

DreamTexture.js 的 API 接口非常簡單，說明如下：

• new DreamTexture({ baseUrl })

初始化 DreamTexture 對象,稍后用于 3D 模型的自動紋理化。

• dreamTexture.setTexture(object3d:THREE.Object3D, params)

DreamTexture 會將傳入的 object3d 的正視圖作為依據(jù)來完成 3D 場景的自動紋理化，包括紋理的生成和自動投射。

3D自動紋理開發(fā)包：DreamTexture.js自動紋理化開發(fā)包 - NSDT

轉(zhuǎn)載：面向Three.js開發(fā)者的3D自動紋理化開發(fā)包 (mvrlink.com)文章來源地址http://www.zghlxwxcb.cn/news/detail-737371.html

到了這里，關(guān)于面向Three.js開發(fā)者的3D自動紋理化開發(fā)包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！