three.js-材质贴图，只在一面上，以及连线

小咪咪 2021-10-29 10:10 664阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70 1]

每一个面的材质添加一张图片，并且居中，不重复，只显示一张。  
关键代码：  
var geometry = new THREE.CylinderGeometry(10, 10, 10, 6);  
var material = \[  
new THREE.MeshLambertMaterial(\{ color: meshcolor, opacity: 0.8, transparent: true \}),  
new THREE.MeshLambertMaterial(\{ color: meshcolor, opacity: 0.8, transparent: true \}),  
new THREE.MeshLambertMaterial(\{ color: meshcolor, opacity: 0.8, transparent: true, map: texture \}),  
new THREE.MeshLambertMaterial(\{ color: meshcolor, opacity: 0.8, transparent: true \}),  
new THREE.MeshLambertMaterial(\{ color: meshcolor, opacity: 0.8, transparent: true \}),  
new THREE.MeshLambertMaterial(\{ color: meshcolor, opacity: 0.8, transparent: true \}),  
new THREE.MeshLambertMaterial(\{ color: meshcolor, opacity: 0.8, transparent: true \}),  
new THREE.MeshLambertMaterial(\{ color: meshcolor, opacity: 0.8, transparent: true \})  
\];  
6个面的几何体，每一个面的材质，只有其中一个面加上map，map属性就是需要loader的图片。

