threejs之顯示Label-CSS2DRenderer

1、若是咱們在場景圖上標識一些文字，有2種經常使用的方法

一、採用threeJs的精靈（Sprite），具體用法查看我另外一篇博客https://my.oschina.net/u/2612473/blog/3038066
二、使用CSS2DRenderer

2、2種方法主要特徵

精靈：文字是在canvas中畫的，精靈的材質就是加載的帶有文字的canvas。
CSS2DRenderer：渲染器是生成一個DIV容器，它的做用是能把HTML元素綁定到三維物體上,在DIV容器中各自的DOM元素分別封裝到CSS2DObject的實例中，並在scene中增長。

相對於精靈CSS2DRenderer有更好的靈活性，能夠更好的經過css控制樣式，而且也更方便的進行頁面的跳轉（經過a元素）

3、CSS2DRenderer方法：

（1）getSize()：返回包含寬度和長度的對象

（2）render ( scene : Scene, camera : Camera ) : null    // 用相機渲染場景

（3）setSize (width : Number, height : Number) : null   //設置渲染器的寬度和高度

4、實例

查看實例效果

完整代碼

<div class="canvasWrap" id="canvasWrap" style="margin-bottom:15px;"></div>

<script>
    var camera, scene, scene2, renderer, labelRenderer;
    var controls;
    var clock = new THREE.Clock();
    var textureLoader = new THREE.TextureLoader();
    var width, height;
    var earth, moon;

    init();
    animate();

    function init() {
        var EARTH_RADIUS = 1;
        var MOON_RADIUS = 0.27;
        var container = document.getElementById('canvasWrap')
        width = document.getElementById('canvasWrap').clientWidth;
        height = document.getElementById('canvasWrap').clientHeight;
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
        camera.position.set(10, 9, 8);
        console.log(camera)
        controls = new THREE.OrbitControls(camera);
        scene = new THREE.Scene();
        scene2 = new THREE.Scene();
        var dirLight = new THREE.DirectionalLight(0xffffff);
        dirLight.position.set(0, 0, 1);
        scene.add(dirLight);

        var axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        var earthGeometry = new THREE.SphereBufferGeometry(EARTH_RADIUS, 16, 16);
        var earthMaterial = new THREE.MeshPhongMaterial({
            specular: 0x333333, //材質的高光顏色。默認值是0x111111
            shininess: 5, //高亮的程度，越高的值越閃亮。默認值爲30
            //顏色貼圖，默認null.紋理貼圖顏色由漫反射顏色.color調節
            map: textureLoader.load('../dist/textures/planets/earth_atmos_2048.jpg'),
            //鏡面反射貼圖值會影響鏡面高光以及環境貼圖對錶面的影響程度。默認null
            specularMap: textureLoader.load('../dist/textures/planets/earth_specular_2048.jpg'),
            //用於建立法線貼圖的紋理。RGB值會影響每一個像素片斷的曲面法線，並更改顏色照亮的方式。法線貼圖不會改變曲面的實際形狀，只會改變光照。
            normalMap: textureLoader.load('../dist/textures/planets/earth_normal_2048.jpg'),
            //法線貼圖對材質的影響程度。典型範圍是0-1 ，默認值是Vector2 設置（1,1）
            normalScale: new THREE.Vector2(0.85, 0.85)
        });
        earth = new THREE.Mesh(earthGeometry, earthMaterial)
        scene.add(earth);

        var moonGeometry = new THREE.SphereBufferGeometry(MOON_RADIUS, 16, 16);
        var moonMaterial = new THREE.MeshPhongMaterial({
            shininess: 5,
            map: textureLoader.load("../dist/textures/planets/moon_1024.jpg")
        });
        moon = new THREE.Mesh(moonGeometry, moonMaterial);
        console.log(moon)
        scene.add(moon);

        //var earthDiv = '<div><a href="aboutMe.html">earth</a></div>' 用字符串寫元素不行
        //earthDiv.style.marginTop = "-1em";
        earthDiv = document.getElementById("label1");
        earthDiv.style.display = "block"
        console.log(earthDiv)
        earthLabel = new THREE.CSS2DObject(earthDiv);
        earthLabel.position.set(0, EARTH_RADIUS, 0);
        earth.add(earthLabel);

        var moonDiv = document.createElement("div");
        moonDiv.className = "label";
        moonDiv.textContent = "Moon";
        //moonDiv.style.marginTop = "-1em";
        var moonLabel = new THREE.CSS2DObject(moonDiv);
        moonLabel.position.set(0, MOON_RADIUS, 0);
        moon.add(moonLabel);

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        container.appendChild(renderer.domElement);

        labelRenderer = new THREE.CSS2DRenderer();
        labelRenderer.setSize(width, height);
        labelRenderer.domElement.style.position = "absolute";
        labelRenderer.domElement.style.top = 0;
        container.appendChild(labelRenderer.domElement);

    }

    function animate() {
        requestAnimationFrame(animate);
        //獲取自時鐘啓動後的秒數
        var elapsed = clock.getElapsedTime() / 3;
        moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);
        renderer.render(scene, camera);
        labelRenderer.render(scene, camera)
    }
    </script>

.canvasWrap {
        position: relative;
        width: 100%;
        height: 500px;
        background: gray;
    }

    .label {
        margin-top: -20px;
        color: #fff;
        border: 1px solid #fff;
        padding: 3px 5px;
        background: rgba(0, 0, 0, 0.6)
    }

注意：標籤中顯示的HTML元素能夠在頁面中先寫好並隱藏起來，運行js 的時候再獲取此元素並顯示，不能在js中直接用字符串的形式建立元素，不然會報錯。