在自動駕駛實(shí)際中的研發(fā)工具中涝影，camera一般是跟隨主車進(jìn)行移動的粉捻。那么主車是以固定視角展示給用戶的。所以并不需要使用一個很漂亮的模型了嚎。由此可見我們完全可以使用圖片來代替主車模型彰亥。來加速我們的頁面加載速度和提升視覺效果咧七。
geometry + texture嘗試
如果簡單把圖片作為紋理貼在多邊形上有多種問題：
1.因?yàn)椋瑘D片很難達(dá)到和模型完全匹配任斋。（uv也非常難以調(diào)整）
2.而且一個6面多邊形即使把高度設(shè)置為1也會看起來很奇怪继阻。
3.通過多邊形做主車來貼紋理的方式，主車轉(zhuǎn)彎時(shí)會因?yàn)榫仃囖D(zhuǎn)換導(dǎo)致問題意想不到的效果废酷。
結(jié)論：顯而易見使用geometry + textrue的方式并不能實(shí)現(xiàn)瘟檩。
Sprite
我們需要用到一個threejs的特殊的載體， Sprite
Sprite是一個總是面朝著攝像機(jī)的平面澈蟆，通常含有使用一個半透明的紋理墨辛。
通過這種方式我們可以輕松的把texture應(yīng)用在sprite，視覺上看起來也非常的棒趴俘。
import adcPng from 'assets/model/car.png';
let texture = new THREE.TextureLoader()
.load(adcPng);
texture.center.set(0, 0);
texture.needsUpdate = true;
let material = new THREE.SpriteMaterial({
map: texture,
sizeAttenuation: true,
transparent: true,
alphaTest: 0.5,
opacity: 1
});
let sprite = new THREE.Sprite(material);
car.scale.set(3.5, 3.5, .8); // 需要對sprite進(jìn)行縮放
car.add(sprite);
scene.add(car);
- 我的blog: neverland.github.io
- 我的email enix@foxmail.com
