系列文章目录

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

文章目录

系列文章目录
- [Three.js一学就会系列：01 第一个3D网站](https://blog.csdn.net/u012551928/article/details/128205373)
前言
一、省略部分
二、使用方法
- - 创建一个场景
  - 创建一个透视摄像机
  - 将渲染器添加到页面上
  - 创建一个线条
  - 渲染场景
  - 线条动起来
效果
总结

前言

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

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

一、省略部分

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

二、使用方法

创建一个场景

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 );

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

将渲染器添加到页面上

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 );

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

渲染场景

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

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

线条动起来

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

	renderer.render( scene, camera );
};

animate();

完整代码（实例）

<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>