Three.js adds background color, background image, and panorama to the scene

1. Use of related APIs:

1 THREE.Color (for creating and representing colors)

2. THREE.TextureLoader (for loading and processing image textures)

3. THREE.SphereGeometry (used to create a sphere geometry)

4. THREE.Mesh (used to create a material object)

Added onSetSceneColor (set scene color), onSetSceneImage (set scene background image), onSetSceneViewImage (set scene panorama), onClearSceneBg (clear scene background) and other four methods.

//设置场景颜色
	onSetSceneColor(color) {
    
    
		this.onClearSceneBg()
		this.scene.background = new THREE.Color(color)
	}
	//设置场景图片
	onSetSceneImage(url) {
    
    
		this.onClearSceneBg()
		this.scene.background = new THREE.TextureLoader().load(url);
	}
	// 设置全景图
	onSetSceneViewImage(url) {
    
    
		this.onClearSceneBg()
		const sphereBufferGeometry = new THREE.SphereGeometry(40, 32, 16);
		sphereBufferGeometry.scale(-1, -1, -1);
		const material = new THREE.MeshBasicMaterial({
    
    
			map: new THREE.TextureLoader().load(url)
		});
		this.viewMesh = new THREE.Mesh(sphereBufferGeometry, material);
		this.scene.add(this.viewMesh);

	}
	// 清除场景背景
	onClearSceneBg() {
    
    
		this.scene.background = new THREE.Color('rgba(212, 223, 224)')
		if (!this.viewMesh) return false
		this.viewMesh.material.dispose()
		this.viewMesh.geometry.dispose()
		this.scene.remove(this.viewMesh)
	}

The complete code can refer to: https://gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.js

Interface renderings:

1. Background image
2. Panorama image