时间戳

首页 > 解决方案 > 如何使线框像方形网格但不是连接节点的类型？

javascript - 如何使线框像方形网格但不是连接节点的类型？

问题描述

我正在设计人体OBJ的线框样式，我想制作如下图的线框。以下是我如何创建线框和图像的代码，包括它的外观以及我希望它的外观。

// child is the human body's OBJ, is type of THREE.Mesh.
const geo = new THREE.WireframeGeometry(child.geometry)
const mat = new THREE.LineBasicMaterial({color: 0xffffff})
const wireframe = new THREE.LineSegments(geo, mat)
child.add(wireframe)

编辑

现在的样子 现在出现

预期外观 预期外观

标签： javascriptthree.js

解决方案

import * as THREE from 'three'

function createLinesTexture() {
  const width = 200
  const height = 200
  const color = new THREE.Color(0x05cfe8)
  const size = width * height
  const data = new Uint8Array(3 * size)

  const r = Math.floor(color.r * 255)
  const g = Math.floor(color.g * 255)
  const b = Math.floor(color.b * 255)

  for (let i = 0; i < size; i++) {
    const stride = i * 3
    // Here is the tips to change how color patterns mapping
    if ((i / 3) % 4 === 0) {
      data[stride] = r
      data[stride + 1] = g
      data[stride + 2] = b
    } else {
      data[stride] = 255
      data[stride + 1] = 255
      data[stride + 2] = 255
    }
  }

  // used the buffer to create a DataTexture

  const texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat)
  return texture
}

推荐阅读