[ThreeJS] 用 SVG 貼圖顯示中文

HTML

<div id="Container"></div>

<div id="LabelTpl" style="display:none;">
    <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 30 30">
        <text x="15" y="15" fill="#fff" text-anchor="middle"></text>
    </svg>
</div>

<script src="../Scripts/three.145/three.min.js"></script>
<script src="../Scripts/three.145/controls/OrbitControls.js"></script>
<script src="../Scripts/three.145/loaders/GLTFLoader.js"></script>
<script src="main.js"></script>

main.js

/* 初始化渲染器 */
const renderer = new THREE.WebGLRenderer({ antialias: true });
document.getElementById('Container').appendChild(renderer.domElement);

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);


/* 初始化場景 */
const scene = new THREE.Scene();
scene.background = new THREE.Color('#000'); /* 背景顏色 */
scene.add(new THREE.AmbientLight('#FFF', 0.5)); /* 加入環境光 */
scene.add(new THREE.AxesHelper(50)); /* 3D 軸標示 */

/* 初始化鏡頭 */
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 300);
camera.position.set(0, 4, 12);


/* 初始化軌道控制，鏡頭的移動 */
const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.update();


/* 渲染週期 */
function renderCycle() {
    renderer.render(scene, camera);
    requestAnimationFrame(renderCycle);
}
renderCycle();



/*---------------------------------------------------------------*/

function svgBase64(svg) {
    svg = svg.replace(/\s+</g, '<').replace(/>\s+/g, '>');
    return 'data:image/svg+xml,' + encodeURIComponent(svg);
}


const textureLoader = new THREE.TextureLoader();
const $labelTpl = document.querySelector('#LabelTpl');
const $labelText = document.querySelector('#LabelTpl text');


/* 環線 */
function addCircle(label,  z) {
    $labelText.innerHTML = label;
    let imageData = svgBase64($labelTpl.innerHTML);

    const particles = new THREE.Points(
        new THREE.EdgesGeometry(new THREE.CircleGeometry(10, 6)),
        new THREE.PointsMaterial({
            map: textureLoader.load(imageData),
            color: '#FFF',
            size: 4,
            depthWrite: false,
            transparent: true,
        })
    );
    particles.position.z = z;
    scene.add(particles);


    const circle = new THREE.LineSegments(
        new THREE.EdgesGeometry(new THREE.CircleGeometry(10, 60)),
        new THREE.LineBasicMaterial({ color: '#FFF' })
    );
    circle.position.z = z;
    scene.add(circle);
}

addCircle('冬至', 4);
addCircle('夏至', -4);