Three.js一学就会系列：03 炫酷3D划线

最新推荐文章于 2024-09-26 00:00:00 发布
最新推荐文章于 2024-09-26 00:00:00 发布
阅读量3k 收藏 9
点赞数 5
分类专栏： # 前端-three.js一学就会系列 文章标签： javascript 3d 前端 three.js webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012551928/article/details/128231055
版权

系列文章目录

Three.js一学就会系列：01 第一个3D网站
Three.js一学就会系列：02 画线

文章目录

前言

最近开始入坑前端3D建站，跟大家一起慢慢深入three.js做网站3D

这篇文章给大家讲下three.js 画线升级版，3D炫酷划线

一、省略部分

官网，介绍，以及引入库，参看文章片头系列文章：01 第一个3D网站

二、使用方法

创建一个dom元素

<div id="container"></div>

创建初始化方法

这里面使用到了我们前几篇文章讲到的，创建场景，创建集合，渲染等这里不再详细讲述


let container;

let camera, scene, renderer;

let line;

const segments = 10000;
const r = 800;
let t = 0;

init();

function init() {

	container = document.getElementById('container');

	camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 4000);
	camera.position.z = 2750;

	scene = new THREE.Scene();

	const geometry = new THREE.BufferGeometry();
	// 材质 顶点着色
	const material = new THREE.LineBasicMaterial({ vertexColors: true });
	// 位置数组
	const positions = [];
	// 随机颜色数组
	const colors = [];

	for (let i = 0; i < segments; i++) {

		const x = Math.random() * r - r / 2;
		const y = Math.random() * r - r / 2;
		const z = Math.random() * r - r / 2;

		// positions

		positions.push(x, y, z);

		// colors

		colors.push((x / r) + 0.5);
		colors.push((y / r) + 0.5);
		colors.push((z / r) + 0.5);

	}

	geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
	geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

	line = new THREE.Line(geometry, material);
	scene.add(line);

	// 用WebGL渲染出你精心制作的场景
	renderer = new THREE.WebGLRenderer();
	// 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	container.appendChild(renderer.domElement);

}

知识点：
这里面采用循环，将颜色值和位置通过循环的方式，存储并设置到BufferGeometry对应中，
setAttribute：设置几何属性 'position’位置，'color’颜色
Float32BufferAttribute：第一个参数为数据，第二个参数为分隔数，坐标（x,y,z）所以采用3

线条动起来

let container, clock;

letcamera, scene, renderer;

let line;

const segments = 10000;
const r = 800;
let t = 0;

init();
animate();

function init() {

	container = document.getElementById('container');

	camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 4000);
	camera.position.z = 2750;

	scene = new THREE.Scene();
	// 用于跟踪时间
	clock = new THREE.Clock();

	const geometry = new THREE.BufferGeometry();
	// 材质 顶点着色
	const material = new THREE.LineBasicMaterial({ vertexColors: true });
	// 位置数组
	const positions = [];
	// 随机颜色数组
	const colors = [];

	for (let i = 0; i < segments; i++) {

		const x = Math.random() * r - r / 2;
		const y = Math.random() * r - r / 2;
		const z = Math.random() * r - r / 2;

		// positions

		positions.push(x, y, z);

		// colors

		colors.push((x / r) + 0.5);
		colors.push((y / r) + 0.5);
		colors.push((z / r) + 0.5);

	}

	geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
	geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
	
	// 生成定点位置
	generateMorphTargets(geometry);

	// 计算边界
	geometry.computeBoundingSphere();

	line = new THREE.Line(geometry, material);
	scene.add(line);

	// 用WebGL渲染出你精心制作的场景
	renderer = new THREE.WebGLRenderer();
	// 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	container.appendChild(renderer.domElement);

	// 监听窗口尺寸变化
	window.addEventListener('resize', onWindowResize);

}

function onWindowResize() {
	// 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）
	camera.aspect = window.innerWidth / window.innerHeight;
	// 更新摄像机投影矩阵 (参数更新后需要更新)
	camera.updateProjectionMatrix();

	renderer.setSize(window.innerWidth, window.innerHeight);

}

// 渲染循环

function animate() {

	requestAnimationFrame(animate);

	render();

}

// 渲染 动画
function render() {

	const delta = clock.getDelta();
	const time = clock.getElapsedTime();

	line.rotation.x = time * 0.25;
	line.rotation.y = time * 0.5;

	t += delta * 0.5;
	line.morphTargetInfluences[0] = Math.abs(Math.sin(t));
	// line.morphTargetInfluences[0] = 0;

	renderer.render(scene, camera);

}

//  位置
function generateMorphTargets(geometry) {

	const data = [];

	for (let i = 0; i < segments; i++) {

		const x = Math.random() * r - r / 2;
		const y = Math.random() * r - r / 2;
		const z = Math.random() * r - r / 2;

		data.push(x, y, z);

	}

	const morphTarget = new THREE.Float32BufferAttribute(data, 3);
	morphTarget.name = 'target1';

	geometry.morphAttributes.position = [morphTarget];

}

