什么是WebGL

WebGL（Web Graphics Library）是基于OpenGL ES2.0的Web标准。
可以为HTNL5的Canvas元素提供硬件3D加速渲染。

什么是three.js

一种3D JavaScript库。

基本要素

(1) 渲染器(Render)
(2) 场景(Scene)
(3) 照相机(Camera)

渲染器

绑定方法

和已有的Canvas元素绑定

1
2
3
var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas');
});

Three.js自动生成Canvas元素

1
2
3
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400,300); // 设置Canvas的宽高
document.getElementsByTagName('body')[0].appendChild(render.domElement); // 将Canvas添加到<body>中

相关方法

1
2
// 设置背景色
renderer.setClearColor(0x000000);

场景

1
2
// 初始化场景
var scene = new THREE.Scene();

照相机

  • 坐标

    Three.js使用的是右手坐标系

    Three.js坐标系

    1
    2
    camera.position.set(0,0,5);
    scene.add(camera);

物体

  • 几何形状（Geometry）
  • 材质(Material)

渲染

1
renderer.render(scene,camera);