使用Three.js網頁引擎創建酷炫的3D效果的標簽牆

使用Three.js引擎（這是開源的webgl三維引擎，gitgub）進行一個簡單應用。

做一個酷炫的3d效果的標簽牆（已經放在我的博客首頁的右下角，pc可見），

去我的博客首頁看看實際效果 www.songshizhao.com

靜態效果如下圖所示：

讓所有的標簽組成一個球體，並且運動起來。可以手動拖拽，點擊可以跳轉等等。。

做完之后小小的總結一下。最后我會把本文的代碼整理為html分享在這篇文章下面

首先第一步創建一個載體，

 

            <div id="canvas" style="width: 100%; background: url(images/background/bg1.jpg) no-repeat center; height: 400px;">
                <%--列表--%>
            </div>

 

 

這個載體的作用就是將三維引擎的內容呈現在其中，關鍵是自定義一個id名字，我用canvas，其余都正常。

然后把你想要做動態展示的標簽寫出來，放在id=‘canvas’元素里，每個標簽都需要有id屬性。因為我是動態生成的，就不舉例子了。three.js可以查找頁面中元素放到三維界面當中，也可以輸出元素（js方式）到界面中，為了簡單我自己做好標簽元素然后進行提取。

引用Three.js核心代碼

Three.js很豐富，其他的根據需要引用。我的引用如下

    <script src="../webgl/three.js-master/build/three.js"></script>
    <script src="../webgl/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="../webgl/three.js-master/examples/js/renderers/CSS3DRenderer.js"></script>

 

其中three.js是必須引用的，第二個引用是支持旋轉縮放，第三個自己看名字就知道。

最后根據需要使用Three.js引擎，這個有一套固定的寫法。比如初始化，渲染等等。正像其他引擎一樣！

 

    <script type="text/javascript">
        var camera, renderer, scene;
        var controls;
        var objects=new Array();
        var thetas = new Array();
        var phis = new Array();
        var r = 450;
        int();
        animate();

        function int() {
            camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 2000000);
            camera.position.set(0,0,720);
            scene = new THREE.Scene();
            for (var i = 0; i < elements.length; i++) {
                var element = elements[i];
                var phi = Math.acos(-1 + (2 * i) / elements.length);
                phis.push(phi);
                var theta = Math.sqrt(elements.length * Math.PI) * phi;
                thetas.push(theta);
                var object = new THREE.CSS3DObject(element);
                object.position.x = r * Math.cos(theta) * Math.sin(phi);
                object.position.z = r * Math.sin(theta) * Math.sin(phi);
                object.position.y = r * Math.cos(phi);                
                scene.add(object);
                objects.push(object);               
            }
            renderer = new THREE.CSS3DRenderer;
            //設置大小
            renderer.setSize(400, 400);
            render();
            document.getElementById('canvas').appendChild(renderer.domElement);

            var controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.target.set(0, 0, 0);
            controls.update();

            window.addEventListener('resize', onWindowResize, false);
            controls.addEventListener('change', render);
        }

        function render() {

            renderer.render(scene, camera);

        }


        function animate() {

            requestAnimationFrame(animate);


            var phi = Math.acos(-1 + (2 * i) / elements.length);
            var theta = Math.sqrt(elements.length * Math.PI) * phi;
            for (var i = 0; i < objects.length; i++)
            {
                thetas[i] += 0.001;//phis[i] -= 0.001;
                objects[i].position.x = r * Math.cos(thetas[i]) * Math.sin(phis[i]);
                objects[i].position.z = r * Math.sin(thetas[i]) * Math.sin(phis[i]);
                objects[i].position.y = r * Math.cos(phis[i]);
                //啟用下面的代碼，標簽朝向不變，但因此不可拖拽。
                //var vector = camera.position;
                //vector.copy(objects[i].position - vector).multiplyScalar(1);             
                //objects[i].lookAt(vector);
    
            }

            render();
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(400, 400);
            render();
        }

    </script>

 

 

用js寫三維引擎的代碼，是不是很酷，這樣就把3d的標簽牆做好了，想要看看效果嗎？去我的首頁看看吧！

我去整理整理，把aspx文件提取一下打包成html發表下吧！

接上文！整理結束，做了簡單的demo，歡迎使用！

如果你覺得內容不錯的話，就請留個言，謝謝！

下載地址：請前往我的獨立博客尾部下載（閱讀原文）

http://songshizhao.com/blog/blogPage/98.html