Three.js入门(一)

谈论three.js之前我们需要了解一下WebGL...先自问自答一下

1:什么是WebGL ?

webGL是基于OpenGL es 2.0 的web标准,可以通过html5 canvas元素作为dom访问接口。

2:WebGL可以做什么?

现在大部分浏览器都实现了WebGL。它不仅可以创建二维图形和应用,还可以利用CPU,来创建漂亮的、高效的三维应用。

3:那什么是Three.js?

Three.js封装了底层的图形接口,提供了基于WebGL的非常易用的JavaScript API。且简化WebGL的开发。

一个典型的Three.js程序至少包括 渲染器场景照相机以及场景中创建的物体。如下所示:

 //渲染器
var renderer = new THREE.WebGLRenderer({
    canvas:document.getElementById('myCanvas')
});
renderer.setClearColor(0x000000);

//场景
var scene = new THREE.Scene();

//照相机
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

//物体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
    new THREE.MeshBasicMaterial({
        color: 0xff0000
    })
);
scene.add(cube);

//渲染
renderer.render(scene,camera);

第一部分:相机

1.1什么是照相机?
他定义了三维空间到二维空间屏幕的投影方式。

Three.js中有两种不同的相机。正交投影相机透视投影相机

th1.png

透视投影(a):近大远小效果
正交投影(b):在三维空间内平行的线,在二维空间也一定是平行的。

(1)正交投影相机
    //设置正交投影相机
    THREE.OrthographicCamera(left, right, top, bottom, near, far)
th2.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文主要是讲解 Three.js 的相关概念,帮助大家对 Three.js 以及相关知识形成比较完整的理解。今年来...
    Simon王小白阅读 8,552评论 2 9
  • 1、准备开发环境 2、创建一个场景 在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)...
    简聆壹阅读 7,101评论 0 5
  • 在开始谈 WebVR 前,我们先来看看人眼中的三维立体是如何产生的。 外部世界是三维立体的,但是它在我们的视网膜上...
    点融黑帮阅读 11,138评论 4 6
  • 今天的主题是three.js中用于观察三维空间的摄像机。 1.认识camera 图形学中的摄像机定义了三维空间到二...
    sakatayui酱阅读 5,947评论 0 1
  • 阿玥, 坚持运动会变成一种习惯,感冒一星期,就跑了2次。昨天晚上你写作业,妈妈等到公园连跑带走了三圈。 既然你坚持...
    芳草如茵茵阅读 127评论 1 1