系列文章目录

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

完整代码（实例）

效果

总结

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

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