【微信小程序 threejs】添加3d字体 + https合法性问题解决

demo例子

直接上代码

引用

import * as THREE from '../../libs/three.weapp.js'

代码示例

 {
        const loader = new THREE.FontLoader();
        // promisify font loading
        function loadFont(url) {
            return new Promise((resolve, reject) => {
                loader.load(url, resolve, undefined, reject);
            });
        }

        async function doit() {
            const font = await loadFont('https://threejsfundamentals.org/threejs/resources/threejs/fonts/helvetiker_regular.typeface.json');
            const geometry = new THREE.TextBufferGeometry('three.js', {
                font: font,
                size: 3.0,
                height: .2,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 0.15,
                bevelSize: .3,
                bevelSegments: 5,
            });
            const mesh = new THREE.Mesh(geometry, createMaterial());
            geometry.computeBoundingBox();
            geometry.boundingBox.getCenter(mesh.position).multiplyScalar(-1);

            const parent = new THREE.Object3D();
            parent.add(mesh);

            addObject(0, -3, parent);
        }
        doit();
    }

   //创建物体
    function createMaterial() {
      //Phong网格材质(MeshPhongMaterial)
        const material = new THREE.MeshPhongMaterial({
          //材质(Material) 基类
          //.side : 定义将要渲染哪一面 - 正面，背面或两者。 
          //->默认为THREE.FrontSide。其他选项有THREE.BackSide 和 THREE.DoubleSide。
            side: THREE.DoubleSide,
        });

        //h — 色相值处于0到1之间。hue value between 0.0 and 1.0
        //s — 饱和度值处于0到1之间。
        //l — 亮度值处于0到1之间。
        const hue = Math.random();
        const saturation = 1;
        const luminance = .5;
        material.color.setHSL(hue, saturation, luminance);

        return material;
    }

官方网址

网址：https://threejs.org/

搜FontLoader

引用

import { FontLoader } from 'three/addons/loaders/FontLoader.js';

代码示例

const loader = new FontLoader();
const font = loader.load(
	// 资源URL
	'fonts/helvetiker_bold.typeface.json',

	// onLoad回调
	function ( font ) {
		// do something with the font
		console.log( font );
	},

	// onProgress回调
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError回调
	function ( err ) {
		console.log( 'An error happened' );
	}
);

项目

项目是要在每个盒子旁加字，如下图：

所以要在盒子循环中加字

//循环
gltfScene.forEach((obj, index) => {
        obj.material.depthTest = false;
        obj.material.depthWrite = false;
        // obj.material.blending = THREE.AdditiveBlending;
        obj.material.color.set(0x0088ff);
        
        ...//在这加字
        }

import引用

拿到demo的libs放到自己的项目下，详见我【微信小程序】借用demo的gltf引用

直接引用

import * as THREE from '../../libs/three.weapp.js'

代码

直接上代码

init(){
...
  //Phong网格材质(MeshPhongMaterial)
    material = new THREE.MeshPhongMaterial({
      side: THREE.DoubleSide,
    });
    //h — 色相值处于0到1之间。hue value between 0.0 and 1.0
    //s — 饱和度值处于0到1之间。
    //l — 亮度值处于0到1之间。
    const hue = Math.random();
    const saturation = 1;
    const luminance = .5;
    material.color.setHSL(hue, saturation, luminance);
 // Geometry

    const gltfLoader = new GLTFLoader();
    gltfLoader.load('https://xxx/static/electricity.glb', (gltf) => {
      root = gltf.scene;
      gltfScene = [...root.children];
      console.log(gltfScene); //c1-c7
      console.log(root); //scene
      gltfScene.shift()

      //forEach(带room)
      root.children.forEach((obj, index) => {
        obj.material.transparent = true;
        obj.material.opacity = 0.4;

        // obj.material.color.set(0xff8888);
        // obj.material.blending = THREE.AdditiveBlending;
      })
      //forEach
      gltfScene.forEach((obj, index) => {
        obj.material.depthTest = false;
        obj.material.depthWrite = false;
        // obj.material.blending = THREE.AdditiveBlending;
        obj.material.color.set(0x0088ff);

        const loader = new THREE.FontLoader();
        loader.load(
          // 资源URL
          'https://xxx/static/Arial.json',

          // onLoad回调
          function (font) {
            // do something with the font
            const geometry = new THREE.TextBufferGeometry('c' + (index + 1), {
              font: font,
              size: 1.5,
              height: .1,
              curveSegments: 12,
              bevelEnabled: true,
              bevelThickness: 0.05,
              bevelSize: .05,
              bevelSegments: 5,
            });
            // geometry.translate(0, 3, 0)
            geometry.rotateX(-45)
            const mesh = new THREE.Mesh(geometry, material);
            console.log(mesh);
            obj.add(mesh);
          }
        );
      })

      scene.add(root);
    });
}

重点

1.两个合并，不用async和swait和promise写，借助官方大框架
2.https会报错，不合法，在 微信公众平台 ，把自己设成 开发人员
进去之后找到 开发->开发管理，服务器域名->修改


3.是想从c1-c7
不用设数组，设index，用‘c’+(index+1)实现，index从0开始要+1

结果图例