前言

本篇给大家分享一下在three.js中如修改和添加场景（scene）的背景颜色、背景图、全景图的参数信息

在上一篇 three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上

一.新增四个函数方法

1. 设置场景颜色：onSetSceneColor
2. 设置场景背景图：onSetSceneImage
3. 设置场景全景图：onSetSceneViewImage
4. 加载外部图片：onSetStorageViewImage

/**
 * @describe 背景模块方法
* @function onSetSceneColor 设置场景颜色
* @function onSetSceneImage 设置场景图片
* @function onSetSceneViewImage 设置全景图
* @function onSetSceneViewConfig 设置全景图参数
* @function onSetStorageViewImage 加载外部全景图
*/

import * as THREE from 'three'
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
function onSetSceneColor(color) {
	this.scene.background = new THREE.Color(color)
}

// 设置场景图片
function onSetSceneImage(url) {
	const texture = new THREE.TextureLoader().load(url);
	this.scene.background = texture
	this.scene.backgroundIntensity = 1
	texture.dispose()
}

// 设置全景图
function onSetSceneViewImage(config) {
	return new Promise((reslove) => {
		const { blurriness, intensity, viewImg } = config
		const texture = new THREE.TextureLoader().load(viewImg);
		texture.mapping = THREE.EquirectangularReflectionMapping
		this.scene.background = texture
		this.scene.environment = texture
		this.scene.backgroundIntensity = intensity
		this.scene.backgroundBlurriness = blurriness
		texture.dispose()
		reslove()
	})
}



// 设置全景图

function onSetSceneViewConfig(config) {
	const { blurriness, intensity } = config
	this.scene.backgroundIntensity = intensity
	this.scene.backgroundBlurriness = blurriness
}


// 设置模型贴图 (外部) 
function onSetStorageViewImage(url, type) {
	return new Promise(async (reslove) => {
		// 根据 图片类型选择不同的加载器
		let loader
		let texture
		if (type == 'hdr') {
			loader = new RGBELoader()
		} else {
		      loader = new THREE.TextureLoader()
		}
		texture = await loader.loadAsync(url)
		texture.mapping = THREE.EquirectangularReflectionMapping
		this.scene.background = texture
		this.scene.environment = texture
		texture.dispose()
		reslove()
	})

}

二.在页面中去使用

<script setup>
import { ref, reactive, computed } from "vue";
import { useMeshEditStore } from '@/store/meshEditStore'
import { getFileType } from '@/utils/utilityFunction'
import { ElMessage } from 'element-plus'
const store = useMeshEditStore();
const config = reactive({
  visible: true,
  type: 3, //1 颜色 2 图片  3全景图
  image: require("@/assets/image/model-bg-3.jpg"),
  viewImg: require("@/assets/image/view-4.png"),
  color: "#000",
  blurriness: 1,
  intensity: 1,
});


const activeBackgroundId = ref(3);
const activeViewImageId = ref(3);


//选择图片
const onChangeImage = ({ id, url }) => {
  config.image = url;
  activeBackgroundId.value = id;
  store.modelApi.onSetSceneImage(url);
};

//选择全景图
const onChangeViewImage = async ({ id, url }) => {
  try {
    loading.value = true
    config.viewImg = url;
    activeViewImageId.value = id;
    await store.modelApi.onSetSceneViewImage(config);
  } finally {
    loading.value = false
    ElMessage.success("操作成功");
  }
};



// 上传外部图片
const onUploadTexture = async (file) => {
  const filePath = URL.createObjectURL(file.raw);
  await store.modelApi.onSetStorageViewImage(filePath, getFileType(file.name));
  URL.revokeObjectURL(filePath)
  ElMessage.success("操作成功");
}


// 颜色面板值发生变化

const activeChangeColor = (color) => {
  config.color = color;
  store.modelApi.onSetSceneColor(config.color);
};

// 选择颜色
const onChangeColor = () => {
  store.modelApi.onSetSceneColor(config.color);
};

// 修改全景图配置
const onChangeViewConfig = () => {
  store.modelApi.onSetSceneViewConfig(config);
}



</script>

界面效果图：

1.全景图

2.修改全景图模糊度

完整的代码可参考:gitee.com/ZHANG_6666/…