前言
webGL可以理解为openGL ES2.0(webGL2.0 - openGL ES3.0)的javascript绑定。所以实现的语言是
javascript和opengl(最常用的跨平台图形库)着色语言,webgl是HTML5中提出的新技术,是一种3D绘图标准。
three.js是以webgl为基础的库,封装了一些3D渲染需求中重要的工具方法与渲染循环。WebGL门槛相对较
高,Three.js对WebGL提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本。
代码与效果展示
<!DOCTYPE html>
<html>
<head>
<title>Welcome to WebGL</title>
<link rel="stylesheet" href="../css/webglbook.css" />
<script src="../libs/Three.js"></script>
<script src="../libs/RequestAnimationFrame.js"></script>
<script>
var renderer = null,
scene = null,
camera = null,
cube = null,
animating = false;
function onLoad()
{
// Grab our container div
var container = document.getElementById("container");
// Create the Three.js renderer, add it to our div
renderer = new THREE.WebGLRenderer( {
antialias: true } );
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild( renderer.domElement );
// Create a new Three.js scene
scene = new THREE.Scene();
// Put in a camera
camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight,