three.js 04-09 之 LineBasicMaterial 材质

最新推荐文章于 2024-07-02 13:01:48 发布
最新推荐文章于 2024-07-02 13:01:48 发布
阅读量4.9k 收藏 1
点赞数 2
分类专栏： javascript threejs webgl three.js 文章标签： javascript three.js threejs webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhulx_sz/article/details/78774105
版权
threejs 同时被 3 个专栏收录
59 篇文章 7 订阅
订阅专栏
webgl
59 篇文章 2 订阅
订阅专栏
three.js
59 篇文章 6 订阅
订阅专栏

    关于 three.js 中的材质部分介绍就快讲完了。接下来要介绍关于线段几何的两种材质：LineBasicMaterial 和 LineDashedMatertial。如下所示：

  • LineBasicMaterial：通过线段基础材质，可以设置线段的颜色、宽度、断点及连接点等属性；
  • LineDashedMaterial：跟 LineBasicMaterial 基本一样，但是通过指定短划线和间隔长度，可以创建出虚线效果；

    我们先来介绍一下 LineBasicMaterial 材质，可用的常用属性如下表所示：

属性描述
color指定线的颜色。如果指定了 vertexColors，这个属性就会被忽略
linewidth指定线的宽度
lineCap此属性定义顶点间的线段端点如何显示。可选的值包括：butt（平）、round（圆）、square（方）。默认值是 round。WebGLRenderer 不支持该属性
lineJoin此属性定义线段连接点如何显示。可选的值包括：round（圆）、bevel（斜切）、miter（尖角）。默认值是 round。WebGLRenderer 不支持该属性
vertexColors如果将这个属性设定为 THREE.VertexColors 值时，就可以为每一个顶点指定一种颜色
fog此属性指定当前物体是否受全局雾化效果的影响
    由于这种材质使用起来比较简单，因此，不在过多嗷述。下面给出一个完整的示例，代码如下： 

<!DOCTYPE html>
<html>
<head>
    <title>示例 04.09 - LineBasicMaterial</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;
		lineMaterial = new THREE.LineBasicMaterial({
			opacity: 1.0,
			linewidth: 1,
			vertexColors: THREE.VertexColors
		});
		
		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>
    在这个示例中，用到了一个 gosper(a, b) 函数，此函数主要是产生一种叫“高斯帕曲线”（请读者自行参考 http://en.wikipedia.org/wiki/Gosper_curve）。接着，我们创建一个 THREE.Geometry 实例，为每个坐标创建一个顶点，并把它们放进该实例的线段属性中。对于每个坐标我们还会计算一个颜色值，用来设置 colors 属性。最后，我们就可以创建一个 LineBasicMaterial 材质对象了，结合几何体就能创建出 THREE.Line 网格了。

未完待续···