**全部代码如下：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<title>three.js webgl - AMF</title>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    	<style>
    		body {
    			font-family: Monospace;
    			background-color: #000000;
    			margin: 0px;
    			overflow: hidden;
    		}
    
    		.title {
    			position: absolute;
    			left: 0;
    			top: 0;
    			padding: 10px;
    			background: rgba(255, 255, 255, 0.5);
    			line-height: 1;
    			border-radius: 5px;
    		}
    	</style>
    </head>
    
    <body>
    	<div class="title" id="divBox">第一个盒子</div>
    
    
    	<script src="js/three.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
    	<script src="js/tween.min.js" type="text/javascript" charset="utf-8"></script>
    
    	<script>
    
    		var camera, scene, renderer, mesh;
    		var sphere;
    		var maxPoints = 256;
    		var drawCount = 1;
    		var WIDTH = window.innerWidth;
    		var HEIGHT = window.innerHeight;
    		var lights = [];
    		function init() {
    
    			scene = new THREE.Scene();
    			//				scene.add( new THREE.AmbientLight( 0x999999 ) );
    			camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000);
    
    			// camera.up.set(0, 0, -1);
    
    			camera.position.set(100, 100, 0);
    			// camera.position.z = 150;
    			var light = new THREE.DirectionalLight();
    			light.position.set(0, 0, 1); // Shine along the z-axis in object coordinates, same direction camera faces.
    			camera.add(light);
    
    			camera.add(new THREE.PointLight(0xffffff, 0.8));
    
    			scene.add(camera);
    			
    			initPointLight();
    			var group1 = new THREE.Group();
    
    			initGrid(scene)
    
    			initGroup(group1)
    
    			initSquareShape(group1)
    
    			// initGroup(scene)
    
    			// initSquareShape(scene)
    			addPlane();
    
    			var p1 = { x: 30, y: 0, z: 0 }
    			var p2 = { x: 60, y: 0, z: 30 }
    			lineGo(p1, p2);
    			var p3 = { x: -30, y: 0, z: 0 }
    			var p4 = { x: 60, y: 0, z: -30 }
    			lineGo(p2, p3);
    			group1.position.set(0, 10, 0);
    
    			scene.add(group1);
    
    			renderer = new THREE.WebGLRenderer({ antialias: true });
    			renderer.setClearColor(0x999999);
    			renderer.setPixelRatio(window.devicePixelRatio);
    			renderer.setSize(window.innerWidth, window.innerHeight);
    			document.body.appendChild(renderer.domElement);
    
    
    			var raycaster = new THREE.Raycaster();
    			var mouse = new THREE.Vector2();
    
    
    
    
    			// document.addEventListener('mousedown', onDocumentMouseDown, false);
    			// document.addEventListener('touchstart', onDocumentTouchStart, false);
    
    			function onDocumentTouchStart(event) {
    
    				event.preventDefault();
    
    				event.clientX = event.touches[0].clientX;
    				event.clientY = event.touches[0].clientY;
    				onDocumentMouseDown(event);
    
    			}
    			function addPlane() {
    				var groundGeometry = new THREE.PlaneGeometry(200, 200, 4, 4);
    				var groundMaterial = new THREE.MeshBasicMaterial({ color: 0x777777 });
    				// var groundMaterial = new THREE.MeshBasicMaterial({ color: 0x222222 });
    				ground = new THREE.Mesh(groundGeometry, groundMaterial);
    				ground.rotation.set(-0.5 * Math.PI, 0, 0); // 沿着 X轴旋转-90°
    				scene.add(ground);
    			}
    			function onDocumentMouseDown(event) {
    
    				event.preventDefault();
    
    				mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
    				mouse.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
    
    				raycaster.setFromCamera(mouse, camera);
    				//				console.log(scene)
    				var intersects = raycaster.intersectObjects(group1.children);
    
    				if (intersects.length > 0) {
    
    					//					console.log(intersects[ 0 ].object.position.clone().project(camera))
    					var vector = intersects[0].object.position.clone().project(camera);
    					var halfWidth = window.innerWidth / 2;
    					var halfHeight = window.innerHeight / 2;
    					var divBox = document.getElementById("divBox")
    					divBox.style.left = vector.x * halfWidth + halfWidth + "px";
    					divBox.style.top = -vector.y * halfHeight + halfHeight + "px";
    
    					//					intersects[ 0 ].object.material.color.set(0x000000)
    
    					new TWEEN.Tween(intersects[0].object.rotation).to({
    						x: Math.random() * 2 * Math.PI,
    						y: Math.random() * 2 * Math.PI,
    						z: Math.random() * 2 * Math.PI
    					}, 2000)
    						.easing(TWEEN.Easing.Elastic.Out).start();
    
    				}
    
    				/*
    				// Parse all the faces
    				for ( var i in intersects ) {
    
    					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
    
    				}
    				*/
    			}
    
    			var controls = new THREE.OrbitControls(camera, renderer.domElement);
    			controls.addEventListener('change', render);
    			controls.target.set(0, 1.2, 2);
    			controls.update();
    
    			window.addEventListener('resize', onWindowResize, false);
    
    		}
    
    		function onWindowResize() {
    
    			camera.aspect = window.innerWidth / window.innerHeight;
    			camera.updateProjectionMatrix();
    
    			renderer.setSize(window.innerWidth, window.innerHeight);
    
    			render();
    
    		}
    		function initGrid(a) {
    			// var grid = new THREE.GridHelper(200, 25, 0xffffff, 0x555555);
    			//				grid.rotateOnAxis( new THREE.Vector3( 0, 0, 0 ), 0 );
    			// a.add(grid);
    		}
    		function initGroup(G) {
    			var color, imgUrl;
    			for (var x = -60; x <= 60; x += 30) {
    				if (x == -60) {
    					color = 4244200;
    					imgUrl = "img/icon_up.png";
    				} else if (x == -30) {
    					color = 3500454;
    					imgUrl = "img/icon.png";
    				} else if (x == 0) {
    					color = 3757225;
    					imgUrl = "img/lensflare0.png";
    				} else if (x == 30) {
    					color = 9145712;
    					imgUrl = "img/1.jpg";
    				} else {
    					color = 3120771;
    					imgUrl = "img/2.jpg";
    				}
    				for (var z = -60; z <= 30; z += 30) {
    					// var geometry = new THREE.CylinderGeometry(10, 10, 10, 6, 2);
    					// var material = new THREE.MeshLambertMaterial({ color: 0xFFFF00 });
    					// var mesh = new THREE.Mesh(geometry, material);
    					// mesh.position = new THREE.Vector3(0, 0, 0);
    					// mesh.rotation.x = 45 * (Math.PI / 90);
    					// mesh.rotation.y = 45 * (Math.PI / 90);
    					// mesh.position.set(x, 0, z);
    					// G.add(mesh);
    
    
    
    					addMeshOne(G, x, z, color, imgUrl);
    
    				}
    			}
    
    			// addMeshOne(G,-60,-60);
    			return G;
    		}
    		function addMeshOne(G, x, z, meshcolor, imgUrl) {
    
    			//贴纸
    			var texture = new THREE.TextureLoader().load(imgUrl);
    
    			// texture.wrapS = texture.wrapT = THREE.RepeatWrapping;//可循环
    			texture.matrixAutoUpdate = false;
    
    			var API = {
    				offsetX: 0,//偏移
    				offsetY: 0,
    				repeatX: 2,//缩放
    				repeatY: 2,
    				rotation: 0,//Math.PI / 1, // 旋转
    				centerX: 0.5,//中心点
    				centerY: 0.5
    			};
    			texture.matrix.setUvTransform(API.offsetX, API.offsetY, API.repeatX, API.repeatY, API.rotation, API.centerX, API.centerY);
    			//小块儿
    			var geometry = new THREE.CylinderGeometry(10, 10, 10, 6);
    			var material = [
    				new THREE.MeshLambertMaterial({ color: meshcolor, opacity: 0.8, transparent: true }),
    				new THREE.MeshLambertMaterial({ color: meshcolor, opacity: 0.8, transparent: true }),
    				new THREE.MeshLambertMaterial({ color: meshcolor, opacity: 0.8, transparent: true, map: texture }),
    				new THREE.MeshLambertMaterial({ color: meshcolor, opacity: 0.8, transparent: true }),
    				new THREE.MeshLambertMaterial({ color: meshcolor, opacity: 0.8, transparent: true }),
    				new THREE.MeshLambertMaterial({ color: meshcolor, opacity: 0.8, transparent: true }),
    				new THREE.MeshLambertMaterial({ color: meshcolor, opacity: 0.8, transparent: true }),
    				new THREE.MeshLambertMaterial({ color: meshcolor, opacity: 0.8, transparent: true })
    			];
    			mesh = new THREE.Mesh(geometry, (material));
    			mesh.position = new THREE.Vector3(0, 0, 0);
    			mesh.rotation.x = 45 * (Math.PI / 90);
    			mesh.rotation.y = 45 * (Math.PI / 90);
    			mesh.position.set(x, 0, z);
    			console.log(mesh.position)
    			G.add(mesh);
    			console.log(mesh.position)
    			//边框
    			var edges = new THREE.EdgesGeometry(geometry);
    			var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 2402211 }));
    			line.position = new THREE.Vector3(0, 0, 0);
    			line.rotation.x = 45 * (Math.PI / 90);
    			line.rotation.y = 45 * (Math.PI / 90);
    			line.position.set(x, 0, z);
    			G.add(line);
    		}
    		function initSquareShape(G) {
    			var sqLength = 150 / 2;
    			var squareShape = new THREE.Shape();
    			squareShape.moveTo(-sqLength, sqLength);
    			squareShape.lineTo(sqLength, sqLength);
    			squareShape.lineTo(sqLength, -sqLength);
    			squareShape.lineTo(-sqLength, -sqLength);
    			squareShape.lineTo(-sqLength, sqLength);
    			var extrudeSettings = { amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
    
    			var geometry = new THREE.ExtrudeGeometry(squareShape, extrudeSettings);
    
    			squareShape.autoClose = true;
    			var points = squareShape.createPointsGeometry();
    			var line = new THREE.Line(points, new THREE.LineBasicMaterial({ color: 0x0040f0, linewidth: 3 }));
    			line.position.set(0, 0, 0);
    			line.rotation.set(45 * (Math.PI / 90), 0, 0);
    			// G.add(line);
    			return G;
    		}
    		function initPointLight() {
    			var distance = 20;
    			var c = new THREE.Vector3();
    			// for (var i = 0; i<30; i++) {
    			// 	var light = new THREE.PointLight(0xffffff, 2.0, distance);
    			// 	c.set(Math.random(), Math.random(), Math.random()).normalize();
    			// 	light.color.setRGB(c.x, c.y, c.z);
    			// 	scene.add(light);
    			// 	lights.push(light);
    			// }
    			var bulbGeometry = new THREE.SphereBufferGeometry( 1, 16, 16 );
    			bulbMat = new THREE.MeshStandardMaterial( {
    					emissive: 0xffffee,
    					emissiveIntensity: 1,
    					color: 0x000000
    				} );
    			
    			var light = new THREE.PointLight(0xffffff, 2.0, distance);
    			light.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
    				// c.set(Math.random(), Math.random(), Math.random()).normalize();
    				// light.color.setRGB(c.x, c.y, c.z);
    				//x: 30, y: 0, z: 0
    				light.position.set( 30, 0, 0 );
    				scene.add(light);
    				lights.push(light);
    		}
    		function lineGo(p1, p2) {
    			//定义线的基本材料，我们可以使用LineBasicMaterial（实线材料）和LineDashedMaterial（虚线材料）
    			var material = new THREE.LineBasicMaterial({ color: 0xffffff });
    			//设置具有几何顶点的几何（Geometry）或缓冲区几何（BufferGeometry）设置顶点位置，看名字就知道了，一个是直接将数据保存在js里面的，另一个是保存在WebGL缓冲区内的，而且肯定保存到WebGL缓冲区内的效率更高
    			var geometry = new THREE.Geometry();
    			geometry.vertices.push(new THREE.Vector3(p1.x, p1.y, p1.z));
    			// geometry.vertices.push(new THREE.Vector3(0, 10, 0));
    			geometry.vertices.push(new THREE.Vector3(p2.x, p2.y, p2.z));
    			//使用Line方法将线初始化
    			var line = new THREE.Line(geometry, material);
    			//将线添加到场景
    			scene.add(line);
    		}
    
    		function lightUpdate() {
    			var time = Date.now() * 0.0005;
    
    			// mixer.update( delta / 2.0 );
    
    			for (var i = 0, il = lights.length; i < il; i++) {
    
    				var light = lights[i];
    				var x = Math.sin(time + i * 7.0) * 45;
    				var y = Math.cos(time + i * 5.0) * 45 + 20;
    				var z = Math.cos(time + i * 3.0) * 45;
    				// var x = (time + i * 7.0)*45;
    				// var y = (time + i * 5.0)*45 ;
    				// var z =  (time + i * 3.0)*45 ;
    				light.position.set(x, y, z);
    
    			}
    		}
    		function render() {
    			renderer.render(scene, camera);
    
    		}
    		function animate() {
    
    			requestAnimationFrame(animate);
    
    			// lightUpdate();
    
    			render();
    			TWEEN.update();
    		}
    		init();
    		animate()
    
    	</script>
    </body>
    
    </html>```

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]: /images/20211029/47f4749e62a4438b8d57d3df7be9f3e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70 1]: /images/20211029/f963980aa70e45ad948832522861e955.png