three.js 04-10 之 LineDashedMaterial 材质

最新推荐文章于 2023-10-13 17:35:42 发布

zhulx_sz

最新推荐文章于 2023-10-13 17:35:42 发布

阅读量2.8k

点赞数 1

本文链接：https://blog.csdn.net/zhulx_sz/article/details/78778721

版权

threejs 同时被 3 个专栏收录

59 篇文章 7 订阅

订阅专栏

webgl

59 篇文章 2 订阅

订阅专栏

three.js

59 篇文章 6 订阅

订阅专栏

本篇介绍的 LineDashedMaterial 材质跟上一篇 LineBasicMaterial 材质基本一样，只不过 LineDashedMaterial 材质的线型是虚线而已。除了跟 LineBasicMaterial 拥有相同的属性外，它还有以下几个独特的属性：

属性	描述
scale （缩放比例）	缩放 dashSize 和 gapSize。如果 scale 小于 1，dashSize 和 gapSize 就会增大；反之，就会缩小
dashSize （短划线长度）	定义虚线短划线的长度
gapSize （间隔长度）	定义虚线间隔的长度

用法跟 LineBasicMaterial 基本一样，如下所示：

lines.computeLineDistances();
var lineMaterial = new THREE.LineDashedMaterial({
	vertexColors: true,
	color: 0xffffff,
	dashSize: 0.6,
	gapSize: 0.2,
	scale: 1.0 // 比例越大，虚线越密；反之，虚线越疏
});

唯一的区别就是，必须调用方法 computeLineDistances()。如果不调用，就不会显示出虚线效果。下面给出完整的示例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>示例 04.10 - LineDashedMaterial</title>
	<script src="../build/three.js"></script>
	<script src="../build/js/controls/OrbitControls.js"></script>
	<script src="../build/js/libs/stats.min.js"></script>
	<script src="../build/js/libs/dat.gui.min.js"></script>
	<script src="../jquery/jquery-3.2.1.min.js"></script>
    <style>
        body {
            /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */
            margin: 0;
            overflow: hidden;
        }
		/* 统计对象的样式 */
		#Stats-output {
			position: absolute;
			left: 0px;
			top: 0px;
		}
    </style>
</head>
<body>

<!-- 用于 WebGL 输出的 Div -->
<div id="webgl-output"></div>
<!-- 用于统计 FPS 输出的 Div -->
<div id="stats-output"></div>

