three.js：在全景图的地板上添加图片

Question

我正在使用此代码Panorama ，我想在此全景地板上添加图片。 有人可以指导我如何做到这一点。 图片非常小（256x256）

Answer 1

为了在地板上添加图像，您应该创建一个PlaneGeometry，一个MeshBasicMaterial，然后将它们应用于网格，然后更改position和rotationOnAxis。

例：

var geometry = new THREE.PlaneGeometry( 1, 1 );
var material = new THREE.MeshBasicMaterial( { map : texture, opacity : 1, side : THREE.DoubleSide, transparent : true } );
var sprite = new THREE.Mesh( geometry, material );

纹理是您要插入的图像，通过纹理加载器添加。

然后，必须通过position.set函数设置子画面的位置。

要将精灵设置为北：

sprite.position.set(0,-360,0);

要将精灵放置在南方：

sprite.position.set(0,360,0);

最后一步是将精灵旋转90度以使其可见，因为否则它将像这样| 并不是 [] 。 所以我们必须做一个rotateOnAxis：

sprite.rotateOnAxis(  new THREE.Vector3( 1, 0, 0 ), THREE.Math.degToRad(90) );

如果图像太小，可以使用：

sprite.scale.set( scaleValue, scaleValue, scaleValue );

其中scaleValue是大于0的值。