Three.js は背景色、背景画像、パノラマをシーンに追加します

1. 関連する API の使用:

1 THREE.Color (色の作成と表現用)

2. THREE.TextureLoader (画像テクスチャのロードと処理用)

3. THREE.SphereGeometry (球ジオメトリの作成に使用)

4. THREE.Mesh (マテリアルオブジェクトの作成に使用)

onSetSceneColor (シーンのカラーを設定)、onSetSceneImage (シーンの背景画像を設定)、onSetSceneViewImage (シーンのパノラマを設定)、onClearSceneBg (シーンの背景をクリア) と他の 4 つのメソッドが追加されました。

//设置场景颜色
	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)
	}

完全なコードは、https: //gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.jsを参照してください。

インターフェースのレンダリング:

1. 背景画像
2. パノラマ画像