前端3D·Three.js一学就会系列：第二 画线

各位前端伙伴们，大家好，我是阿峰。最近开始入坑前端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>

---

效果

总结

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

---

如果这篇这篇文章对您有帮助？关注、点赞、收藏 ，三连支持一下。 有疑问或想法？评论区见。 我们下期再见。