three.js初入门二
在上一章节中,有简单的提到了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(自己一开始学习的时候,对于各个参数了解的不深,所以导致一开始没有设置该值,所以在做出来的效果中,页面会出现各种锯齿,导致页面很难看,这也算在学习过程中踩的一个坑吧);
4:最后使用渲染器的render方法将场景渲染到页面中:
renderer.render(scene,camera);
5:在调用渲染器的渲染方法进行渲染的时候,为了使得画面能够一直渲染进去,需要不断的调用渲染器的方法;所以对于第四步骤,可以写成如下所示:
funciton loop(){
renderer.render(scene,camera);
requestAnimationFrame(loop)
}
在这里使用h5的requestAnimationFrame()方法来定时刷新loop方法,requestAnimationFrame与传统的setInterval方法类似,不过它们之间还是存在一些区别的,关于它们之间的区别,这里就不详说了,有疑问的可以自行百度。
上一篇: 某个大牛的技术博客
下一篇: HTML实现页面自动跳的方法