• Three.js一学就会系列：02 画线

    系列文章目录

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

    文章目录

    前言

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

    这篇文章给大家讲下three.js 画线

    一、省略部分

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

    二、使用方法

    创建一个场景

    const scene = new THREE.Scene();

    • 1

    创建一个透视摄像机

    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

    • 1
    • 2
    • 3

    知识点：
    camera.position.set()：三个参数固定透视摄像机的位置
    camera.lookAt()：三个参数固定透视摄像机的拍摄方向

    将渲染器添加到页面上

    const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

    • 1
    • 2
    • 3

    创建一个线条

    const points = [];
points.push(new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    知识点：
    Vector3：三维向量x、y和z 代表位置
    BufferGeometry： 是面片、线或点几何体的有效表述
    setFromPoints：设置数据来源
    LineBasicMaterial：线条材质：可定义属性 color颜色，linewidth线宽等参考LineBasicMaterial
    【扩展】 LineDashedMaterial：与LineBasicMaterial同样是线条材质：可定义属性 color颜色，linewidth线宽等参考LineDashedMaterial

    渲染场景

    function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

    • 1
    • 2
    • 3
    • 4
    • 5

    requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。

    线条动起来

    function animate() {
	requestAnimationFrame( animate );
	// 旋转方向，及大小
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render( scene, camera );
};

animate();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    完整代码（实例）

    <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>
		<!-- <script src="https://threejs.org/build/three.js"></script> -->
		<script>
			// 创建一个场景
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
			camera.position.set( 0, 0, 100 );
			camera.lookAt( 0, 0, 0 );

			// 展示
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			// 创建一条线
			const points = [];
			points.push( new THREE.Vector3( - 10, 0, 0 ) );
			points.push( new THREE.Vector3( 0, 10, 0 ) );
			points.push( new THREE.Vector3( 10, 0, 0 ) );
			const geometry = new THREE.BufferGeometry().setFromPoints( points );
			const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

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

			function animate() {
				requestAnimationFrame( animate );

				line.rotation.x += 0.01;
				line.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    效果

    在这里插入图片描述

    总结

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

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

  • 相关阅读:
    【应用】布隆过滤器
    MyBatis 源码解读 一讲到底
    2022“杭电杯”中国大学生算法设计超级联赛（5）
    Unity3D 基础——使用 Mathf.SmoothDamp 函数制作相机的缓冲跟踪效果
    CF1165F2(二分答案)
    乐元素 X Hologres：一站式高性能游戏运营分析平台
    对象解构赋值的用法
    windows环境下安装logstash同步数据，注册系统服务
    常州大学计算机考研资料汇总
    二、网络编程
  • 原文地址：https://blog.csdn.net/u012551928/article/details/128214375