three.js学习笔记 基础1_1

 1. 一个three.js程序要包括 renderer(渲染器)、scene(场景) 和camera(相机)。

1.1 renderer(渲染器)

three.js渲染器主要用到的有两种

var render = new THREE.WebGLRenderer({ antialias: true } );
var render = new THREE.CanvasRenderer();

  

CanvasRenderer相较于WebGLRenderer渲染能力差一些，但是没有锯齿。所以一般常用到的WebGLRenderer会添加一个抗锯齿属性 { antialias: true }

 常用到的函数包括：setClearColor()设置renderer的背景色 

                 setSize()设置renderer渲染scene的尺寸。

renderer.setClearColor(0xffffff);
renderer.setSize( window.innerWidth, window.innerHeight );

1.2 scene(场景)

three.js场景相当于一个容器，用来保存我们想渲染的物体。

var scene = new THREE.Scene();

1.3camera(相机)

three.js相机有两种

var camera = new THREE.PerspectiveCamera(45, 4/3, 0.1, 1000);
var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 1000);

 PerspectiveCamera(fov,aspect,near,far) 透视相机

 fov  :视角。从相机能看到的部分场景。对于游戏来讲大概有60到90度左右的视场。推荐默认值：45

 aspect:长宽比。渲染结果的横向长度和纵向长度比。推荐默认值：window.innerWidth/window.innerHeight

 near ：相机开始看到的渲染距离。推荐默认值:0.1

 far :相机最远可以看到的渲染距离。推荐默认值：1000

 OrthographicCamera(left,right,top,bottom,near,far) 正投影相机

 left  ：相机可以看到渲染的左平面。

 right ：相机可以看到渲染的右平面。

 top  ：相机可以看到渲染的上平面。

 bottom：相机可以看到渲染的下平面。

 naer  :同上PerspectiveCamera

 far  :同上PerspectiveCamera

camera 常用到的函数包括：lookAt()设置相机所看的位置

<span style="font-family:Courier New;">camera.lookAt(new THREE.Vector3(10,10,10));</span>

fork me on github blog: https://chenjy1225.github.io/