神说：“要有光”，就有了光。
Three.js内置了多种光源可以直接调用：
- AmbientLight（环境光）
- AreaLight（区域光）
- DirectionalLight（平行光）
- HemisphereLight（半球光）
- PointLight（点光源）
- SpotLight（聚光灯）
首先我们设置好基础的环境：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个WebGL程序</title>
<style>body { margin: 0; overflow: hidden; }; canvas { width: 100%; height: 100%; }</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
//创建场景
var scene = new THREE.Scene();
//创建摄影机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(100, 100, 100);
camera.lookAt(scene.position);
//创建绿色立方体
var box = new THREE.Mesh(
new THREE.CubeGeometry(5, 5, 40),
new THREE.MeshLambertMaterial({
color: 0x00ff00
}));
box.position.set(10, 20, 10);
scene.add(box);
//创建红色地面
var ground = new THREE.Mesh(
new THREE.CubeGeometry(100, 1, 100),
new THREE.MeshLambertMaterial({
color: 0xff0000,
}));
ground.position.set(0, 5, 0);
ground.receiveShadow = true;
scene.add(ground);
//创建渲染器并把设置背景为蓝色
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColorHex(0x0000ff, 1);
document.body.appendChild(renderer.domElement);
//渲染画面
renderer.render(scene, camera);
</script>
</body>
</html>
现在运行页面，我们只能看到蓝色的背景和一块黑色的几何体，因为我们还没有加入灯光，所以一切的物体都是黑色的。立方体和地面的材质均为MeshLambertMaterial（类似纸张，可以均匀反射接收到的光线）。
AmbientLight（环境光）
环境光是一种无处不在的光，就好像现实世界中的空气。环境光的光线来自任何方向，因此，当你仅为场景指定环境光时，所有的物体无论向量如何，都将表现为同样的明暗程度。
环境光的构造函数THREE.AmbientLight只有一个参数——16进制的颜色值。
AmbientLight( hex )
var light = new THREE.AmbientLight(0xff0000);
scene.add( light );
给场景添加红色的环境光后，立方体和地面都显示为红色：
DirectionalLight（平行光）
平行光是一组具有方向的没有衰减的平行光线，它类似太阳光：虽然遥远但打在物体上的光都来自同一个方向。
环境光的构造函数THREE.DirectionalLight有两个参数——16进制的颜色值和光线的强度（默认为1）。
DirectionalLight(hex, intensity)
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(100, 150, 50);
scene.add(light);
我们在右上方定义了一个强度为50%的平行光，方向为右上角到原点，所以立方体和地面都暗暗的显示出了原本的颜色。
PointLight（点光源）
点光源的光线来自同一点，并向外发射。就好像蜡烛发出的光和萤火虫发出的光。
点光源的构造函数THREE. PointLight有三个参数，比平行光多了一个距离参数，光会从光源经过distance的距离一路衰减为0。
PointLight(hex, intensity, distance)
var light = new THREE.PointLight(0xffffff, 1, 300);
light.position.set(50, 50, 50);
scene.add(light);
以上是几个比较常用的光源，看过4个示例后，有没有发现有点不对劲？怎么没有阴影？
投影
Three.js的光源默认不会导致物体间的投影，打开投影需要执行以下几步：
打开渲染器的地图阴影: renderer.shadowMapEnabled = true;
启用光线的投影：light.castShadow = true;
把模型设置为生成投影：mesh.castShadow = true;
把模型设置为接收阴影：mesh.receiveShadow= true;
完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个WebGL程序</title>
<style>body { margin: 0; overflow: hidden; }; canvas { width: 100%; height: 100%; }</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
//创建场景
var scene = new THREE.Scene();
//创建摄影机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(300, 300, 300);
//创建绿色立方体
var box = new THREE.Mesh(
new THREE.CubeGeometry(5, 5, 40),
new THREE.MeshLambertMaterial({
color: 0x00ff00
}));
box.position.set(0, 15, 0);
box.castShadow = true;
scene.add(box);
//创建红色地面
var ground = new THREE.Mesh(
new THREE.CubeGeometry(200, 1, 200),
new THREE.MeshLambertMaterial({
color: 0xff0000,
}));
ground.receiveShadow = true;
scene.add(ground);
//创建渲染器并把设置背景为蓝色
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0000ff);
renderer.shadowMapEnabled = true;
document.body.appendChild(renderer.domElement);
//添加聚光灯
var light = new THREE.SpotLight( 0xffffff, 3 );
light.position.set( 100, 200, 50 );
light.castShadow = true;
light.shadowCameraNear = 50;
light.shadowCameraFar = 300;
light.shadowCameraFov = 30;
scene.add( light );
//渲染画面
var render = function() {
requestAnimationFrame(render);
box.rotation.y += 0.01;
ground.rotation.y += 0.01;
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
相关推荐
这个“WebGL入门指南源代码”包含了《WebGL编程指南》一书中的实践示例，旨在帮助读者深入理解WebGL的基础概念和技术。 在学习WebGL时，首先要了解的是它如何在HTML5的Canvas元素上工作。通过JavaScript调用WebGL...
WebGL入门阶段通常涉及绘制简单的几何形状，如三角形和矩形，以及理解如何使用顶点数据和图元类型（如POINTS、LINES、TRIANGLES等）来构建场景。学习者还将接触到着色语言GLSL（OpenGL Shading Language），这是编写...
4. **示例和教程**：可能包含一系列入门级别的示例项目，通过实际代码解释基本概念和技术，帮助新用户理解 WebGL 的工作原理。 5. **社区共享**：用户可能可以分享他们的作品和代码，促进学习和交流，构建一个互动...
关于光照和材质，WebGL提供了多种光源类型，如点光源、方向光和聚光灯，以及不同的材质属性，如颜色、镜面反射、漫反射和环境光。通过调整这些参数，我们可以改变3D物体的外观，模拟真实世界中的光照效果。 WebGL的...
### WebGL入门知识点详解 #### 一、WebGL简介与应用领域 WebGL是一种用于渲染交互式3D图形的标准，无需任何插件即可在任何兼容的Web浏览器中运行。它基于OpenGL ES 2.0规范的一个子集，并为HTML5 Canvas提供了低级...
第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件（HelloCanvas.html） 16 JavaScript 程序（HelloCanvas.js） 17 用示例程序...
第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件（HelloCanvas.html） 16 JavaScript 程序（HelloCanvas.js） 17 用示例程序...
第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件（HelloCanvas.html） 16 JavaScript 程序（HelloCanvas.js） 17 用示例程序...
第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件（HelloCanvas.html） 16 JavaScript 程序（HelloCanvas.js） 17 用示例程序...
### WebGL: Up and Running — 入门指南 #### 核心知识点概览： - **WebGL 技术定义** - **3D图形学基础知识** - 三维坐标系统 - 网格、多边形与顶点 - 材质、纹理与光照 - 变换与矩阵 - 摄像机、透视、视口...
这本书《WebGL编程指南》显然是为了帮助读者从入门到精通，掌握WebGL的核心技术和实际应用。 首先，我们要理解WebGL的基本概念。WebGL是基于OpenGL ES 2.0的一个JavaScript绑定，它在Web浏览器的安全沙箱环境中运行...
总结起来，《WebGL: Up and Running》是一本面向熟悉JavaScript的Web开发者的入门级书籍，它覆盖了WebGL的基础知识和核心概念，并通过实际案例教授如何在Web项目中有效地使用WebGL。这本书为希望将3D图形集成到Web...
WebGL应用程序的结构通常包含初始化WebGL上下文、配置视图、加载资源、编写着色器程序、设置顶点数据缓冲区、设置光源和材质属性以及绘制调用等步骤。 WebGL的3D渲染流程则通常涉及以下几个步骤： 1. 创建一个...
1. three.js快速入门-新手上路 2. 顶点概念、几何体结构 3. 材质对象 4. 点线面模型对象 5. 光源对象 6. 层级模型、树结构 7. 几何体对象、曲线、三维建模 8. 纹理贴图 9. 相机对象(投影方式) 10. 精灵模型、粒子...
- 掌握不同类型的光源（如Directional Light、Point Light和Spot Light）以及它们对场景的影响。 - 学习材质和着色器，理解渲染管线和光照模型。 8. **摄像机与UI**： - 设置主摄像机以捕捉游戏视图，学习摄像机...
在本毕设项目中，学生将深入探讨和应用Three.js和WebGL这两种强大的技术，以创建引人入胜的3D交互式体验。Three.js是一个基于WebGL的JavaScript库，它简化了在浏览器中创建3D图形的过程。而WebGL是一项标准，允许在...