一、不废话，先上图。目标效果：使用亮的点，组成字。（完整代码，请滑到最后）
二、核心思路
①用THREE.Points画点。
②用THREE.TextGeometry加载字体文件（不用渲染），然后获取它的vertices属性获取组成字体的点集。
二、实现。
①引入核心代码
//核心js插件//控制器（鼠标键盘交互的控制）//性能监测//动画复制代码
②加载场景、相机、光、控制器、性能监测器等3d基础环境
//渲染器 function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xeeeeee); renderer.shadowMap.enabled = true; //告诉渲染器需要阴影效果 document.body.appendChild(renderer.domElement); } //初始化相机 function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); camera.position.set(0, 20, 80 ); } //初始化场景 function initScene() { scene = new THREE.Scene(); scene.background = new THREE.Color( 0xa0a0a0 ); scene.fog = new THREE.Fog( 0xa0a0a0, 5, 250 ); } //初始化性能插件 function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //初始换控制器 function initControls() { controls = new THREE.OrbitControls(camera, renderer.domElement); //设置控制器的中心点 controls.target.set( 0, 5, 0 ); // 如果使用animate方法时，将此函数删除 //controls.addEventListener( 'change', render ); // 使动画循环使用时阻尼或自转 意思是否有惯性 controls.enableDamping = true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度 //controls.dampingFactor = 0.25; //是否可以缩放 controls.enableZoom = true; //是否自动旋转 controls.autoRotate = false; controls.autoRotateSpeed = 0.5; //设置相机距离原点的最远距离 controls.minDistance = 1; //设置相机距离原点的最远距离 controls.maxDistance = 2000; //是否开启右键拖拽 controls.enablePan = true; } //窗口变动触发的函数 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function render() { controls.update(); //更新性能插件 stats.update(); //更新动画 // TWEEN.update(); renderer.render(scene, camera); } //循环渲染 function animate() { //更新控制器 render(); requestAnimationFrame(animate); } //整体初始化的函数 function draw() { initRender(); initScene(); initCamera(); initLight(); //具体的物体 // initModel(); initControls(); initStats(); animate(); window.onresize = onWindowResize; }③复制代码 ③加入具体的展示物体（基础平面及点集）
var geo_ver;function initModel() { //辅助工具 var helper = new THREE.AxesHelper(50); scene.add(helper); // 地板 var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) ); mesh.rotation.x = - Math.PI / 2; mesh.receiveShadow = true; scene.add( mesh ); //添加地板割线 var grid = new THREE.GridHelper( 400, 50, 0x000000, 0x000000 ); grid.material.opacity = 0.2; grid.material.transparent = true; scene.add( grid ); //获取点集 getFontPoints('白狗',-23,0,0); //用点画字 pointsMaterial = new THREE.PointsMaterial({ color:0xffffff, size:0.5, transparent:true,//使材质透明 blending:THREE.AdditiveBlending, depthTest:false,//深度测试关闭，不消去场景的不可见面 map:createLightMateria()//刚刚创建的粒子贴图就在这里用上 }); var originGeo = new THREE.Geometry(); for (var i = 0; i 三、整体代码（包括，粒子切换动画）（代码可能比较杂乱）
粒子字体 白狗汪心复制代码
四、注意事项：
（1）自己下载.ttf字体文件。通过https://gero3.github.io/facetype.js/工具可以转化成.json文件。
（2）字体文件一般很大，性能不好。（建议存在后端，然后发请求。或者前期先使用工具裁剪字体文件）。（我用的wqfontcreator，但是你们可能找不到，真的要要，@我）
（3）以上代码没有做过多优化。（各位将就着看···）（见谅）
（4）以上代码不能直接用，需要起个服务，因为请求.json文件的问题