webgl学习总结画线面及场景和物体动

最新推荐文章于 2021-06-08 20:52:28 发布

转载最新推荐文章于 2021-06-08 20:52:28 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/colorful-paopao1/p/8250881.html

本文介绍了WebGL的基础知识及如何使用three.js简化Web 3D项目的开发过程。涵盖3D场景构建要素如场景、相机与渲染器，以及实现动态效果和性能监控的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebGL是在浏览器中实现三维效果的一套规范。是浏览器中的3D引擎，是利用js代码来实现加载3D模型，渲染、输出等功能，从而实现在浏览器和微信中浏览三维文件的效果。

three.js是基于WebGL的开源图形库，里面提供了大量的WebGL的图形函数，直接使用three.js可更快的开发一个web3D项目。

Web3D又称网络三维，是一种在虚拟现实技术的基础上，将现实世界中有形的物品，通过互联网进行虚拟的三维应用展示，并可互动浏览操作的一种虚拟现实基础。

3Dview框架是基于three.js图形库，实现的3D文件加载，360度浏览、平移、爆炸、刨切、批注、文件树、动画等功能的一个浏览控件。

3Dview的基本架构：

用户服务器端后台 viewer加载

上传ics、obj等三维渲染模型文件服务器自动转换为web可加载格式加载文件，并实现浏览各种功能

three.js学习：

1.三大组建，

场景（scene）、相机（camera）、渲染器（renderer）

关键句：有了这三样东西，我们才能够使用相机讲场景渲染到网页上去。

2、画线条与画平面

如果不报错但没有效果的时候，注意新版本有的地方的方法是写法是不一样的。

比如：

1.THREE.LinePieces 换成 THREE.LineSegments

2.camera.lookAt(0, 0, 0)的写法

这时候可以参考https://threejs.org/docs/#api 参考最新的api文档的定义。

<script src="three.js-dev/build/three.js"></script>

 <script>
        //渲染器
        var renderer;
        function initThree() {
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias : true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF, 1.0);
        }
       //相机
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.x = 0;
            camera.position.y = 1000;
            camera.position.z = 0;
            camera.up.x = 0;
            camera.up.y = 0;
            camera.up.z = 1;
            camera.lookAt(0,0,0);
        }
        //场景
        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }
         //光
        var light;
        function initLight() {
            light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
            light.position.set(100, 100, 200);
            scene.add(light);
        }
 //立方体
        var cube;
        //初始化 画线条
//        function initObject() {
//           //声明一个几何体geometry vertices变量用来存放点
//            var geometry = new THREE.Geometry();
//            var material = new THREE.LineBasicMaterial( {  vertexColors: THREE.VertexColors } );
//            var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
//
//            // 线的材质可以由2点的颜色决定
//           // vertor3D表示3D世界的点,点有THREE.Vector3表示，必须被放到THREE.Geometry
//            var p1 = new THREE.Vector3( -100, 0, 100 );
//            var p2 = new THREE.Vector3(  100, 0, -100 );
//            geometry.vertices.push(p1);
//            geometry.vertices.push(p2);
//            geometry.colors.push( color1, color2 );
//           //定义线条
//            var line = new THREE.Line( geometry, material, THREE.LineSegments );
//            scene.add(line);
//        }
        //初始化 画平面
        function initObject() {
            var geometry = new THREE.Geometry();
            geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
            geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

            for ( var i = 0; i <= 20; i ++ ) {

                var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                line.position.z = ( i * 50 ) - 500;
                scene.add( line );

                var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                line.position.x = ( i * 50 ) - 500;
                line.rotation.y = 90 * Math.PI / 180;
                scene.add( line );

            }
        }

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene, camera);
        }

    </script>

3、让场景动起来：与静态区别加了requestAnimationFrame（animation）函数,传递callback参数。 camera.position.x =camera.position.x +1;相机向右移动

第一种相机动
//物体设置

var mesh;
function initObject() {
    var geometry = new THREE.CylinderGeometry( 100,150,400);
    var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
    mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);
    scene.add(mesh);
}

function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    animation();
}

function animation()
{
    //renderer.clear();
    camera.position.x =camera.position.x +1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
}

　　第二种物体动

 function animation()
       {
           mesh.position.x -=1;
            renderer.render(scene, camera);
          requestAnimationFrame(animation);
      }

4、性能

FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。点击上面的图，就会变成下面的另一个视图。参数0

MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。参数1

关键代码

添加<script src="three.js-dev/examples/js/libs/stats.min.js"></script>

 var stats;
在定义渲染器renderer的initThree函数里添加
 //性能
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.getElementById('canvas-frame').appendChild(stats.domElement);

转载于:https://www.cnblogs.com/colorful-paopao1/p/8250881.html