知识点：
为了实现动画效果，除了采用了熏染循环，对line进行了位置更新
generateMorphTargets方法，用于生成随机后的定点 赋值到geometry.morphAttributes.position
computeBoundingSphere：计算边界
Clock：用于计算时间，方便对动画效果支持

完整代码（实例）

<html>

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body {
			margin: 0;
		}
	</style>
</head>

<body>
	<script src="./three.js"></script>
	<div id="container"></div>
	<!-- <script src="https://threejs.org/build/three.js"></script> -->
	<script>
		let container, clock;

		let camera, scene, renderer;

		let line;
		
		const segments = 10000;
		const r = 800;
		let t = 0;

		init();
		animate();

		function init() {

			container = document.getElementById('container');

			camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 4000);
			camera.position.z = 2750;

			scene = new THREE.Scene();
			// 用于跟踪时间
			clock = new THREE.Clock();

			const geometry = new THREE.BufferGeometry();
			// 材质 顶点着色
			const material = new THREE.LineBasicMaterial({ vertexColors: true });
			// 位置数组
			const positions = [];
			// 随机颜色数组
			const colors = [];

			for (let i = 0; i < segments; i++) {

				const x = Math.random() * r - r / 2;
				const y = Math.random() * r - r / 2;
				const z = Math.random() * r - r / 2;

				// positions

				positions.push(x, y, z);

				// colors

				colors.push((x / r) + 0.5);
				colors.push((y / r) + 0.5);
				colors.push((z / r) + 0.5);

			}

			geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
			geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
			
			// 生成定点位置
			generateMorphTargets(geometry);

			// 计算边界
			geometry.computeBoundingSphere();

			line = new THREE.Line(geometry, material);
			scene.add(line);

			// 用WebGL渲染出你精心制作的场景
			renderer = new THREE.WebGLRenderer();
			// 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			container.appendChild(renderer.domElement);

			// 监听窗口尺寸变化
			window.addEventListener('resize', onWindowResize);

		}

		function onWindowResize() {
			// 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）
			camera.aspect = window.innerWidth / window.innerHeight;
			// 更新摄像机投影矩阵 (参数更新后需要更新)
			camera.updateProjectionMatrix();

			renderer.setSize(window.innerWidth, window.innerHeight);

		}

		// 渲染循环

		function animate() {

			requestAnimationFrame(animate);

			render();

		}

		// 渲染 动画
		function render() {

			const delta = clock.getDelta();
			const time = clock.getElapsedTime();

			line.rotation.x = time * 0.25;
			line.rotation.y = time * 0.5;

			t += delta * 0.5;
			line.morphTargetInfluences[0] = Math.abs(Math.sin(t));
			// line.morphTargetInfluences[0] = 0;

			renderer.render(scene, camera);

		}

		//  位置
		function generateMorphTargets(geometry) {

			const data = [];

			for (let i = 0; i < segments; i++) {

				const x = Math.random() * r - r / 2;
				const y = Math.random() * r - r / 2;
				const z = Math.random() * r - r / 2;

				data.push(x, y, z);

			}

			const morphTarget = new THREE.Float32BufferAttribute(data, 3);
			morphTarget.name = 'target1';

			geometry.morphAttributes.position = [morphTarget];

		}
	</script>
</body>

</html>

效果

在这里插入图片描述

总结

以上就是今天要讲的内容，本文仅仅简单介绍了three.js的使用，而three.js提供了非常多的3D显示功能，后续文章，我将带大家慢慢深入了解。

如果觉得有用欢迎点赞关注
有问题私信我！！~~

