1、场景添加天空盒最简单方式
// 默认您已经创建了相机和渲染器,就直接在场景上加入背景就行
this.scene = new Scene(); // 创建一个场景,
this.scene.background = new CubeTextureLoader()
.setPath('assets/img/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg', ])
2、走过的弯路,不建议大家使用下面方法,具体两者应用场景区别我不太清楚,有大佬明白欢迎留言
// 添加全景图
public addPanorama() {
const imgUrl = ['assets/img/nx.jpg', 'assets/img/ny.jpg', 'assets/img/nz.jpg', 'assets/img/px.jpg',
'assets/img/py.jpg', 'assets/img/pz.jpg']
const textures = this.getTexturesFromAtlasFile( imgUrl, 6 );
const materials = [];
for ( let i = 0; i < 6; i ++ ) {
materials.push( new MeshBasicMaterial( { map: textures[ i ] } ) );
}
const skyBox = new Mesh( new BoxBufferGeometry( 1024, 1024, 1024 ), materials );
// skyBox.position.set(0, 0, 0);
skyBox.geometry.scale( 1, 1, -1 );
this.scene.add( skyBox );
}
// 六个面添加图片
getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
const textures = [];
for ( let i = 0; i < tilesNum; i ++ ) {
textures[ i ] = new Texture();
}
const imageObj = new Image();
imageObj.onload = () => {
let context;
// let tileWidth = imageObj.height;
// let tileWidth = 5000;
for ( let i = 0; i < textures.length; i ++ ) {
const canvas = document.createElement( 'canvas' );
// const canvas: HTMLCanvasElement = this.canvasRef.nativeElement; // 得到canvas 元素
context = canvas.getContext( '2d' );
const canvasHeight = 1024;
canvas.height = canvasHeight;
canvas.width = canvasHeight;
// context.drawImage( imageObj, canvasHeight * i, 0, canvasHeight, canvasHeight, 0, 0, canvasHeight, canvasHeight );
context.drawImage( imageObj, 0, 0, canvasHeight, canvasHeight );
textures[ i ].image = canvas;
textures[ i ].needsUpdate = true;
}
};
imageObj.src = atlasImgUrl[0]; // 只用了一张图片,天空盒上下左右前后图片相同,有需求可以自更改为六张不同图片
return textures;
}
注意:这是两种加载天空盒方法,第一种也是最简单的,我不知道第二种应用场景,有大佬可以留言相告,感激不尽