Three 之 three.js （webgl）使用 html div 给 Threejs 场景添加背景图的方法实现

一、简单介绍

二、该案例效果示图

三、实现原理

四、注意事项

五、该案例的大概实现步骤

六、关键代码

一、简单介绍

Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍， three.js （webgl）中给场景添加背景的方式很多，这里简单介绍使用html 中的 div 添加背景图的方式，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

其实，给 Three js 场景的方式很多，主要如下：

1、renderer 一般只能添加背景色，不过可以使用 scene.background 可以添加背景图

2、在场景的远处添加较大的 plane 占满屏幕，给 plane 添加图片也可以

3、利用 threejs 的EffectComposer渲染通道来添加背景图

4、使用 html 中的 div 添加图片来进行设置

本节就是以上面第四种方法进行实现背景图添加

二、该案例效果示图

三、实现原理

1、在 html 中添加一个 div 节点作为背景显示节点

2、设置该 div 的 css style 样式，添加背景图

3、three 创建的 renderer ，设置 alpha : true

四、注意事项

1、在 three 创建的 renderer ，设置 alpha : true 的时候，不要再设置 renderer.setClearColor，和 scene.background ，不然会使 alpha : true 失效，阻挡背景图显示

2、背景图 div 的 css style 样式，值得注意的是 position 建议为 abosulte，width和height 要设置好，要铺满全背景，而不是重复平铺，设置 background-size: 100% 100%

3、如果背景图 div 有阻挡交互的时候，可以设置 css style 样式的 z-index 的值尽可能小些，可为负数

五、该案例的大概实现步骤

该案例基于Threejs GitHub - mrdoob/three.js: JavaScript 3D Library.

工程框架创建实现的

1、创建脚本，引入 Three，创建基本的 Three 环境，添加场景，摄像机，光等

2、添加背景图 div

3、背景图 div 的 css style 如图设置，根据需要修改对应属性

4、对应 renderer 进行 alpha:true 设置，并且 scene.background 和 renderer.setClearColor 等不要进行设置

5、经过以上设置，就可以在浏览器查看效果了

六、关键代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>12TestSetBackgroundImage</title>
</head>
<body>
<div id="backgroundImage">

</div>
<script type="importmap">
			{
				"imports": {
					"three": "../../../build/three.module.js"
				}
			}
		</script>

<script type="module">

	import * as THREE from 'three';

	import { OrbitControls } from '../../jsm/controls/OrbitControls.js';
	import Stats from '../../jsm/libs/stats.module.js';

	let scene, camera, renderer, stats;

	init();
	animate();

	function init() {

		// scene
		initScene();

		// camera
		initCamera();


		// light
		initLight();

		// renderer
		initRenderer();

		// OrbitControls
		initOrbitControls();

		stats = new Stats();
		document.body.appendChild( stats.dom );

		// onWindowResize
		window.addEventListener( 'resize', onWindowResize );


		var mesh = new THREE.Mesh(new THREE.BoxGeometry(5,5,5), new THREE.MeshLambertMaterial());

		scene.add( mesh );
		axiesHelper();

		stats = new Stats();
		document.body.appendChild( stats.dom );

		// window.location.href = renderer.domElement.toDataURL( 'image/png' );

	}

	function onWindowResize() {

		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );

	}

	function initScene( ) {

		scene = new THREE.Scene();

		// 注意：scene.background  与 THREE.WebGLRenderer( { alpha: true } ) 冲突，会显示不错背景图
		//scene.background

	}

	function initCamera( ) {

		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
		camera.position.set( - 10, 0, 25 );
		//camera.lookAt( scene.position );



	}

	function initLight( ) {

		const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
		scene.add( ambientLight );

		const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
		directionalLight.position.set( - 1, 1, 100 );
		scene.add( directionalLight );

	}

	function initRenderer( ) {

		renderer = new THREE.WebGLRenderer( { alpha: true } );
		renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.setPixelRatio( window.devicePixelRatio );
		document.body.appendChild( renderer.domElement );

		// 注意：.setClearColor 与 THREE.WebGLRenderer( { alpha: true } ) 冲突，会显示不错背景图
		// renderer.setClearColor('#cccccc');

	}

	function initOrbitControls( ) {

		const controls = new OrbitControls( camera, renderer.domElement );
		controls.minDistance = 5;
		controls.maxDistance = 50;
		controls.enablePan = false; // 移动 禁止

	}

	function animate() {

		requestAnimationFrame( animate );
		stats.update();
		render();

	}

	function axiesHelper( ) {

		var helper = new THREE.AxesHelper( 20 );
		scene.add( helper );

	}

	function render() {

		renderer.render( scene, camera );

	}
</script>


</body>

<style>
	#backgroundImage{
		/*位置设置为绝对*/
		position: absolute;
		/*100 窗口宽度 */
		width: 100%;
		/*100 窗口高度 */
		height: 100%;
		/*背景图 url位置*/
		background: url("/three.js-dev/examples/MyXANStudy/99999Other/textures/BackgroundImage.jpg");
		/* z层级设置低些 避免阻挡交互*/
		z-index: -1000;
		/* 背景铺满，而不是重复平铺*/
		background-size: 100% 100% ;

	}
</style>
</html>