• 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显示功能，后续文章，我将带大家慢慢深入了解。

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

  • 相关阅读:
    笔者更加愿意将产业互联网看成是一个比消费互联网要丰富得多的概念
    工厂WMS系统货架位管理：优化仓储效率
    Oracle DBA常用SQL语句
    论文回顾：Playful Palette: An Interactive Parametric Color Mixer for Artists
    第三章：最新版零基础学习 PYTHON 教程（第三节 - Python 运算符—Python 中的关系运算符）
    SQLServer下载安装详细图解
    从函数计算到 Serverless 架构
    BUUCTF key不在这里
    Linux Shell脚本一文读懂
    力扣第41天----第123题、第188题
  • 原文地址：https://blog.csdn.net/u012551928/article/details/128214375