当前位置：网站首页>Threejs Internet of things, 3D visualization of farms (II)

Threejs Internet of things, 3D visualization of farms (II)

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

1, Introduce

This example uses r95 edition Three.js library .
Main functions ： Quote the farm model for display . The renderings are as follows ：

2, Main description

farm 3D Show main use OBJLoader and MTLLoader Load the model and directly assign materials to display .
The imported model code is as follows ：

3, Source code


			var camera;
			var renderer;
			var mesh;
 
			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/posx.jpg',
					'assets/textures/negx.jpg',
					'assets/textures/posy.jpg',
					'assets/textures/negy.jpg',
					'assets/textures/posz.jpg',
					'assets/textures/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(50, window.innerWidth / window.innerHeight, 0.1, 30000);
				//  Aim the camera at the center of the scene 
				camera.position.x = 5500;
				camera.position.y = 3000;
				camera.position.z = 2000;
				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 
				// initialize basic renderer
				renderer = new THREE.WebGLRenderer({
					antialias: true,
					logarithmicDepthBuffer: true,
				});
				renderer.setSize(window.innerWidth, window.innerHeight);
 
				//  Add ambient light 
				scene.add(new THREE.AmbientLight("#ffffff", 1.5));
				//  Add the output of the renderer to HTML Elements 
				document.getElementById("dom").appendChild(renderer.domElement);
 
				//  Display the coordinate axis on the screen 
				var axes = new THREE.AxesHelper(10000);
				// scene.add(axes);
 
				initModel();
 
				//  Start animation 
				renderScene();
 
				//  Add model 
				function initModel() {
					var mtlLoader = new THREE.MTLLoader();
					mtlLoader.setPath("assets/models/obj_mtl/")
					mtlLoader.load('yangzhichang.mtl', function(materials) {
						materials.preload();
 
						var objLoader = new THREE.OBJLoader();
						objLoader.setMaterials(materials);
						objLoader.load('assets/models/obj_mtl/yangzhichang.obj', function(object) {
							mesh = object;
							object.traverse(function(node) {
								if (node.material) {
									node.material.side = THREE.DoubleSide;
								}
							});
							scene.add(mesh);
						});
					});
				}
				
				document.addEventListener('click', onDocumentMouseDown, false);
				
				function onDocumentMouseDown(event) {
					//  Click on the screen to create a vector 
					var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
						.innerHeight) * 2 + 1, 0.5);
					vector = vector.unproject(camera); //  Convert the coordinates of the screen into coordinates in the 3D scene 
					var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
					var intersects = raycaster.intersectObjects(mesh, true);
					if (intersects.length > 0) {
						var name = intersects[0].object.name;
						var obj = scene.getObjectByName(name);
						console.log(obj)
						scene.remove(obj);
					}
				}
 
				function renderScene() {
					orbit.update();
					requestAnimationFrame(renderScene);
					renderer.render(scene, camera);
				}
 
				//  Rendered scenes 
				renderer.render(scene, camera);
			}
			window.onload = init;