灯光篇之一【环境光AmbientLight】

有段时间没看threejs 了，自己给自己敲一下，抽空了一定要来看看。
之前没看过灯光，今天开始看看里面的灯光系统
首先看看环境光

先看看它的继承抽象类Light
Light的构造函数是Light(color,intensity)
color:十六位颜色。默认是白色（0xffffff）
intensity:灯光的强度值，默认是1

下面看看AmbientLight：
这个灯光会照亮场景里全部的物体（前提是被光照的物体肯定是可以接受灯光）；这种灯没有方向所有无法产生阴影；
ambientLight.castShadow=true;//如果你这样写，脚本会警告提示：..has no shadow就是说这种灯没有阴影！
最后，需要把灯光添加到场景里面！
scene.add(ambientLight);

_____源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>AmbientLight环境光测试</title>
<meta charset="utf-8">
<script src="../build/three.js" type="text/javascript" ></script>
<style type="text/css">
body{
border:none;
margin: 0px 0px 0px 0px ;
}
div#canvas3d{
border:none;
margin: 0px 0px 0px 0px ;
}
div#menu{
font-size: 130%;
text-align: center;
color:white ;
position:absolute;top:2;left:2;width:60px;height:10px;
}
</style>
</head>
<body>
<div id = "canvas3d">
<div id = "menu">
<button id="btn" type="button" οnclick="clicked();">开灯</button>
</div>
</div>
</body>

}
}
var scene,camera,renderer,ambientLight,sphere;

function init(){
scene=new THREE.Scene();
camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.z=10;
renderer=new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
ambientLight = new THREE.AmbientLight(0xffff00,0);

scene.add(ambientLight);
var g = new THREE.SphereGeometry(2,50,50);
var m = new THREE.MeshLambertMaterial({color:0xff00ff});
obj=new THREE.Mesh(g,m);

scene.add(obj);
document.getElementById("canvas3d").appendChild(renderer.domElement);

}
function render(){
requestAnimationFrame(render);
renderer.render(scene,camera);

}
init();
render();

</script>
</html>

灯光篇之一【环境光AmbientLight】相关推荐

【DirectX11】第七篇光照模型——环境光
本系列文章主要翻译和参考自<Real-Time 3D Rendering with DirectX and HLSL>一书(感谢原书作者),同时会加上一点个人理解和拓展,文章中如有错误,欢 ...
虚幻4渲染编程（灯光篇）【第二卷：体积光】
我的专栏目录: 小IVan:专题概述及目录体积光在游戏里被越来越多地用到,对烘托场景气氛,提高游戏的逼格有比较重要的作用.这篇就来由浅入深研究一下这个东西.从容易的做法到高端做法依次递进. 首先先来 ...
虚幻4渲染编程（灯光篇）【第一卷：各种ShadowMap】
小IVan:专题概述及目录灯光篇开篇概述: 灯光在游戏里非常重要,游戏画面的整体感觉,游戏运行的效率都和它息息相关.然而虚幻把这些逻辑封得死死地.各种概念和庞大的系统常常令人束手无策.本篇将从灯光光 ...
Three.js - 光源使用详解1（环境光 AmbientLight、点光源 PointLint）
Three.js 中有许多不同种类的光源,每种光源都有特别的行为和用法.下面通过一个系列文章介绍它们的用法. 一.THREE.AmbientLight(环境光) 1,基本介绍在创建 THREE.Am ...
Max Script|灯光篇
实例中以目标聚光灯为例演示创建一个平面,长度宽度各调整为100 b = plane length:100 width:100 将平面的材质设置为标准材质standard b.material = s ...
智能家居系列——灯光篇
一灯,一世界, 明暗自如,随心所变, 或冷艳高贵,或绚丽如春, LivingLab智能灯光, 轻轻一点,温暖你的生活, 智能照明,幻彩你的生活. 回家时,一键点亮预设灯光, 家就是温暖的港湾就餐时, ...
unity scence灯光不显示_Unity渲染编程(灯光篇)【第二卷：MobileVolumetricLight】
MY BLOG DIRECTORY: todo... INTRODUCTION: 如果需要一个方案来渲染城镇或空旷的马路上巨量的灯光.图形程序拿到这个需求直接开始搞F+或者延迟光照,但是对于移动端的巨 ...
UE4地编基础-灯光篇
UE4的光源点光源游戏场景中尽量避免使用点光源. 一个点光源相当于六个聚光灯的消耗. 大部分情况下可以使用聚光灯代替他. HDR使用方法开启HDR插件
three.js的基本使用
three.js的基本使用基本使用步骤 1 创建一个场景 scene=new THREE.Scene() 2 设置灯光一.环境光AmbientLight 没有特定方向的光源,均匀整体改变物体表面的 ...

灯光篇之一【环境光AmbientLight】

灯光篇之一【环境光AmbientLight】相关推荐

最新文章

热门文章