您的位置：首页 > Web前端 > JavaScript

WebGL之ThreeJS学习之旅01

2015-10-24 18:54 726 查看

本科的最后一年，毕业设计老师让用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里面的一个方法，用于执行循环

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webgl threejs javascript github 3d

相关文章推荐

新的分享

章节导航