WebGL之ThreeJS学习之旅01

来源：互联网发布：后期软件油画质感编辑：程序博客网时间：2024/04/26 21:33

本科的最后一年，毕业设计老师让用WebGL中的threeJs来完成，故此记录，共同学习。

我们知道，在html5出现前的时代，在网页端显示3D效果一般采取的是OpenGL 2.0已经3.0的版本。而在Html5出来之后，由其天然的丰富的特性，产生了一种新的对3D图形进行显示的工具-WebGL。

WebGL是一种JS和Opengl ES 相结合的产物，通过WebGL，你可以直接使用显卡的计算资源，创建高性能的三维计算机图形，然后再JS中直接使用WebGL进行编程，创建出三维场景。但是webGL相对比较复杂，你需要学习比如着色器之类的复杂算法，而ThreeJS这个库则是帮我们简化这个过程，它里面封装好了一些我们需要使用到的API等，非常方便。

好的，那我们正是开始对ThreeJS的学习，推荐学习网站http://threejs.org/，同时为了使用ThreeJS，你应该去github上下载这个文件：https://github.com/mrdoob/three.js/

下载好解压之后应该是形如这样：

Build目录：包含three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件，主要引用的文件。

Docs目录：hree.js的帮助文档，里面是各个函数的api。

Editor目录：一个类似3D-max的简单编辑程序，它能创建一些三维物体。

Examples目录：一些例子demo，不建议直接仿照，除非你的图形学很好。

Src目录：源代码目录，里面是所有源代码。

Test目录：一些测试代码。

在环境方面，有多种选择，不过我推荐WebStrom，这个工具比较强大，很方便，你也可以使用诸如Notepad++等等，这里你需要的只是一个JavaScript的编辑器。

第一天我们开始做一些简单的程序，这里我们先简单的绘制一个会转动的三维的立方体。

效果图如下：

讲解一下使用ThreeJS主要步骤：

ThreeJS由三大组件构成：scene、camera和renderer。

只有同时具备这三者，我们才可以用camera将scene进行renderer，然后展现在网页中。

刚才的立方体的源代码：

<head>    <meta charset="UTF-8">    <title>cube</title>    <style>canvas { width: 100%; height: 100% }</style>    <script src="./js/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>

<script src="./js/three.js"></script>

这个表示引入three.js这个文件

var scene = new THREE.Scene();

初始化一个scene

var camera = new THREE.PerspectiveCamera（）；

初始化一个camera

var renderer = new THREE.WebGLRenderer();

初始化一个renderer

初始化完成后

scene.add(cube);

cube是我们创建的一个三维物体，将它加入到scene中。

最后，执行渲染：

render();

需要注意的是，我们是先写好了一个function的，还有requestAnimationFrame

这个是JS里面的一个方法，用于执行循环

最后，便可以查看到一个三维的立方体在网页显示的效果了。

0 0