提问者:小点点

我怎样才能轻松地画出3js/3ejs的字母?


我必须用3JS画字母。

以前我用beziercurves在画布上画过对象,使用的是一个帮助用鼠标完成的网站。

同样的工作在3JS有这样的工具吗?

我好像什么都找不到。 用代码手工绘制它们似乎只是浪费时间。

我到处找都找不到。

我用的是样条曲线。。。

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

提前致谢


共1个答案

匿名用户

https://threejs.org/docs/#manual/en/introduction/creating-text
提供了绘制文本的不同方法。

您可以使用TextGeometry:

null

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>