代码之家 › 专栏 › 技术社区 › Anh Thang Bui

如何控制画布元素在三.js

three.js canvas javascript

Anh Thang Bui · 技术社区 · 4 年前

我有2.3ds文件,我称它为1u(正方形,有文本)和2u(较长的一个,没有文本)。问题是: (见下图)。它们使用相同的编码。

下面是我的代码

const width = 1153.5
const height = 383.5

const frustumSize = 150
const aspect = width / height;
const camera = new OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 1, 1000);
camera.position.set(0, 20, 0);

// scene and light
const scene = new Scene();
scene.background = new Color(0xf0f0f0)

// renderer
const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(width, height)

const container = document.getElementById("keyboard-3d")
container && container.appendChild(renderer.domElement)

// create canvas
const canvas = document.createElement("canvas")
canvas.height = 256
canvas.width = 256

const ctx = canvas.getContext("2d")
ctx.fillStyle = colorCodeMap[codes[0]] || codes[0] || '#2e3b51'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.font = `bold ${size}px Montserrat`
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillStyle = colorCodeMap[codes[1]] || codes[1] || '#22aabc'
if (legend) {
    const lines = legend.split('\n')
    if (lines.length > 1) {
    lines.forEach((line, i) => {
        ctx.font = "bold 80px Montserrat"
        ctx.fillText(line.toUpperCase(), canvas.width / 2, canvas.height / 2 + (i - 0.5) * 110)
    })
    } else {
    ctx.fillText(legend.toUpperCase(), 0.06, 0.06)
    }
}

// create material
const kc = geometry.clone() // loaded before by TDSLoader

const material = new MeshStandardMaterial({
    map: texture,
    metalness: 0.5,
    roughness: 0.6,
    color: colorCodeMap[codes[0]] || codes[0] || '#2e3b51'
})
kc.traverse(function(child) {
    if (child instanceof Mesh) {
    child.material = material
    }
})

scene.add(kc)