three.js如何实现3D动态文字效果(2)

class KineticText extends Base { createRenderTarget() { const rt = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight ); this.rt = rt; const rtCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000); rtCamera.position.z = this.params.cameraZ; this.rtCamera = rtCamera; const rtScene = new THREE.Scene(); rtScene.add(this.textMesh); this.rtScene = rtScene; } }

创建字体容器

创建一个容器，并将字体对象本身作为贴图贴上去，再应用动画即可完成

class KineticText extends Base { createTextContainer() { if (this.mesh) { this.scene.remove(this.mesh); this.mesh = null; this.material!.dispose(); this.material = null; } this.rtScene.background = new THREE.Color(this.params.color); const meshConfig = this.meshConfig[this.params.meshName]; const geometry = meshConfig.geometry; const material = new THREE.ShaderMaterial({ vertexShader: meshConfig.vertexShader, fragmentShader: meshConfig.fragmentShader, uniforms: { uTime: { value: 0 }, uVelocity: { value: this.params.velocity }, uTexture: { value: this.rt.texture }, uShadow: { value: this.params.shadow }, uFrequency: { value: this.params.frequency } } }); this.material = material; const mesh = this.createMesh({ geometry, material }); this.mesh = mesh; } update() { if (this.rtScene) { this.renderer.setRenderTarget(this.rt); this.renderer.render(this.rtScene, this.rtCamera); this.renderer.setRenderTarget(null); } const elapsedTime = this.clock.getElapsedTime(); if (this.material) { this.material.uniforms.uTime.value = elapsedTime; } } }

别忘了把相机调远一些

this.cameraPosition = new THREE.Vector3(0, 0, 40);

风骚的动态文字出现了:)

项目地址

Kinetic Text

demo里不止本文创建的这一种形状，大家可以随意把玩。

总结

到此这篇关于three.js如何实现3D动态文字效果的文章就介绍到这了,更多相关three.js 3D动态文字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: