在自动驾驶实际中的研发工具中，camera一般是跟随主车进行移动的。那么主车是以固定视角展示给用户的。所以并不需要使用一个很漂亮的模型。由此可见我们完全可以使用图片来代替主车模型。来加速我们的页面加载速度和提升视觉效果。
geometry + texture尝试
如果简单把图片作为纹理贴在多边形上有多种问题：
1.因为，图片很难达到和模型完全匹配。（uv也非常难以调整）
2.而且一个6面多边形即使把高度设置为1也会看起来很奇怪。
3.通过多边形做主车来贴纹理的方式，主车转弯时会因为矩阵转换导致问题意想不到的效果。
结论：显而易见使用geometry + textrue的方式并不能实现。
Sprite
我们需要用到一个threejs的特殊的载体， Sprite
Sprite是一个总是面朝着摄像机的平面，通常含有使用一个半透明的纹理。
通过这种方式我们可以轻松的把texture应用在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进行缩放
car.add(sprite);
scene.add(car);
- 我的blog: neverland.github.io
- 我的email enix@foxmail.com
