three.js 第二篇:场景 相机 渲染器 物体之间的关系

Posted 大米

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了three.js 第二篇:场景 相机 渲染器 物体之间的关系相关的知识,希望对你有一定的参考价值。

w我用画画来形容他们之间的关系

场景就是纸张

相机就是我们的眼睛

物体就是在我们脑海中构思的那个画面

渲染器就是绘画这个动作

 

场景(Scene):

  初始化:var scene = new THREE.Scene();

  添加物体:scene.add( 物体对象 );

  删除物体:scene.remove( 物体对象 );

  获取场景中所有子对象的列表:scene.children()

  利用name属性,获取场景中某个特定的物体:scene.getChildByName()    

  简单雾化:scene.fog = new THREE.Fog(0xffffff,100,120);//颜色 雾化开始的时候距离相机的位置,完全雾化距离相机的位置

  直属雾化:scene.fog = new THREE.FogExp2(0xffffff,0.02);//颜色,雾的浓度

 

相机(只介绍透视投影):

  初始化:

    var camera = THREE.PerspectiveCamera(fov, aspect, near, far);

      //fov就是我们眼睛可以看多大范围的物体,苍蝇眼睛可以看到后面,对于苍蝇来说fov基本上就是360了,我们人类差不多是120

      //aspect 照相机水平方向和竖直方向长度

      //near far:我是近视,基本上50米开外我就什么也看不到了(就是看不到,不是看不清),我是远视,1米之内 我也看不到(不是看不清,是看不到 纯黑的那种),所以我的可视范围是1米到50米,把1和50设置为near far,就相当于这个功能

  设置相机位置:

    camera.position.z = 5;camera.position.x = 5;camera.position.y = 5;

      //我们可以把摄像机摆放在任何位置 理论上

  设置相机的拍摄方向:

    camera.lookAt(new THREE.Vector3(0, 0, 0));

      //我可以向左前方看,可以向右前方看,我们看的方向是一条直线,更确切的说是一个向量,所以lookAt的参数是一个向量

  设置相机的顶部朝向:

    camera.up.x = 0;
    camera.up.y = 0;
    camera.up.z = 1;

      //我们平常用手机拍照的时候,如果你把手机倒过来排,也就是让手机的头部向下来拍照,我们就说你设置了手机相机的顶部朝向为向下,理论上我们可以设置任意一个方向为手机相机的顶部所指向的方向

 

渲染器:

  three.js提供很多中渲染器:CanvasRenderer,DOMRenderer,SVGRenderer,WebGLRenderer,WebGLRenderTarget,WebGLRenderTargetCube,WebGLShaders

    //CanvasRenderer以canva方式渲染,

    //SVGRenderer以svg方式渲染,

    //WebGLRenderer则是以webGL方式渲染,(三种方式的区别相当于,我们可以用canvas实现绘图,也可以用svg实现绘图,您说 canvas绘图与svg绘图之间的区别是什么?)

    //WebGLRenderTarget是特有的表示渲染到其他物体上 而不是屏幕上

  WebGLRenderTarget的具体用途:

    renderer.render(bufferScene, camera, bufferTexture);//把bufferTexture以camera的视角渲染到bufferScene上,因为我们没有渲染到屏幕上,所以我们什么也看不到,那我们如何用他呢,

    var boxMaterial = new THREE.MeshBasicMaterial({map:bufferTexture});//我们可以把bufferTexture当作一个纹理然后覆盖在A物体上,当A物体被放到屏幕上,我们自然可以看到bufferTexture(MeshBasicMaterial以后会做介绍)

    WebGLRenderTargetCube:???我目前也不清楚

    WebGLShaders:???我目前也不清楚

  WebGLRenderer初始化参数: 

    antialias:true, //是否开启反锯齿 --true/false
    precision:"highp", //着色精度选择 --highp/mediump/lowp
    alpha:true, //是否可以设置背景色透明 --true/false
    premultipliedAlpha:false, //http://blog.csdn.net/mydreamremindme/article/details/50817294
    stencil:false, //http://blog.csdn.net/a923164250/article/details/40393905
    preserveDrawingBuffer:true, //是否保存绘图缓冲 --若设为true,则可以提取canvas绘图的缓冲
    maxLights:1 //maxLights:最大灯光数--num

  设置渲染大小:renderer.setSize(width,height)

  追加生成的canvas元素到容器元素中:document.body.appendChild( renderer.domElement );

  设置canvas背景色(clearColor)和背景色透明度(clearAlpha):renderer.setClearColor(clearColor,clearAlpha);

  物体留到下节说










以上是关于three.js 第二篇:场景 相机 渲染器 物体之间的关系的主要内容,如果未能解决你的问题,请参考以下文章

webGL学习笔记一

Three.js学习总结

Three.js 实现VR看房

three.js 相关概念

使用vue学习three.js之渲染后期处理-使用UnrealBloomPass通道在场景中添加泛光效果,三维物体表面发光效果

三.js 移动物体时的相机、物体和场景原点