three.js光源
在Threejs中，光源用Light表示，它是所有光源的基类。它的构造函数是：
THREE.Light ( hex )
它有一个参数hex，接受一个16进制的颜色值。例如要定义一种红色的光源，我们可以这样来定义：
Var redLight = new THREE.Light(0xFF0000);
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="libs/three.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.setClearColor(0x0000ff, 1);
document.body.appendChild(renderer.domElement);
//渲染画面
renderer.render(scene, camera);
</script>
</body>
</html>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABREAAAL7CAIAAADlGFUiAAAaxElEQVR4nO3XW27cSAAEQd//0t6PBYSF15aleTCLZCTiAGVOs2n9+PHjJwAAAPA7/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAACATf0CAAAA2NQvAAAAgE39AgAAANjULwAAAIBN/QIAAADY1C8AAF7oo3wJAFxAvwAAeN4n5dsA4Lz6BQDAM75YvhMAzqhfAAA84OHy5QBwIv0CAOBbXlL+rwCAU+gXAABf9PLyfxEAjOsX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AJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAJv6BQAAALCpXwAAAACb+gUAAACwqV8AAAAAm/oFAAAAsKlfAAAAAIv+ARFWuadpS38LAAAAAElFTkSuQmCC" alt="" />
现在运行页面，我们只能看到蓝色的背景和一块黑色的几何体，因为我们还没有加入灯光，所以一切的物体都是黑色的。立方体和地面的材质均为MeshLambertMaterial（类似纸张，可以均匀反射接收到的光线）。
<!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="libs/three.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>
aaarticlea/png;base64,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6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAADm6QsAAAAA5ukLAAAAAObpCwAAAACm+T9PRlfFZAyrKwAAAABJRU5ErkJggg==" alt="" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="libs/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
} </style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
} var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 600;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
} var scene;
function initScene() {
scene = new THREE.Scene();
} var light;
function initLight() {
} var cube;
function initObject() {
var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
var mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
} function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
} </script>
</head> <body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
aaarticlea/png;base64,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" alt="" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="libs/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
} </style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
} var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 600;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
} var scene;
function initScene() {
scene = new THREE.Scene();
} var light;
function initLight() {
// A start
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
// A end } var cube;
function initObject() {
var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
// B start
var material = new THREE.MeshLambertMaterial( { color:0x880000} );
// B end
var mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
} function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
} </script>
</head> <body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="libs/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
} </style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
} var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 600;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
} var scene;
function initScene() {
scene = new THREE.Scene();
} var light;
function initLight() {
// A start
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
// A end } var cube;
function initObject() {
var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
// B start
var material = new THREE.MeshLambertMaterial( { color:0x880000} );
// B end
var mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
} function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
} </script>
</head> <body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
aaarticlea/png;base64,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" alt="" />
three.js光源的更多相关文章
- 初探three.js光源
上一节我们简单的说了一下THREE中必要的元素.今天我们深入探讨一下各种THREE的光源. 一 基础光源 基础光源有4种1.THREE.AmbientLight(环境光源)2.THREE.PointL ...
- Three.js的光源投影
Three.js的光源默认不会导致物体间的投影,打开投影需要执行以下几步: 打开渲染器的地图阴影: renderer.shadowMapEnabled = true; 启用光线的投影:light.ca ...
- 深入理解three.js中光源
前言: Three.js 是一个封装了 WebGL 接口的非常好的库,简化了 WebGL 很多细节,降低了学习成本,是当前前端开发者完成3D绘图的得力工具,那么今天我就给大家详细讲解下 Three.j ...
- 深入理解three.js中平面光光源RectAreaLight
前言 之前有深入讲解过Three.js中光源,在那篇文章的最后也说了由于平面光光源的特殊性,所以会单独拿出来讲解,这篇文章会详细的讲解平面光光源的特性和实际应用该如何使用. 首先,平面光光源从一个矩形 ...
- three.js学习4_光源
Three.Light 首先展示的是使用半球光引用的效果, 光源直接放置于场景之上,光照颜色从天空光线颜色颜色渐变到地面光线颜色.光照主要有 AmbientLight 环境光 DirectionalL ...
- three.js入门系列之光源
首先创建场景来试验各种光源带来的不同效果: 一.锥形光源(聚光灯) SpotLight 接下来缩小范围(π/7): 二.基础光源(环境光) AmbientLight 上例中没有添加环境光,使得周围黑漆 ...
- three.js加载obj模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- Three.js基础部分学习
一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件 <场景 A scene.相机a camera.渲染器 a ...
- Three.js外部模型加载
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 ...
随机推荐
- WaxPatch中demo注意问题
问题一 https://github.com/mmin18/WaxPatch网址中提供的demo是可以运行,但是存在一个问题,如果把patch.zip换成自己的并且上传到自己的服务器(github), ...
- ssh配置免密码登录
日常工作中很多情况下都需要登录服务器进行管理,一般都是用ssh进行连接,为了防止密码外泄,可以配置下ssh的免密码登录. 首先服务器两台: A:43.224.34.* B:104.238.161.* ...
- mysql入门语句10条
1,连接数据库服务器 mysql -h host -u root -p xxx(密码) 2,查看所有库 show databases; 3,选库 use 库名 4,查看库下面的表 show ...
- Python 实现发送、抄送邮件功能
发送邮件 问题 在web.py中,如何发送邮件? 解法 在web.py中使用web.sendmail()发送邮件. web.sendmail('cookbook@webpy.org', 'user@e ...
- SVN 操作指南
1.安装 和 使用 2.导入导出 2.错误信息 ① svn不知到这样的主机
- C++ 基础 构造函数的使用
- 2-05使用SQL语句创建数据库2
使用SQL语句创建多个数据文件和日志文件: USE master--指向当前使用的数据库 GO--批处理的标志 CREATE DATABASE E_Market--创建E_market数据库 ON P ...
- Java Data Type
官方文档:http://docs.oracle.com/javase/tutorial/java/nutsandbolts/datatypes.html 转载地址:http://blog.csdn.n ...
- .net Session 详解
(一) 描述当用户在 Web 应用程序中导航 ASP.NET 页时,ASP.NET 会话状态使您能够存储和检索用户的值.HTTP 是一种无状态协议.这意味着 Web 服务器会将针对页面的每个 HTTP ...
- 解决全局变量共享---C语言的extern关键字用法
在调试程序时,有一个参数需要在多个函数之间传递,因为是作为调试参数,不想将参数引入到函数中. 很自然的想到使用全局变量来表示这个公共参数,工程代码的结构如下: main.c test.c test.h ...