[ThreeJS] 用 SVG 貼圖顯示中文

HTML

原始碼

1. <div id="Container"></div> 
2.  
3. <div id="LabelTpl" style="display:none;"> 
4.    <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 30 30"> 
5.        <text x="15" y="15" fill="#fff" text-anchor="middle"></text> 
6.    </svg> 
7. </div> 
8.  
9. <script src="../Scripts/three.145/three.min.js"></script> 
10. <script src="../Scripts/three.145/controls/OrbitControls.js"></script> 
11. <script src="../Scripts/three.145/loaders/GLTFLoader.js"></script> 
12. <script src="main.js"></script> 

<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

原始碼

1. /* 初始化渲染器 */ 
2. const renderer = new THREE.WebGLRenderer({ antialias: true }); 
3. document.getElementById('Container').appendChild(renderer.domElement); 
4.  
5. renderer.setPixelRatio(window.devicePixelRatio); 
6. renderer.setSize(window.innerWidth, window.innerHeight); 
7.  
8.  
9. /* 初始化場景 */ 
10. const scene = new THREE.Scene(); 
11. scene.background = new THREE.Color('#000'); /* 背景顏色 */ 
12. scene.add(new THREE.AmbientLight('#FFF', 0.5)); /* 加入環境光 */ 
13. scene.add(new THREE.AxesHelper(50)); /* 3D 軸標示 */ 
14.  
15. /* 初始化鏡頭 */ 
16. const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 300); 
17. camera.position.set(0, 4, 12); 
18.  
19.  
20. /* 初始化軌道控制，鏡頭的移動 */ 
21. const orbitControls = new THREE.OrbitControls(camera, renderer.domElement); 
22. orbitControls.update(); 
23.  
24.  
25. /* 渲染週期 */ 
26. function renderCycle() { 
27.    renderer.render(scene, camera); 
28.    requestAnimationFrame(renderCycle); 
29. } 
30. renderCycle(); 
31.  
32.  
33.  
34. /*---------------------------------------------------------------*/ 
35.  
36. function svgBase64(svg) { 
37.    svg = svg.replace(/\s+</g, '<').replace(/>\s+/g, '>'); 
38.    return 'data:image/svg+xml,' + encodeURIComponent(svg); 
39. } 
40.  
41.  
42. const textureLoader = new THREE.TextureLoader(); 
43. const $labelTpl = document.querySelector('#LabelTpl'); 
44. const $labelText = document.querySelector('#LabelTpl text'); 
45.  
46.  
47. /* 環線 */ 
48. function addCircle(label,  z) { 
49.    $labelText.innerHTML = label; 
50.    let imageData = svgBase64($labelTpl.innerHTML); 
51.  
52.    const particles = new THREE.Points( 
53.        new THREE.EdgesGeometry(new THREE.CircleGeometry(10, 6)), 
54.        new THREE.PointsMaterial({ 
55.            map: textureLoader.load(imageData), 
56.            color: '#FFF', 
57.            size: 4, 
58.            depthWrite: false, 
59.            transparent: true, 
60.        }) 
61.    ); 
62.    particles.position.z = z; 
63.    scene.add(particles); 
64.  
65.  
66.    const circle = new THREE.LineSegments( 
67.        new THREE.EdgesGeometry(new THREE.CircleGeometry(10, 60)), 
68.        new THREE.LineBasicMaterial({ color: '#FFF' }) 
69.    ); 
70.    circle.position.z = z; 
71.    scene.add(circle); 
72. } 
73.  
74. addCircle('冬至', 4); 
75. addCircle('夏至', -4); 

/* 初始化渲染器 */
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);