threejs結合svg

svg做的demo

https://www.html5tricks.com/tag/svg/

在線制作svg

http://tools.jb51.net/static/api/svg/index.html

3維文字

 

 

svg文字

 

 3維的顯示好看點，但是不能修改，必須刪除原有的3維對象再創建新的，這樣很麻煩，尤其不適合顯示實時改動的數據

svg文字效果上好像是差一點，但是便於修改，所以最終決定采用svg的方式

為了方便改動，那為什么不直接使用html標簽？因為html標簽的文字font-size最小只能顯示到7好些，不太記得了，總之不適合這里的小框框，用html總是顯示半行就顯示不下了

其他方案：

1：可以直接像圖上的table那樣，直接在二維平面展示數據，不好的地方是平面上放太多東西就會使3維的可見區域變小

2：可以使用threejs的css2d，沒有什么大的缺點，就是單純因為我做這個css2d的標簽做的不好看不想用

上svg的代碼：

    createPlane(w, h, position, rotation) {
 
        // 基礎網格材質
        var material = new THREE.MeshBasicMaterial({
          color: 0x000000,
          opacity: 0.0,
          side: THREE.DoubleSide
        });
     
        // 平面緩沖幾何體
        var geometry = new THREE.PlaneGeometry(w, h);
     
        var mesh = new THREE.Mesh(geometry, material);
     
        mesh.position.x = position.x;
        mesh.position.y = position.y;
        mesh.position.z = position.z;
     
        mesh.rotation.x = rotation.x;
        mesh.rotation.y = rotation.y;
        mesh.rotation.z = rotation.z;
     
        return mesh;
    },

    createCssObject(w, h, position, rotation) {
 
        var html = [
     
          '<svg width="' + (w + 1) + '" height="' + (h + 1) + '" viewBox="-10 -5 200 70" preserveAspectRatio="xMinYMid meet" xmlns="http://www.w3.org/2000/svg">',
          '<g>',
          '  <text xml:space="preserve" id="wendu" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="22" x="0" stroke-width="0" stroke="#fff" fill="#fff">溫度：22℃</text>',
          '  <text xml:space="preserve" id="shidu" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_2" y="57" x="0" stroke-width="0" stroke="#fff" fill="#fff">濕度：80%</text>',
          '</g>',
          '</svg>'
     
        ].join('\n');
     
        var div = document.createElement('div');
        div.style.background = "#505088" // #505088  1d6166
        div.innerHTML = html
     
        var cssObject = new CSS3DObject(div);
     
        cssObject.position.x = position.x;
        cssObject.position.y = position.y;
        cssObject.position.z = position.z;
     
        cssObject.rotation.x = rotation.x;
        cssObject.rotation.y = rotation.y;
        cssObject.rotation.z = rotation.z;
     
        return cssObject;
    },

    create3dPage(w, h, position, rotation) {
        var plane = My3D.createPlane(w, h, position, rotation);
        My3D.glScene.add(plane);
     
        var cssObject = My3D.createCssObject(w, h, position, rotation);
        My3D.cssScene.add(cssObject);
    },