成茂峰
关注
专栏目录
ThreeJS之画线（Drawing lines）
BinParker的博客
03-14 1285
线是画在每一对连续的顶点之间的，而不是在第一个顶点和最后一个顶点之间绘制线条（线条并未闭合）
03-threejs画线
jiuliangliang的博客
01-04 1352
3、这个时候可以看到项目中有条蓝色的线条，但是背景颜色是黑色的，我们可以在Base.js中设置一下颜色。新建Base.js文件，用来编写three.js文件，抛出一个类，这个类是用来挂载dom节点的。1、命令窗口输入以下代码，我的项目名字是drawline,大家可自行填写名称。6、创建线条对象，并将几何体和材质传递到构造函数中。5、在Base.js中写一个方法，用来添加线条。在Base.js中引入场景、相机和渲染器，2、抛出一个线条数组，并将创建一个线条数组。7、将线条添加到线条数组中去。
ThreeJS入门（035）：THREE.LineBasicMaterial 知识详解，示例代码
最新发布
大剑师兰特的GIS世界
09-26 748
`THREE.LineBasicMaterial` 是 Three.js 中用于渲染线条的一种材质类型。这种材质非常基础，它主要用来绘制简单的线段，支持基本的颜色设置和透明度调整。`THREE.LineBasicMaterial` 不支持光照模型，因此它不会根据光源的位置改变颜色或亮度。下面详细介绍 `THREE.LineBasicMaterial` 的特性和用法。
threejs 画点、线
chinaloft的博客
08-16 270
我们可以把这些点显示出来，操作如下。就是每个点的位置，放个白色的box。threejs画线，比较基础。第一步，定出控制的点。
ThreeJS学习笔记（3）-简单画线
10-12 2784
// 老三样 场景scene，相机camera，渲染器render         var scene=new THREE.Scene();         // 相机         var camera = new THREE.PerspectiveCamera(45,1,1,1000);         camera.position.set(0,0,100);         c
three.js绘制直线
yinge0508的博客
02-17 4490
先看效果： 本文中创建直线的方式用了三种： 方式一：使用 Vector3创建点后，添加到geometry.vertices中（用的普通模型对象） var p1 = new THREE.Vector3(50,10,20); var p2 = new THREE.Vector3(10,40,30); geometry.vertices.push(p1,p2); 方式二：使用 Vector3, LineCurve3 var p3 = new THREE.Vector3(100,10,10..
用three.js打造的3D个人炫酷网站.zip
12-10
用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站...
基于three.js的炫酷Canvas 3D线条动画特效.zip
08-23
Three.js是一个广泛使用的开源JavaScript库，它使得在浏览器中进行3D渲染变得简单易行，无需深入了解底层的WebGL API。本项目“基于Three.js的炫酷Canvas 3D线条动画特效”旨在展示如何使用Three.js来构建令人惊叹的...
three.js实现炫酷的全景3D重力感应
10-17
在本文中，我们将深入探讨如何使用three.js库来创建一个具有重力感应功能的炫酷全景3D体验。three.js是一个流行的JavaScript库，专门用于在Web浏览器中创建3D图形。通过结合重力感应，我们可以为移动设备上的用户...
Three.js-webgl物联网粮仓3D可视化
03-12
Three.js是一个强大的JavaScript库，专门用于在Web浏览器中创建和展示3D图形。它充分利用WebGL API，使开发者无需深入理解底层复杂的图形编程，就能便捷地构建出引人入胜的3D场景。在这个项目中，Three.js用于构建...
Three.js一学就会系列：02 画线
成茂峰
12-07 2024
最近开始入坑前端3D建站，跟大家一起慢慢深入three.js做网站3D这篇文章给大家讲下three.js 画线官网，介绍，以及引入库，参看文章片头系列文章：01 第一个3D网站 创建一个透视摄像机 将渲染器添加到页面上 创建一个线条 渲染场景 requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。 完整代码（实例） 效果 以上就是今天要讲的内容，本文仅仅简单介绍了three.
three.js 简单画线
风起未来
08-04 4031
最近需要用到three.js 开始接触 但是在简单得画线都一直报错，基本得引入都没问题； 最后才发现 new THREE.Geometry()；125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry 代码如下 <!DOCTYPE html> <html> <head> <title>Line</title> <style type="text/css"> body.
vue Threejs实现任意画线(鼠标点击画线)(附源码)
收集、分享
02-22 930
vue Threejs实现任意画线(鼠标点击画线) 实时画线 动态画线
study-threeJS1:使用three.js进行线条绘制
04-08
Study-ThreeJS 测试
threejs案例一——画线
weixin_44426574的博客
10-19 405
【代码】threejs案例一——画线。
ThreeJs绘制线
Baker的博客
08-05 524
Threejs提供了绘制线的功能，先设定多个点数据，threeJs提供方法将多个点按照顺序连接起来，并提供线的材料颜色等，在上一篇中有讲到拖拽物体的功能，如果把线加入到可拖拽数组中，也可以实现拖拽线的功能，画线功能柜常用于地图编辑等，具体源码如下： <!DOCTYPE html> <html lang="...
three.js. 3D机房项目
09-06
【描述】"使用three.js开发的3D机房项目"意味着项目的核心是three.js，这是一个开源的JavaScript库，专门用于创建和展示3D计算机图形。通过这个项目，开发者可以构建交互式的、高细节度的机房模型，包括服务器、空调...
Three.js一学就会系列：04 炫酷3D文字
成茂峰
01-02 766
最近开始入坑前端3D建站，跟大家一起慢慢深入three.js做网站3D这篇文章给大家讲下 在加载three.js其他内置插件时，我们怎么使用，这里我给大家介绍一下在vue项目中使用以上就是今天要讲的内容，本文仅仅简单介绍了three.js的使用，而three.js提供了非常多的3D显示功能，后续文章，我将带大家慢慢深入了解。有问题私信我！！~~
Three.js入门之hello world以及如何绘制线
10-19
主要给大家介绍了关于Three.js入门之hello world以及如何绘制线的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
threejs — 9 画线三种方式
Tx457973的博客
10-08 1802
划线三种方式 基本使用 代码：https://github.com/taixinF/methreejs
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

成茂峰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值