欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

three.js初入门二

程序员文章站 2022-07-07 18:13:39
...

        在上一章节中,有简单的提到了three.js中的三大组件以及利用three.js怎么渲染到网页上的步骤,在这里没有对什么是webgl以及three.js进行讲解,如果对于这两概念不清楚的,烦请自行度娘;

        下面将贴出前一文章中的各个步骤的核心代码;

         1:创建场景(scene):

                var  scene=new THREE.Scene();      //通过调用THREE.JS的Scene()方法创建一个场景;

         2:创建相机(camera):

                var  camera=new THREE.PerspectiveCamera(45,width/height,1,1000);     //创建一个相机

                 camera.position.set(x,y,z);    //设置相机在空间中的位置;

                 参数详解:

                  fov:相机视椎体垂直角度;aspect相机视椎体宽高比;near:相机视椎体近裁剪面;

                  far:相机视椎体远裁剪面;

         3:创建渲染器(renderer);

                var  renderer=new THREE.WebGLRenderer(parametres);

                 renderer.setSize(width,height); //用于设置画布的大小,如果没有设置该值的话,渲染出来的画布大小将是canvas默认的大小,即width=300,height=150;

                 document.body.appendChild(renderer.domElement);//用于确定渲染器挂载到网页中的那个节点中;

                参数详解: parametres是一个可选的对象,在这里提一下,parametres这个对象中,有个antialias属性,该属性的作用是:是否开启反锯齿,所以该属性是一个boolean类型,默认值为false,建议一般将该值设置为true(自己一开始学习的时候,对于各个参数了解的不深,所以导致一开始没有设置该值,所以在做出来的效果中,页面会出现各种锯齿,导致页面很难看,这也算在学习过程中踩的一个坑吧three.js初入门二
            
    
    博客分类: 三维可视化 three.js );

        4:最后使用渲染器的render方法将场景渲染到页面中:

               renderer.render(scene,camera);

        5:在调用渲染器的渲染方法进行渲染的时候,为了使得画面能够一直渲染进去,需要不断的调用渲染器的方法;所以对于第四步骤,可以写成如下所示:

              funciton  loop(){

                   renderer.render(scene,camera);

                   requestAnimationFrame(loop)

              }

         在这里使用h5的requestAnimationFrame()方法来定时刷新loop方法,requestAnimationFrame与传统的setInterval方法类似,不过它们之间还是存在一些区别的,关于它们之间的区别,这里就不详说了,有疑问的可以自行百度。

                  

相关标签: three.js