个人资料

主页 博客 留言板 搜索
跳过导航链接首页 > 博客列表 > 博客正文

使用Three.js网页引擎创建酷炫的3D标签墙

分类

    使用Three.js引擎(这是开源的webgl三维引擎,gitgub)进行一个简单应用。做一个酷炫的3d效果的标签墙(http://songshizhao.com/webgl/webgls.aspx

效果如下图所示:

    让所有的标签组成一个球体,并且运动起来。可以手动拖拽,点击可以跳转等等。做完之后小小的总结一下。最后我会把本文的代码整理为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,欢迎使用!如果你觉得内容不错的话,就请留个言,谢谢!

下载地址

点击————>3d标签.zip <————

songshizhao
最初发表2017/3/12 19:30:50 最近更新2017/3/12 19:30:50 5817
为此篇作品打分
10