ThreeJS静态文本动画

时间:2017-06-14 23:07:51

标签: javascript animation three.js

我希望ThreeJS除了在飞机顶部之外还有一些动画文字的方法。我更喜欢将文本设置为2D动画并仅悬浮在模型上方。我试图在画布之外使用div,但是这些问题指向了正确的位置并且仍然保持响应。

我希望它看起来像this,同时为文本下方的线设置动画。

1 个答案:

答案 0 :(得分:0)

你可以做的是你想要创建一个2d画布并将其用作纹理,就像这样



var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 40px Arial";
context1.fillStyle = "rgba(255,0,0,0.95)";
context1.fillText('Hello, world!', 0, 50);

// canvas contents will be used for a texture
var texture1 = new THREE.Texture(canvas1) 
texture1.needsUpdate = true;

var material1 = new THREE.MeshBasicMaterial( {map: texture1, side:THREE.DoubleSide } );
material1.transparent = true;

var mesh1 = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas1.width, canvas1.height),
    material1
  );