Threejs-in-autonomous-driving-5图片替代模型

jiezi

5 年前

在自动驾驶实际中的研发工具中，camera 一般是跟随主车进行移动的。那么主车是以固定视角展示给用户的。所以并不需要使用一个很漂亮的模型。由此可见我们完全可以使用图片来代替主车模型。来加速我们的页面加载速度和提升视觉效果。

如果简单把图片作为纹理贴在多边形上有多种问题：

1. 因为，图片很难达到和模型完全匹配。（uv 也非常难以调整）
2. 而且一个 6 面多边形即使把高度设置为 1 也会看起来很奇怪。
3. 通过多边形做主车来贴纹理的方式，主车转弯时会因为矩阵转换导致问题意想不到的效果。

结论：显而易见使用 geometry + textrue 的方式并不能实现。

我们需要用到一个 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

geometry + texture 尝试

Sprite