直线的创建 导入相关包
- import * as THREE from 'three'
- import OrbitControls from 'three-orbitcontrols'
- import { Line2 } from 'three/examples/jsm/lines/Line2'
- import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
- import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
1、用LineBasicMaterial创建的线条发现无法设置宽度,官方给的答案就是始终1
this.EarthLine("#00d321"); //创建地球中心直线
- EarthLine(color) {
- const lineArr = [
- new THREE.Vector3(0, 70, 0),
- new THREE.Vector3(0, -70, 0),
- ];
- const material = new THREE.LineBasicMaterial({
- color: color,
- linewidth: 100,
- });
- const linegeometry = new THREE.BufferGeometry().setFromPoints(lineArr);
- const line = new THREE.Line(linegeometry, material);
- this.scene.add(line);
- }
2、此方法可以设置宽度
- EarthLine(color) {
- var geometry = new LineGeometry();
- var pointArr = [0, 80, 0, 0, -80, 0];
- geometry.setPositions(pointArr);
- var material = new LineMaterial({
- color: color,
- linewidth: 3,
- });
- material.resolution.set(window.innerWidth, window.innerHeight);
- var line = new Line2(geometry, material);
- line.computeLineDistances();
- this.scene.add(line);
- }