Three.JS初探

最新推荐文章于 2024-06-13 09:33:09 发布

游在雨城

最新推荐文章于 2024-06-13 09:33:09 发布

阅读量1.1k

点赞数

分类专栏： Three.JS 文章标签： Three.JS WebAR

本文链接：https://blog.csdn.net/aiyan1111111/article/details/78928678

版权

Three.JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

WebAR/WebVR的优势

跨平台毫无压力

传统AR/VR应用的开发需要考虑不同平台的发布，例如：AR在移动端的应用需要考虑到Android、iOS两个完全不同的开发及应用平台，而VR也需要考虑到不同硬件设备、平台间的兼容性问题。而WebAR/WebVR通过WebGL渲染在各类系统（Android、iOS、Windows、Mac、Linux等）Web端直接进行运行，一方面对于开发人员而言，无需考虑跨平台开发所带来的压力和麻烦；另一方面对于开发团队而言，同一套程序开发一次就能兼容各类系统/平台，不仅能节省开发周期，同时能节省开发资源；而对于用户而言，不再受限于硬件设备同时能在各个系统、硬件间混合体验。

不再受限于应用程序

WebAR/WebVR以浏览器超链接方式进行访问，突破了传统AR/VR受限于应用程序的僵局。而这样的体验方式，一方面省去了用户下载的过程，也避免了用户所体验硬件不同带来的顾虑，同时也为用户带来的随时随地进行使用的用户体验；而另一方面，开发者在对AR/VR内容进行更新、维护时，不在考虑热更新方式还是迭代应用程序的问题，同时也给用户带去了永远没有提示下载更新的快感。而用户体验方面，用户永远不用担心传统AR/VR应用程序安装包大小所带来的问题，也可以达到随用随去，用完即走的便利性。

推广途径的递增

传统AR/VR的应用需要受限于应用程序，在推广应用程序时往往需要引导用户下载相应应用程序，而WebAR/WebVR可以在任何超链接访问方式下使用，使得在目前各类社交平台（QQ、微信、微博）、自媒体大流量平台等可以快速的推广并且快速的体验。

WebAR/WebVR的发展前景

未来，WebAR/WebVR将在各类社交平台（微博、微信、QQ等）大流量上快速的发展，将有越来越多的基于WebAR/WebVR的应用呈现在用户面前，就好比前面在微博上火热升温的全景图体验，在给用户带来全新体验的同时，也会将WebAR/WebVR推广到各行各业中。
WebAR/WebAR的发展，在便捷性用户体验的催生下，势必会出现便于普通用户快速制作并发布的SAAS平台，普通小白用户通过DIY的方式制作自己的AR/VR应用，并通过Web的方式快速进行分析、传播、体验。而目前类似RAVV集团（国内首家集AR、ARCore、HoloLens于一体的AR SAAS云平台）正快速的部署，相信不久WebAR、WebVR也将面世。

Three.JS简单介绍

WebGL——让浏览器上可以渲染显示3D模型或场景的渲染技术，以Javascript为开发语言
OpenGL ES——OpenGL简化版本，通过让浏览器实现IOpenGL ES规范，可以通过指令操作显卡，从而进行3D渲染
Three.JS——封装好的WebGL，最大的特点在于跨平台性
最主要的四个组件——Scene、Camera、Rendener、Gemeotry

Three.JS第一个程序

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        canvas { width: 100%; height: 100%; }
        body { background-color: #000FFF;}
    </style>
    <!--//引入Three.js-->
    <script src="js/three.js"></script>

</head>
<body>
    <script>
        //新建一个场景
        var scene = new THREE.Scene();
        //新建相机——（视场角，窗口的纵横比，近裁剪面，远裁剪面）
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        //添加渲染器
        var renderer = new THREE.WebGLRenderer();
        //设置清除颜色，默认是纯黑色
        renderer.setClearColor('#FFFFFF');
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
debugger;
        //几何体
        var geometry = new THREE.CubeGeometry(1,1,1);
        //添加材质
        var material = new THREE.MeshBasicMaterial({color: 0x0FFFFF});
        //组成最终的网格
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        //增加一个小球
        var geometry_1=new THREE.SphereGeometry(1,32,32);
        var material_1=new THREE.MeshBasicMaterial({color: 0x0FFFFF});
        var sphere=new THREE.Mesh(geometry_1, material_1);
        scene.add(sphere);
        //控制小球的运动方向
        var bLeft=false;

        camera.position.z = 10;
        //渲染函数
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            //通过场景和相机就能渲染出来
            if(bLeft)
            {
                sphere.position.x-=0.1;
            }
            else
            {
                sphere.position.x+=0.1;
            }
            if(sphere.position.x>5)
            {
                bLeft=true;
            }
            else if(sphere.position.x<-5)
            {
                bLeft=false;
            }
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>

运行效果如下

游在雨城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Three.JS初探

WebAR/WebVR的优势跨平台毫无压力传统AR/VR应用的开发需要考虑不同平台的发布，例如：AR在移动端的应用需要考虑到Android、iOS两个完全不同的开发及应用平台，而VR也需要考虑到不同硬件设备、平台间的兼容性问题。而WebAR/WebVR通过WebGL渲染在各类系统（Android、iOS、Windows、Mac、Linux等）Web端直接进行运行，一方面对于开发人员而言，无
复制链接

扫一扫