Three.js (webgl) of Three uses html div to add a background image to the Threejs scene

1. Brief introduction

Second, the effect diagram of the case

3. Realization principle

Fourth, matters needing attention

Five, the approximate implementation steps of the case

6. Key code

1. Brief introduction

Some knowledge developed by Three js is convenient to encounter similar problems in the later period, and can be consulted and used in time.

In this section, there are many ways to add a background to a scene in three.js (webgl). Here is a brief introduction to the way of adding a background image using div in html. If there are any shortcomings, please point out, or you have a better method. Welcome to leave a message.

In fact, there are many ways to give Three js scenes, the main ones are as follows:

1. The renderer can only add background color in general, but you can use scene.background to add background image

2. Add a larger plane in the far side of the scene to fill the screen, and you can also add pictures to the plane

3. Use threejs's EffectComposer rendering pass to add background images

4. Use div in html to add pictures to set

This section is to add the background image in the fourth method above.

Second, the effect diagram of the case

3. Realization principle

1. Add a div node as a background display node in html

2. Set the css style of the div and add a background image

3. The renderer created by three, set alpha: true

Fourth, matters needing attention

1. When setting alpha : true in the renderer created by three, do not set renderer.setClearColor and scene.background, otherwise alpha : true will be invalidated and the background image will be blocked.

2. The css style of the background image div, it is worth noting that the position is recommended to be abosulte, the width and height should be set well, and the whole background should be covered instead of repeated tiling. Set background-size: 100% 100%

3. If the background image div blocks interaction, you can set the z-index value of the css style style to be as small as possible, which can be negative.

Five, the approximate implementation steps of the case

The case is based on Threejs GitHub - mrdoob/three.js: JavaScript 3D Library.

The engineering framework is created and implemented

1. Create a script, introduce Three, create a basic Three environment, add scenes, cameras, lights, etc.

2. Add a background image div

3. The css style of the background image div is set as shown in the figure, and the corresponding properties are modified as needed

4. Set alpha:true for the renderer, and do not set scene.background and renderer.setClearColor, etc.

5. After the above settings, you can view the effect in the browser

6. Key code

<!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>