webGL学习笔记一

一直对WEBGL感兴趣，终于提起精神学习了，前路漫漫啊~

来源：WEBGL中文网 http://www.hewebgl.com

1、三大组建

在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。

记住关建语句：有了这三样东西，我们才能够使用相机将场景渲染到网页上去。

2、相机

另一个组建是相机，相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。

场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。

3、渲染器

最后一步就是设置渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。

4、添加物体到场景中

5、渲染

6、渲染循环

实例一，初探：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>初探</title><style>canvas { width: 100%;height:100%}</style><script src="lib/three.js"></script>
</head>
<body><script>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);        //将物体添加到场景中var geometry = new THREE.CubeGeometry(1,1,1);var material = new THREE.MeshBasicMaterial({color: 0x00ff00});var cube = new THREE.Mesh(geometry, material); scene.add(cube);camera.position.z = 5;function render() {requestAnimationFrame(render);cube.rotation.x += 0.1;cube.rotation.y += 0.1;renderer.render(scene, camera);}render();</script></body>
</html>

转载于:https://www.cnblogs.com/xiaoluoli/p/6215538.html