前端基础知识之webGL篇

Three.js

什么是threejs？
- 将它理解成three + js。three表示3D，js表示javascript，即用javascript 来写3D程序。Javascript是运行在网页端的脚本语言，那么毫无疑问Three.js也是运行在浏览器上的。
在Three.js中，要渲染物体到网页中，需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
- scene（场景）：在Threejs中场景就只有一种，用THREE.Scene来表示，要构件一个场景也很简单，只要new一个对象就可以了，代码如下：var scene = new THREE.Scene()。场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中。
- camera（相机）：相机决定了场景中哪个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。
- renderer（渲染器）：渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。
场景，相机，渲染器之间的关系
- Three.js中的场景是一个物体的容器，开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。
- 相机的作用就是面对场景，在场景中取一个合适的景，把它拍下来。
- 渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。

var scene = new THREE.Scene(); // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild(renderer.domElement);

zptime / blog

前端基础知识之webGL篇 #25

Three.js