Three.js给场景添加背景颜色,背景图,全景图

相关API的使用:

1 THREE.Color (用于创建和表示颜色)

2. THREE.TextureLoader(用于加载和处理图片纹理)

3. THREE.SphereGeometry(用于创建一个球体的几何体)

4. THREE.Mesh(用于创建一个材质对象)

在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上分别加入onSetSceneColor(设置场景颜色),onSetSceneImage(设置场景背景图),onSetSceneViewImage (设置场景全景图),onClearSceneBg(清除场景背景)等四个方法。

//设置场景颜色
	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.全景图

你可能感兴趣的:(Three.js,javascript,three.js,vue3,3d模型)