<!-- 运行 Three.js 示例的 Javascript 代码 -->
<script type="text/javascript">

	var scene;
	var camera;
	var render;
	var webglRender;
	//var canvasRender;
	var controls;
	var stats;
	var guiParams;
	
	var ground;
	var cube;
	
	var lineMaterial;
	
	var ambientLight;
	var spotLight;

    $(function() {
		stats = initStats();
		scene = new THREE.Scene();
		
		webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗锯齿
		webglRender.setSize(window.innerWidth, window.innerHeight);
		webglRender.setClearColor(0x000000, 1.0);
		//webglRender.shadowMap.enabled = true; // 允许阴影投射
		render = webglRender;
		
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000); // 2147483647
		camera.position.set(-30, 40, 30);
		
		var target = new THREE.Vector3(0, 0 , 0);
		controls = new THREE.OrbitControls(camera, render.domElement);
		controls.target = target;
		camera.lookAt(target);
		
		$('#webgl-output')[0].appendChild(render.domElement);
		window.addEventListener('resize', onWindowResize, false);
		
		ambientLight = new THREE.AmbientLight(0x0c0c0c);
		scene.add(ambientLight);
		
		spotLight = new THREE.SpotLight({color: 0xffffff});
		spotLight.position.set(-40, 60, -10);
		spotLight.castShadow = true;
		scene.add(spotLight);
		
		//scene.add(new THREE.AxisHelper(20));// 加入坐标轴
		
		var points = gosper(4, 60);
		var lines = new THREE.Geometry();
		var colors = [];
		var i = 0;
		points.forEach(function(e){
			lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
			colors[i] = new THREE.Color(0xffffff);
			// 色调（Hue）、饱和度（Saturation）、亮度（Lightness
			colors[i].setHSL(e.x / 100 + 0.5, e.y * 20 / 300, 0.8);
			i++;
		});
		
		lines.colors = colors;
		lines.computeLineDistances(); // 必须调用，否则不会有虚线效果
		lineMaterial = new THREE.LineDashedMaterial({
			vertexColors: true,
			color: 0xffffff,
			dashSize: 0.6,
			gapSize: 0.2,
			scale: 1.0 // 比例越大，虚线越密；反之，虚线越疏
		});
		
		var line = new THREE.Line(lines, lineMaterial);
		line.position.set(25, -30, -60);
        scene.add(line);
		
		/** 用来保存那些需要修改的变量 */
		guiParams = new function() {
			this.rotationSpeed = 0.01;
		}
		/** 定义 dat.GUI 对象，并绑定 guiParams 的几个属性 */
		//var gui = new dat.GUI();
		
		renderScene();
    });
	
	/** 渲染场景 */
	function renderScene() {
		stats.update();
		rotateMesh(); // 旋转物体
		
		requestAnimationFrame(renderScene);
		render.render(scene, camera);
	}
	
	/** 初始化 stats 统计对象 */
	function initStats() {
		stats = new Stats();
		stats.setMode(0); // 0 为监测 FPS；1 为监测渲染时间
		$('#stats-output').append(stats.domElement);
		return stats;
	}
	
	/** 当浏览器窗口大小变化时触发 */
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		render.setSize(window.innerWidth, window.innerHeight);
	}
	
	/** 旋转物体 */
	function rotateMesh() {
		scene.traverse(function(mesh) {
			if (mesh instanceof THREE.Line && mesh != ground) {
				//mesh.rotation.x += guiParams.rotationSpeed;
				//mesh.rotation.y += guiParams.rotationSpeed;
				mesh.rotation.z += guiParams.rotationSpeed;
			}
		});
	}

	/** 高斯帕曲线 */
	function gosper(a, b) {
		var turtle = [0, 0, 0];
		var points = [];
		var count = 0;

		rg(a, b, turtle); // turtle: 龟壳图案

		return points;

		function rt(x) {
			turtle[2] += x;
		}

		function lt(x) {
			turtle[2] -= x;
		}

		function fd(dist) {
			//ctx.beginPath();
			points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
			//ctx.moveTo(turtle[0], turtle[1]);

			var dir = turtle[2] * (Math.PI / 180);
			turtle[0] += Math.cos(dir) * dist;
			turtle[1] += Math.sin(dir) * dist;

			points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
            //ctx.lineTo(turtle[0], turtle[1]);
            //ctx.stroke();
		}

		function rg(st, ln, turtle) {
			st--;
			ln = ln / 2.6457;
			if (st > 0) {
				//ctx.strokeStyle = '#111';
				rg(st, ln, turtle);
				rt(60);
				gl(st, ln, turtle);
				rt(120);
				gl(st, ln, turtle);
				lt(60);
				rg(st, ln, turtle);
				lt(120);
				rg(st, ln, turtle);
				rg(st, ln, turtle);
				lt(60);
				gl(st, ln, turtle);
				rt(60);
			}
			if (st == 0) {
				fd(ln);
				rt(60);
				fd(ln);
				rt(120);
				fd(ln);
				lt(60);
				fd(ln);
				lt(120);
				fd(ln);
				fd(ln);
				lt(60);
				fd(ln);
				rt(60)
			}
		}

		function gl(st, ln, turtle) {
			st--;
			ln = ln / 2.6457;
			if (st > 0) {
				//ctx.strokeStyle = '#555';
				lt(60);
				rg(st, ln, turtle);
				rt(60);
				gl(st, ln, turtle);
				gl(st, ln, turtle);
				rt(120);
				gl(st, ln, turtle);
				rt(60);
				rg(st, ln, turtle);
				lt(120);
				rg(st, ln, turtle);
				lt(60);
				gl(st, ln, turtle);
			}
			if (st == 0) {
				lt(60);
				fd(ln);
				rt(60);
				fd(ln);
				fd(ln);
				rt(120);
				fd(ln);
				rt(60);
				fd(ln);
				lt(120);
				fd(ln);
				lt(60);
				fd(ln);
			}
		}
	}

</script>
</body>
</html>

到此，three.js 库中常用的材质基本就已经介绍完了，剩下的读者可以自行扩展。

未完待续···

zhulx_sz

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js 04-10 之 LineDashedMaterial 材质

本篇介绍的 LineDashedMaterial 材质跟上一篇 LineBasicMaterial 材质基本一样，只不过 LineDashedMaterial 材质的线型是虚线而已。除了跟 LineBasicMaterial 拥有相同的属性外，它还有以下几个独特的属性：属性描述scale （缩放比例）缩放 dashSize 和 gapSize。如果
复制链接

扫一扫