ThingOrigin.js

案例展示 ​

创建基础线条材质和虚线材质

<template>
  <div id="TO"></div>
</template>

<script setup>
import { Camera } from '@element-plus/icons-vue';
import { onMounted } from 'vue';
let TO = null;
onMounted(() => {
  //初始化场景
  TO = new ThingOrigin("line", document.getElementById("TO"), {
    helper: {//辅助线
      axes: {
        active: false,
      }
    },
    scene: {
       ground:{ //设置地面
        active: false,
      },
      background: {
        type: 'color',//设置背景颜色
        color: {
          alpha: 1, // 透明度 取值范围0~1
          color: "#000000",// 背景颜色
        },
      },
    },
    camera: {
      "position": {
        "x": 0,
        "y": 100,
        "z": 50
      }
    },
  });

  // 创建实线
  createSolidLine();
  //创建虚线
  createDashedLine();
});

// 创建实线
function createSolidLine() {
  //创建基础线条材质
  var material_1 = TO.material.initLineMaterial({ color: "#00ff00" });
  //创建线条
  let lineGeometry = TO.line.initLine({
    base: {
      p1: { //起始位置
        x: -50,
        y: 30,
        z: 0,
      },
      p2: {//结束位置
        x: 50,
        y: 30,
        z: 0,
      },
    }
  });
  lineGeometry.material = material_1;
  //添加到场景中
  TO.scene.add(lineGeometry);
}

// 创建虚线
function createDashedLine() {
  //创建虚线材质
  var material_2 = TO.material.initLineDashedMaterial({ color: "#ffff00", dashSize: 3, gapSize: 1 });
  //创建线条
  let lineGeometry = TO.line.initLine({
    base: {
      p1: { //起始位置
        x: -50,
        y: 0,
        z: 0,
      },
      p2: {//结束位置
        x: 50,
        y: 0,
        z: 0,
      },
    }
  });
  lineGeometry.material = material_2;
  lineGeometry.computeLineDistances(); // 必须调用此方法使虚线生效
  //添加到场景中
  TO.scene.add(lineGeometry);
}
</script>

<style scoped>
#TO {
  width: 100%;
  height: 400px;
  position: relative;
}
</style>

API 介绍 ​

material.initLineBasicMaterial ​

方法签名返回值描述
initLineBasicMaterial(params: Partial<LineBasicMaterialParameters> = {} )LineBasicMaterial创建基础线条材质

LineBasicMaterialParameters 参数说明：

参数名说明类型必填默认值
color线条材质颜色string | number | Color-0xffffff
linewidth线条宽度（由于渲染器限制，无论如何设置该值，线宽始终为1）number-1
linecap线条两端样式（'butt' | 'round' | 'square'）string-'round'
linejoin线连接节点样式（'round' | 'bevel' | 'miter'）string-'round'
transparent线条是否透明度boolean-false
opacity线条透明度(0.0-1.0)number-1

material.initLineDashedMaterial ​

方法签名返回值描述
initLineDashedMaterial(params: Partial<LineDashedMaterialParameters> = {})LineDashedMaterial创建虚线材质

LineDashedMaterialParameters 参数说明：

参数名说明类型必填默认值
color线条材质颜色string | number | Color-0xffffff
linewidth线条宽度number-1
scale线条中虚线部分的占比number-1
dashSize虚线的大小number-3
gapSize间隙大小number-1
transparent线条是否透明度boolean-false
opacity线条透明度(0.0-1.0)number-1