Feng - 2023年9月
type: channel
link: http://www.fengyitong.name/index.php/2023/09/
description: 半山腰的风采
items: WEBGL实现带数字的圆点

WEBGL实现带数字的圆点
type: item
date: 2023-09-06T23:23:27+08:00
description: 废话不说,代码如下// 绘制带数字的圆点 import { Scene, BufferGeometry, Points, PerspectiveCamera, Vector3, WebGLRenderer, CanvasTexture, ShaderMaterial, Color, BufferAttribute, } from "three"; let renderer, scene, camera; const width = window.innerWidth; const height = window.innerHeight; function init() { const container = document.getElementById("app"); scene = new Scene(); camera = new PerspectiveCamera(45, width / height, 1, 10000); camera.position.set(0, 0, 18); camera.lookAt(scene.position); camera.updateMatrix(); const points = createPoint(); scene.add(points); // const helper = new AxesHelper(5); // scene.add(helper); renderer = new WebGLRenderer(); renderer.setSize(width, height); container.appendChild(renderer.domElement); } function createPoint() { const geometry = new BufferGeometry().setFromPoints([ new Vector3(-3, 3, 0), new Vector3(0, 3, 0), new Vector3(3, 3, 0), new Vector3(-3, 0, 0), new Vector3(0, 0, 0), new Vector3(3, 0, 0), new Vector3(-3, -3, 0), new Vector3(0, -3, 0), new Vector3(3, -3, 0), new Vector3(0, 6, 0), ]); const numbers = [1, 2, 3, 4, 56789, 6, 7, 768, 19, 0]; geometry.setAttribute( "a_number", new BufferAttribute(new Float32Array(numbers), 1) ); const material = new createMaterial(); const points = new Points(geometry, material); return points; } function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } init(); animate(); // testAppendCanvas(); function createCanvasSpirit() { const SIZE = 64; const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = SIZE * 10; canvas.height = SIZE; ctx.font = SIZE + "px serif"; ctx.fillStyle = "#000"; // 居中 ctx.textAlign = "center"; ctx.textBaseline = "middle"; for (let i = 0; i < 10; i++) { ctx.fillText(i, SIZE * i + SIZE / 2, SIZE / 2); } return canvas; } function testAppendCanvas() { const canvas = createCanvasSpirit(); canvas.style.border = "1px solid #000"; canvas.style.marginTop = "10px"; canvas.style.marginLeft = "10px"; const container = d…