当前位置：网站首页>Threejs realizes sky box, panoramic scene, ground grass

Threejs realizes sky box, panoramic scene, ground grass

2022-07-05 04:00:00 【Zuo Ben】

1, Introduce ：

This example uses r95 edition Three.js library . A scene will be created to realize the panoramic background of the sky box , Add axis , Add the ground and set the ground material . The renderings are as follows ：

2, Main description ：

Create skybox , Mainly 6 This picture builds the picture of the whole scene . These six pictures are respectively facing forward （posz）、 Backward （negz）、 Upward （posy）、 Down （negy）、 To the right （posx） And to the left （negx）.Three.js These images will be integrated together to create a seamless environment map . The code is as follows ：

var scene = new THREE.Scene();

var urls = [
	'assets/textures/cubemap/flowers/posx.jpg',
	'assets/textures/cubemap/flowers/negx.jpg',
	'assets/textures/cubemap/flowers/posy.jpg',
	'assets/textures/cubemap/flowers/negy.jpg',
	'assets/textures/cubemap/flowers/posz.jpg',
	'assets/textures/cubemap/flowers/negz.jpg'
];

var cubeLoader = new THREE.CubeTextureLoader();
scene.background = cubeLoader.load(urls);

Create the ground and add materials ,Three.js Two new materials are provided ：THREE.MeshStandardMaterial（ Standard material ） and THREE.MeshPhysicalMaterial（ Physical material ）, What we use here is MeshPhysicalMaterial Standard material . The code is as follows ：

/**
 *  Create the ground and add materials 
 * wrapS Attributes define the texture along x Axial behavior , and warpT Attributes define the texture along y Axial behavior .
 * Three.js The following two options are provided for these attributes ：
 * ·THREE.RepeatWrapping Allow the texture to repeat itself .
 * ·THREE.ClampToEdgeWrapping Is the default value of the attribute .
 *  The property value is THREE.ClampToEdgeWrapping when , Then the whole texture will not repeat , Only the pixels at the edge of the texture will be repeated to fill the remaining space .
 */
function createPlaneGeometryBasicMaterial() {
	var textureLoader = new THREE.TextureLoader();
	var cubeMaterial = new THREE.MeshStandardMaterial({
		map: textureLoader.load("assets/textures/stone/cd.jpg"),
	});
	cubeMaterial.map.wrapS = THREE.RepeatWrapping;
	cubeMaterial.map.wrapT = THREE.RepeatWrapping;
	cubeMaterial.map.repeat.set(8, 8)
	//  Create the ground plane and set the size 
	var planeGeometry = new THREE.PlaneGeometry(100, 100);
	var plane = new THREE.Mesh(planeGeometry, cubeMaterial);

	//  Set the plane position and rotate 
	plane.rotation.x = -0.5 * Math.PI;
	plane.position.x = 0;
	plane.position.z = 0;
	return plane;
}

3, Source code is as follows ：

<!DOCTYPE html>
<html>
	<head>
		<title>Threejs Realize sky box 、 Scene background 、 panorama </title>
		<script type="text/javascript" src="libs/three.js"></script>
		<script type="text/javascript" src="libs/OrbitControls.js"></script>
		<style>
			body {
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="dom"></div>
		<script type="text/javascript">
			var camera;
			var renderer;
			function init() {
				//  Create a scene , It will contain all our elements , Like an object , Cameras and lights .
				var scene = new THREE.Scene();

				var urls = [
					'assets/textures/cubemap/flowers/posx.jpg',
					'assets/textures/cubemap/flowers/negx.jpg',
					'assets/textures/cubemap/flowers/posy.jpg',
					'assets/textures/cubemap/flowers/negy.jpg',
					'assets/textures/cubemap/flowers/posz.jpg',
					'assets/textures/cubemap/flowers/negz.jpg'
				];

				var cubeLoader = new THREE.CubeTextureLoader();
				scene.background = cubeLoader.load(urls);
				
				//  Create a camera , It defines where we are looking 
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
				//  Aim the camera at the center of the scene 
				camera.position.x = 10;
				camera.position.y = 50;
				camera.position.z = 90;
				camera.lookAt(scene.position);
				var orbit = new THREE.OrbitControls(camera);

				//  Create a renderer and set the size ,WebGLRenderer The computer graphics card will be used to render the scene 
				renderer = new THREE.WebGLRenderer();
				renderer.setSize(window.innerWidth, window.innerHeight);
				// scene.add(new THREE.AmbientLight(0x666666));

				var ambientLight = new THREE.AmbientLight("#ffffff", 1);
				scene.add(ambientLight);

				//  Display the coordinate axis on the screen 
				var axes = new THREE.AxisHelper(100);
				scene.add(axes);

				//  Add planes to the scene 
				var plane = createPlaneGeometryBasicMaterial();
				scene.add(plane);

				//  Add the output of the renderer to HTML Elements 
				document.getElementById("dom").appendChild(renderer.domElement);
				
				//  Start animation 
				renderScene();
				
				//  Create a ground 
				function createPlaneGeometryBasicMaterial() {
					var textureLoader = new THREE.TextureLoader();
					var cubeMaterial = new THREE.MeshStandardMaterial({
						map: textureLoader.load("assets/textures/stone/cd.jpg"),
					});
					cubeMaterial.map.wrapS = THREE.RepeatWrapping;
					cubeMaterial.map.wrapT = THREE.RepeatWrapping;
					cubeMaterial.map.repeat.set(8, 8)
					//  Create the ground plane and set the size 
					var planeGeometry = new THREE.PlaneGeometry(100, 100);
					var plane = new THREE.Mesh(planeGeometry, cubeMaterial);

					//  Set the plane position and rotate 
					plane.rotation.x = -0.5 * Math.PI;
					plane.position.x = 0;
					plane.position.z = 0;
					return plane;
				}
				
				function renderScene() {
					orbit.update();
				    //  Use requestAnimationFrame Function to render 
				    requestAnimationFrame(renderScene);
				    renderer.render(scene, camera);
				}

				//  Rendered scenes 
				renderer.render(scene, camera);
			}
			window.onload = init;
			
			//  Modify the scene as the form changes 
			function onResize() {
			    camera.aspect = window.innerWidth / window.innerHeight;
			    camera.updateProjectionMatrix();
			    renderer.setSize(window.innerWidth, window.innerHeight);
			}
			//  Listen for form resizing events 
			window.addEventListener('resize', onResize, false);
		</script>
	</body>
</html>

If you need a complete code, please leave a message or contact me on wechat ：1171053128

原网站

版权声明
本文为[Zuo Ben]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202140717141234.html