这里介绍一篇翻译的文章， 写的非常好， 大家可以去看看WebGL的用法.
http://www.hiwebgl.com/?p=1058
这里写个小例子让大家对Three.js的WebGL用法的初步了解。
Three.js中最重要是
Camera（镜头），
Scene（场景），
Mesh（网格元素）。说白了镜头就是人的眼睛。把镜头和元素添加到场景进行渲染制作一个3D场景，入门非常简单。
大家可以到我的博客看下3D地球的制作。
http://www.guanrl.com/article?id=267
例子：
<!doctype html>
<html style="margin:0px;padding:0px;" lang="en">
<head>
<title>three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body style="margin:0px;padding:0px;">
<div id="container" ></div>
<script src="http://www.natural-science.or.jp/javascript/Three/Three.js"></script>
<script>
(function(){
var container;
var camera, scene, renderer;
var mesh;
(function(){
var w=700,h=700;
container = document.getElementById( 'container' );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 60, w / h, 1, 10000 );
camera.position.z = 200;
//renderer = new THREE.CanvasRenderer();
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( w, h );
container.appendChild( renderer.domElement );
})();
//球形
(function initPlane(){
//var texture1 = new THREE.ImageUtils.loadTexture('textures/land_ocean_ice_cloud_2048.jpg');
mesh = new THREE.Mesh(
new THREE.SphereGeometry(20,20,20),
new THREE.MeshLambertMaterial({color: 0xff0000})
);
scene.add(mesh);
})();
var moon;
//月球
(function initMoon(){
//var texture1 = new THREE.ImageUtils.loadTexture('textures/moon_1024.jpg');
moon = new THREE.Mesh(
new THREE.SphereGeometry(10,20,20),
new THREE.MeshLambertMaterial({color: 0xff0000})
);
moon.position.set(-50,0,0);
scene.add(moon);
})();
//方盒
(function initCube(){
var plane = new THREE.Mesh(new THREE.CubeGeometry(30, 30, 30), new THREE.MeshLambertMaterial({
color: 0xff0000
}));
plane.position.x = 50;
plane.position.z = 0;
scene.add(plane);
})();
//灯光
(function initLight(){
var light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
light.position.set( -100, 0, 500 );
scene.add(light);
})();
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.clear();
/* mesh.rotation.y -= 0.001;
moon.position.set( 70*Math.sin(t/200) , 0 ,70*Math.cos(t/200)); */
renderer.render( scene, camera );
}
animate();
})();
</script>
</body>
</html>
分享到：
相关推荐
1. `<canvas>`元素：这是一个可编程的画布，允许开发者通过JavaScript动态绘制2D和3D图形，是制作游戏的基础。 2. `<audio>`和`<video>`元素：提供了内置的音频和视频支持，使得游戏可以包含丰富的多媒体元素。 3. ...
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的浏览器中进行硬件加速的3D图形渲染。这个技术的引入，极大地扩展了Web开发者的创作空间，使得动态、互动的3D内容可以在不需要插件的情况下直接在浏览器...
WebGL是基于OpenGL标准的一个JavaScript API，它使得浏览器可以直接在网页上渲染高质量的3D图形，无需任何插件。这个技术的强大之处在于，它允许开发者在浏览器环境中创建交互式的、三维的图形内容，为用户带来更加...
这个"HTML5 WebGL实现超逼真的天气预报网页雷雨动效源码.zip"文件，显然包含了一个利用WebGL技术制作的天气预报网页特效，尤其是雷雨效果的实现。 首先，我们要理解HTML5的结构和语义化元素。HTML5引入了许多新的...
在本项目"html5_3d_webgl_多个旋转地球materials"中，我们关注的是HTML5的一个强大特性——WebGL，这是一种用于在浏览器中实现3D图形的API。WebGL基于OpenGL标准，允许开发者在无需任何插件的情况下在网页上呈现复杂...
1. **WebGL基础**：WebGL是基于OpenGL ES 2.0的JavaScript API，用于在HTML5的`<canvas>`元素中绘制交互式3D图形。它使用着色器语言（GLSL）编写顶点和片段着色器，这些着色器负责计算每个像素的颜色和位置。 2. **...
WebGL是一种在网页上实现3D图形渲染的技术，它基于OpenGL标准，并且是Web浏览器的内置部分，无需任何插件支持。在这个项目中，“漂亮的WebGL背景图形动画特效”利用了WebGL的强大功能，为用户提供了一种引人入胜的...
2. **HTML5 3D图形**：TWaver的3D功能基于HTML5，利用WebGL技术实现在浏览器中渲染3D图形，无需安装额外插件。这使得它在现代Web应用中具有广泛的应用前景。 3. **JavaScript编程**：TWaver库是用JavaScript编写，...
这个"HTML5+WebGL制作的超逼真草原（草地）实时渲染场景动画源码"是一个示例项目，展示了如何利用这两个技术来创建互动且逼真的3D场景。 在HTML5中，`<canvas>`元素扮演了重要角色，它是图形绘制的画布，允许...
WebGL（Web Graphics Library）是基于OpenGL标准的一个JavaScript API，它允许在浏览器中进行硬件加速的3D图形渲染，无需任何插件。WebGL的强大之处在于，它可以将复杂的3D模型、光照、纹理等直接引入到网页中，为...
WebGL是一种基于OpenGL标准的JavaScript API，它允许在任何兼容的现代浏览器中实现硬件加速的3D图形渲染，无需任何插件。本教程将详细讲解如何使用Unity3D将项目导出为WebGL格式，以便在网页上运行。 1. **Unity3D...
在这个“HTML5制作3D樱花漫天飞舞”的项目中，开发者利用HTML5的特性，结合JavaScript库如jQuery，创造出一个浪漫的3D樱花飘落的视觉效果。 首先，我们要了解HTML5的基础结构，它通常包含`<!DOCTYPE html>`声明、`...
本项目“HTML5制作的3D特效”展示了一个利用HTML5技术实现的3D雪景特效，这是一场视觉盛宴，充满了美丽和魔幻的元素。 在HTML5中，实现3D特效主要依赖于以下两个关键技术： 1. **Canvas API**：Canvas是HTML5中的...
总的来说，这个项目可能是一个教程或实例，教授用户如何利用HTML5的canvas和Three.js库创建引人入胜的3D背景动画，提高网页的用户体验和视觉冲击力。学习这个项目，开发者不仅可以掌握HTML5和Three.js的基本概念，还...
WebGL（Web Graphics Library）是HTML5的一个重要组成部分，它是一种基于OpenGL标准的JavaScript API，允许在浏览器中进行3D图形渲染，无需任何插件。这使得Web开发者可以直接在网页上创建交互式的3D场景，极大地...
它利用了HTML5的Canvas元素和WebGL图形接口，为开发者提供了丰富的功能和高效的性能，使他们能够在网页上创建复杂的3D场景和交互式体验。 Babylon.js的核心特性包括： 1. **渲染引擎**：Babylon.js内置了一个高级...
本项目"HTML5制作3D樱花漫天飞舞"是利用HTML5的特性来实现一个视觉效果惊艳的3D樱花飘落场景。这个项目主要涉及以下HTML5相关知识点： 1. **Canvas API**：HTML5的Canvas是一个基于矢量图形的画布，通过JavaScript...
4. **WebGL**：WebGL是一种基于OpenGL标准的JavaScript API，用于在浏览器中进行3D图形渲染，无需插件。在本项目中，WebGL可能是实现3D效果的底层技术，允许在canvas上绘制和操作3D对象。 5. **响应式设计**：考虑...
在这个"HTML5制作的一些云朵效果"项目中，开发者利用HTML5、CSS3和JavaScript技术创造了一个互动的云朵飘动效果。这个效果使得网页背景更加生动，用户在移动鼠标时可以感受到云朵随着鼠标的移动方向改变其漂浮轨迹，...
此外，可能还使用了WebGL，这是一个HTML5的扩展，可以直接在浏览器中进行3D图形渲染。WebGL基于OpenGL标准，能直接与GPU交互，处理复杂的3D几何形状和光照效果，为3D相册带来了更逼真的视觉体验。 在JavaScript方面...