threejs — 9 画线三种方式

TaiXinF

已于 2022-10-10 07:11:12 修改

阅读量1.7k

点赞数

分类专栏： webgl threejs 文章标签： javascript vue.js 开发语言

于 2022-10-08 17:48:06 首次发布

本文链接：https://blog.csdn.net/Tx457973/article/details/127213281

版权

本文深入探讨ThreeJS库中绘制线条的三种不同技术，包括基本线条、线段几何体和曲线路径。通过实例代码展示每种方法的用法，帮助JavaScript和Vue.js开发者更好地理解和应用ThreeJS进行3D场景中的线条绘制。

摘要由CSDN通过智能技术生成

import './style.css'
import * as THREE from "three";

import {
    OrbitControls
} from "three/examples/jsm/controls/OrbitControls";
import {
    BoxGeometry,
    BufferAttribute
} from 'three';

//canvas
const canvas = document.querySelector(".webgl");

//scene
const scene = new THREE.Scene();


//mesh!!!!!
// width — X轴上面的宽度，默认值为1。
// height — Y轴上面的高度，默认值为1。
// depth — Z轴上面的深度，默认值为1。
// widthSegments — （可选）宽度的分段数，默认值是1。
// heightSegments — （可选）高度的分段数，默认值是1。
// depthSegments — （可选）深度的分段数，默认值是1。
//一、基础画线
// const pointsArray = new Array()
// for (let i = 0; i < 50; i++) {
//     for (let j = 0; j < 3; j++) { //三个角
//         pointsArray.push(
//             new THREE.Vector3(
//                 (Math.random() - 0.5) * 4,
//                 (Math.random() - 0.5) * 4,
//                 (Math.random() - 0.5) * 4
/