ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Three.js设置线条宽度

2020-09-16 15:32:45  阅读:16  来源: 互联网

标签:three Three LineGeometry var import 100 js 线条


在编写Three.js程序的时候,你设置线模型Line对应线材质LineBasicMaterial的线宽属性.lineWidth,是无效的。

以下是vue中设置three.js线条宽度:

1.导入three.js
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'
2.创建线条模型
var geometry = new LineGeometry()
var pointArr = [
        -100, 0, 0,
        -100, 100, 0,
        0, 0, 0,
        100, 100, 0,
        100, 0, 0
      ]
geometry.setPositions(pointArr)
var material = new LineMaterial({
        color: 0xffffff,
        linewidth: 5
      })
material.resolution.set(window.innerWidth, window.innerHeight)
var line = new Line2(geometry, material)
line.computeLineDistances()
scene.add(line)

  

标签:three,Three,LineGeometry,var,import,100,js,线条
来源: https://www.cnblogs.com/fitnessprogrammer/p/13679368.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有