如何在 3js/threeJS 中輕松繪制字母？

Question

我必須使用 3JS 繪制字母。

以前我用貝塞爾曲線在 Canvas 中繪制了對象，使用的是一個幫助用鼠標完成它們的網站。

在 3JS 中是否有這樣的工具可以完成相同的工作？

我似乎找不到任何東西。 在代碼中手動繪制它們似乎是在浪費時間。

我到處尋找它，但什么也沒有。

我正在使用樣條曲線順便說一句...

    curve = new THREE.SplineCurve( [
    new THREE.Vector2( -90, 50),
    new THREE.Vector2( -150, 0),
    new THREE.Vector2( -130, 50),
    
]);

提前致謝

Answer 1

https://threejs.org/docs/#manual/en/introduction/Creating-text
提供不同的方式來繪制文本。

您可以使用 TextGeometry：

 var camera, scene, renderer; init(); animate(); function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight); camera.position.z = 10; scene = new THREE.Scene(); var loader = new THREE.FontLoader(); loader.load('https://unpkg.com/three@0.77.0/examples/fonts/helvetiker_regular.typeface.json', function(font) { var geometry = new THREE.TextGeometry('Hello World', { font: font, size: 1, height: 1 }); geometry.center(); var material = new THREE.MeshNormalMaterial(); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); }); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r99/three.js" integrity="sha256-QlZjRhqOlDukXFfprbpsdrDQws7TtQdTGDh7F7Q3310=" crossorigin="anonymous"></script>