Three.js一学就会系列：02 画线
系列文章目录
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>
效果
总结
以上就是今天要讲的内容，本文仅仅简单介绍了three.js的使用，而three.js提供了非常多的3D显示功能，后续文章，我将带大家慢慢深入了解。
如果觉得有用欢迎点赞关注
有问题私信我！！~~