zhulx_sz
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js - 线段几何体材质
ithanmang
08-08 980
线段几何体材质，分为LineBasicMaterial和LineDashedMaterial，线段上只有顶点没有面。 LineBasicMaterial：通过线段基础材质，可以设置线段的颜色、宽度和连接点。 LineDashedMaterial：虚线材质的基本属性跟基础线段材质一样，但是可以指定短划线的和间距空格的长度。 示例：01-LineMaterial.html LineBasi...
Three.js入门之hello world以及如何绘制线
10-19
Three.js 是一款基于 WebGL 的 JavaScript 库，用于在浏览器中创建3D图形。本教程将引导你了解如何使用Three.js 创建一个基本的3D场景，展示“Hello World”示例，并讲解如何在3D空间中绘制线。 ### Hello World - ...
three.js之材质-LineDashedMaterial介绍和使用(vue中使用three.js20)
点燃火柴的博客
11-15 1090
LineDashedMaterial材质介绍和使用1.LineDashedMaterial材质介绍2.demo效果3.demo代码 1.LineDashedMaterial材质介绍 LineDashedMaterial材质有和LineBasicMaterial材质一样的属性，还有几个额外的属性可以用来定义短划线长度和短划线中间空格长度 属性 描述 color 指定线的颜色，如果指定了vertexColor，该属性会被忽略 linewidth 通过该属性定义线的宽度 LineCap 此
threejs 点、线材质、描边模型介绍（四）
黄彪博客
06-20 1028
接下来的两个参数是近截面（near）和远截面（far）。当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。//3个为一组，表示一个顶点的xyz坐标。
39 Three.js线性几何体材质THREE.LineBasicMaterial
现在学习也不晚
12-07 8550
简介 THREE.LineBasicMaterial用于绘制线段的基础材质。 相关属性 名称 描述 color 该属性设置材质的颜色，如果设置了vertexColors，这是属性将被忽略 linewidth 设置线的宽度，默认值为1.0 linecap 这个属性定义了线框模式下顶点间线段的端点如何显示。可选的值包括butt（平）、rou...
three.js 源码注释（四十六）Material /LineBasicMaterial.js
omni360的专栏
12-25 2762
LineBasicMaterial方法根据参数parameters创建线段的虚线线型材质,parameters参数的格式看上面.LineBasicMaterial对象的功能函数采用 定义构造的函数原型对象来实现.大部分属性方法继承自材质的基类Material.用材质来定义线性,第一次见,真的很有想象力.简直就是对绘图软件的终结. <summary>LineBasicMaterial</summary> <param name ="parameters" type="String">string类型的JS
`THREE.LineBasicMaterial` 是 three.js 中用来创建用于绘制线条的基本材质。
最新发布
qq_37030315的博客
07-02 781
demo案例 是 three.js 中用来创建用于绘制线条的基本材质。以下是它的入参、出参、方法和属性的详细说明。 构造函数可以接收一个包含多个属性的对象。常用属性如下： 出参 (Return Value) 构造函数 创建并返回一个 对象。 继承自 ，因此具有 的所有方法。常用的方法包括： 继承自 ，并有以下特有属性：以下是一个使用 绘制线条的简单示例： 压图地址
three.js中直线的创建，以及new THREE.LineBasicMaterial不能设置宽度问题。
liuxiaocaie的博客
08-01 1368
1、用LineBasicMaterial创建的线条发现无法设置宽度，官方给的答案就是始终1。直线的创建导入相关包。2、此方法可以设置宽度。
Three.js线条光波动画特效.zip
10-08
Three.js中的LineBasicMaterial或LineDashedMaterial可用于线条，它们允许设置颜色、透明度和线宽等属性。为了实现光波效果，可能需要使用渐变颜色或者动态改变线条的颜色值。 动画的实现则依赖于时间的更新。通过...
three.js3维坐标系+绘制立方体（带边框）
02-28
three.js是JavaScript的一个强大库，专门用于在Web浏览器中进行3D图形编程。让我们一步步来了解这个过程。 首先，我们需要了解three.js的基础知识。它提供了场景(Scene)、相机(Camera)和渲染器(Renderer)三个核心...
Three.js点线几何空间图形特效
07-24
Three.js是一个基于WebGL的JavaScript库，它为开发人员提供了一个简单易用的接口来创建3D内容，可以在现代浏览器上运行，无需插件支持。 首先，我们要理解Three.js中的基本概念。Three.js的核心对象是场景(Scene)，...
使用three.js制作的流星效果.zip
01-06
接下来，我们创建一个材质（Material），如`THREE.LineBasicMaterial`，并设置其颜色、透明度等属性。将几何体与材质结合，生成流星线条对象，并将其添加到场景中。 为了模拟流星的运动，我们需要在每一帧渲染前...
three.js之材质
youhebuke225的博客
11-30 1383
所谓材质，就是平常我们所说的塑料材质，金属材质，纤维材质等实质上所有材质都是WebGL着色器代码的封装。
深入理解Three.js中线条Line，LinLoop，LineSegments
baby_duoduo的博客
09-27 5417
在可视化开发中，无论是2d（canvas）开发还是3d开发，线条的绘制应用都是比较普遍的。比如绘制城市之间的迁徙图，运行轨迹图等。本文主要讲解的是Three.js中三种线条Line，LineLoop，LineSegments之间的区别，每种线条的原理和对应参数的含义，以及如何选择使用场景等问题。Three.js中提供了两种线条材质，分别是LineBasicMaterial和LineDashedMaterial，本文中讲解到的示例都使用LineBasicMaterial材质，后续也会专门总结相关材质的文章为读
图形化开发（五）021-Three.js之材质——不受光影响-MeshBasicMaterial-同颜色&MeshNormalMaterial-方向不同颜色&LineBasicMaterial线条材质
weixin_44867717的博客
09-10 2131
图形化开发（五）03-Three.js之材质——不受光影响-MeshBasicMaterial-整个物体颜色一样&MeshNormalMaterial-方向不同自动改变颜色 & LineBasicMaterial线条材质 材质 这一节我们讲解一下模型的表现，也就是我们看到的模型的外观——材质。 简单的说就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在渲染程式中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。Three.j
Threejs MeshBasicMaterial材质改用LineMaterial材质，实现线条宽度自定义
imcholl的博客
02-08 1551
把正方体网格作为参数，实际上是根据geometry.vertices的Vector3点集和computeBoundingBox()方法计算的。参考：https://blog.csdn.net/m0_49399323/article/details/107461063。//line2材质的边界值判断。计算和世界轴对齐的一个对象 Object3D （含其子对象）的包围盒，计算对象和子对象的世界坐标变换。但是，我当前使用的项目只支持ES5语法，所以需要将所有需要的文件都由ES6改成ES5。
【Three.js】模型线条化
u013541148的博客
04-26 2524
制作思路： 1.加载模型。我用的是OBJ模型 官网API：https://threejs.org/docs/index.html?q=OBJLoader#examples/zh/loaders/OBJLoader 2.给模型贴上透明材质 3.使用EdgesGeometry创建这个模型描边数据。官网API：https://threejs.org/docs/index.html?q=EdgesGeometry#api/zh/geometries/EdgesGeometry ...
Three.js教程：常用材质介绍
ygtu2018的博客
05-10 864
为了方便开发Threejs提供了一系列的材质，所有材质就是对WebGL着色器代码的封装，如果你不了解WebGL，会通过查阅Threejs文档使用相关材质类即可。
【Three.js】五、three.js中的材质——Material
MAXLZ的博客
09-10 2558
【Three.js】五、three.js中的材质——Material一、 three.js中的材质就是几何体表面的材料。 一、
Three.JS教程5 threejs中的材质
编程圈子-谢厂节的博客
02-16 1762
在Three.js中，材质是应用于几何体（Geometry）的外观和纹理的规则。它们决定了对象在场景中如何反射光线、显示颜色、反射环境等。Three.js提供了各种类型的材质，每种都有不同的特性和用途，使开发人员能够根据需求创建出各种视觉效果。官方文档地址本文源码地码lesson5。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值