`

three.js代码注释

阅读更多

转载请保留此句:商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、html5、WEBGL、THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

俺也是刚开始学,好多地儿肯定不对还请见谅.

以下代码是THREE.JS 源码文件中Light/DirectionalLight.js文件的注释.

/**
* @author mrdoob / http://mrdoob.com/
* @author alteredq / http://alteredqualia.com/
*/
/*
///DirectionalLight方法根据设置灯光的颜属性color, 强度属性intensity创建平行光光源.
///DirectionalLight对象的功能函数采用定义构造的函数原型对象来实现.
/// NOTE: SpotLight类型灯光实现了阴影,但是需要在场景中使用MeshLambertMaterial或者MeshPhongMaterial
/// 下面一些注释直接摘抄自:http://www.cnblogs.com/yiyezhai/archive/2012/12/24/2829991.html
/// Example:
/// var light = new THREE.SpotLight(0xff0000,1,100,Math.PI /2,5); //创建灯光对象
/// light.position.set(50,50,30); //设置位置
/// light.castShadow = true; //开启阴影
/// light.shadowMapWidth = 1024; //阴影贴图宽度设置为1024像素
/// light.shadowMapHeight = 1024; //阴影贴图高度设置为1024像素
/// light.shadowCameraNear = 500; //阴影的平截头体区域near属性
/// light.shadowCameraFar = 4000; //阴影的平截头体区域far属性
/// light.shadowCameraFov = 30; //阴影的平截头体区域fov属性
/// scene.add(lignt); //加入场景
*/
///DirectionalLight
///灯光的颜色属性
///灯光的强度,默认是1
///返回DirectionalLight,平行光光源.
THREE.DirectionalLight = function ( color, intensity ) {
THREE.Light.call( this, color ); //调用Light对象的call方法,将原本属于Light的方法交给当前对象DirectionalLight来使用.
this.position.set( 0, 1, 0 ); //灯光的位置属性初始化为,0,1,0
this.target = new THREE.Object3D(); //创建一个目标点对象,目标点对象是一个Object3D对象.
this.intensity = ( intensity !== undefined ) ? intensity : 1; //灯光的颜色属性,如果不指定,初始化为1.(光线的密度,默认为1。因为RGB的三个值均在0~255之间,不能反映出光照的强度变化,光照越强,物体表面就更明亮。)
this.castShadow = false; //布尔值,默认为false,如果设置为true,对于所有表面都会逐像元地计算其在光照方向上是否被遮挡,这会消耗大量的计算。
this.onlyShadow = false; //布尔值,控制是否只产生阴影而不“照亮”物体,默认为false。这种模式也许有什么特殊应用吧。
//
this.shadowCameraNear = 50; //shadowCameraNear属性,正交投影立方体近端,定义一个范围(正交投影立方体),不计算在范围之外的物体的阴影,near默认是50
this.shadowCameraFar = 5000; //shadowCameraFar属性,正交投影立方体远端,定义一个范围(正交投影立方体),不计算在范围之外的物体的阴影,far默认是5000
this.shadowCameraLeft = - 500; //shadowCameraLeft属性,正交投影立方体左端,定义一个范围(正交投影立方体),不计算在范围之外的物体的阴影,left默认是500
this.shadowCameraRight = 500; //shadowCameraRight属性,正交投影立方体右端,定义一个范围(正交投影立方体),不计算在范围之外的物体的阴影,right默认是500
this.shadowCameraTop = 500; //shadowCameraTop属性,正交投影立方体上端,定义一个范围(正交投影立方体),不计算在范围之外的物体的阴影,top默认是500
this.shadowCameraBottom = - 500; //shadowCameraBottom属性,正交投影立方体下端,定义一个范围(正交投影立方体),不计算在范围之外的物体的阴影,Bottom默认是500
this.shadowCameraVisible = false; //shadowCameraVisible设置为true,会在场景中显示灯光的框架,方便调试
this.shadowBias = 0; //阴影贴图的偏移,
this.shadowDarkness = 0.5; //阴影对物体亮度的影响,默认是0.5
this.shadowMapWidth = 512; //阴影贴图宽度,单位像素,默认512
this.shadowMapHeight = 512; //阴影贴图高度,单位像素,默认512
/*对于平行光,WebGL可以使用级联阴影贴图(或成为平行分割阴影贴图)有很好的阴影质量,特别是远距离观看。
级联阴影通过分割可视区域逐步部分变大,并使用相同的大小,在每个阴影贴图。结果是物体接近观看者将比更远的物体获得更多的阴影贴图像素。
对于平行光阴影的质量和性能,阴影的距离是非常重要的。就像阴影级联数,阴影距离可以在质量设置中设置,很容易降低阴影范围,以减少硬件性能消耗。
在阴影距离结束处,阴影将淡出,更远的物体将没有阴影。大多数情况下在场景中更远地方的阴影不会引人注目!*/
this.shadowCascade = false; //阴影级联
this.shadowCascadeOffset = new THREE.Vector3( 0, 0, - 1000 ); //阴影级联偏移距离
this.shadowCascadeCount = 2; //当使用2个阴影级联时,整个阴影距离内,默认被分为两块,靠近观察者较小的块和远处较大的块
this.shadowCascadeBias = [ 0, 0, 0 ]; //阴影级联偏移数组
this.shadowCascadeWidth = [ 512, 512, 512 ]; //阴影级联宽度数组
this.shadowCascadeHeight = [ 512, 512, 512 ]; //阴影级联高度数组
this.shadowCascadeNearZ = [ - 1.000, 0.990, 0.998 ]; //阴影级联近处
this.shadowCascadeFarZ = [ 0.990, 0.998, 1.000 ]; //阴影级联远处
this.shadowCascadeArray = []; //阴影级联数组
//TODO: 下面这些完全没弄明白,以后补上详细的注释
this.shadowMap = null; //指定阴影贴图,WebGLRenderTarget对象,这里好像很复杂,完全没弄明白,以后补上详细的注释.
this.shadowMapSize = null; //阴影图的大小,注意,这里应符合OpenGL中对纹理的要求(2的n次方+2n) 
this.shadowCamera = null; //阴影贴图相机,THREE.PerspectiveCamera对象,
this.shadowMatrix = null; //阴影贴图矩阵
};
/**************************************************************************************
****下面是DirectionalLight对象提供的功能函数定义,一部分通过prototype继承自Light方法
***************************************************************************************/
THREE.DirectionalLight.prototype = Object.create( THREE.Light.prototype ); //DirectionalLight对象从THREE.Light的原型继承所有属性方法
/*clone方法
///clone方法克隆DirectionalLight对象
*/
///clone
///返回克隆的DirectionalLight对象 
THREE.DirectionalLight.prototype.clone = function () {
var light = new THREE.DirectionalLight();
THREE.Light.prototype.clone.call( this, light ); //调用THREE.Light.clone方法,克隆平行光对象
//复制当前灯光对象的属性
light.target = this.target.clone();
light.intensity = this.intensity;
light.castShadow = this.castShadow;
light.onlyShadow = this.onlyShadow;
//
light.shadowCameraNear = this.shadowCameraNear;
light.shadowCameraFar = this.shadowCameraFar;
light.shadowCameraLeft = this.shadowCameraLeft;
light.shadowCameraRight = this.shadowCameraRight;
light.shadowCameraTop = this.shadowCameraTop;
light.shadowCameraBottom = this.shadowCameraBottom;
light.shadowCameraVisible = this.shadowCameraVisible;
light.shadowBias = this.shadowBias;
light.shadowDarkness = this.shadowDarkness;
light.shadowMapWidth = this.shadowMapWidth;
light.shadowMapHeight = this.shadowMapHeight;
//
light.shadowCascade = this.shadowCascade;
light.shadowCascadeOffset.copy( this.shadowCascadeOffset );
light.shadowCascadeCount = this.shadowCascadeCount;
light.shadowCascadeBias = this.shadowCascadeBias.slice( 0 );
light.shadowCascadeWidth = this.shadowCascadeWidth.slice( 0 );
light.shadowCascadeHeight = this.shadowCascadeHeight.slice( 0 );
light.shadowCascadeNearZ = this.shadowCascadeNearZ.slice( 0 );
light.shadowCascadeFarZ = this.shadowCascadeFarZ.slice( 0 );
return light; //返回克隆的平行光的对象
};

分享到:
评论

相关推荐

    three.js+photo-sphere-viewer.js 全景图场景切换

    4. **代码注释**:为了方便其他开发者理解和维护,代码中应有充足的注释,解释每部分功能和实现逻辑。 5. **模态框功能**:描述中提到后续计划添加类似模态框的功能,可能是为了在全景图中显示额外的信息或者交互...

    大学生课堂展示:Three.js简介

    PPT内容包括: three.js作品展示 three.js简单介绍 three.js部分简单对象简介 three.js代码展示(含注释) three.js动画实现 PPT试用于大学生课堂展示,冲平时分!

    three.js旋转立方体

    **描述:“three.js示例 使用three.js 实现的旋转立方体 代码注释完善”** 这个描述告诉我们,这是一个具有完整注释的代码示例,旨在帮助开发者理解如何在three.js中创建和控制3D对象,特别是立方体的旋转效果。...

    three.js实现雨下小站博文图片资源

    three.js是一个基于WebGL的JavaScript 3D库,广泛用于网页中的交互式3D图形制作,而“雨下小站”可能是一个特定的主题或情境设定,旨在展示如何在3D环境中创建动态的天气效果。 【描述分析】 描述中同样提到了...

    使用three.js制作的3D二十面体.zip

    在本项目中,"使用three.js制作的3D二十面体.zip"是一个包含使用JavaScript库three.js创建的3D二十面体模型的压缩文件。Three.js是一个强大的WebGL库,它使得在浏览器中构建和展示复杂的3D图形变得简单易行。通过这...

    ThreeJS 中文注释源码

    ThreeJS 是一个非常流行的JavaScript库,用于在Web浏览器中创建3D图形。它基于WebGL技术,使得开发者能够轻松地构建交互式的3D场景。这个"ThreeJS 中文注释源码"压缩包包含了对ThreeJS库的重要部分——`...

    Three.js+HTML5 3D拼魔方小游戏代码.zip

    Three.js是JavaScript的一个库,专为在Web浏览器中创建和展示3D图形设计。这个压缩包包含了一套完整的解决方案,让你能够直接在网页上体验或进行自定义开发。 【描述】中的“非常实用的代码,可以完美运行”意味着...

    Three.js碎片化图片切换特效

    实际操作时,你需要将这些资源导入到你的项目中,并根据代码注释和文档来理解和实现图片切换特效。 总的来说,Three.js碎片化图片切换特效是一个结合了3D图形、粒子动画和JavaScript交互的创新应用,它展示了WebGL...

    Three.JS-Webpack-Boilerplate-v4:设置用于开发与Webpack一起运行的Three.JS站点的环境

    开发日志: First off 请参阅app.js中的注释以获取代码说明。 在此博客中,我列出了我遇到的问题: Window resize 在我们可以看到THREEx.WindowResize.js代码的NPM版本。 也可以使用一些自定义代码来完成,请参阅app...

    使用Three.js构建的程序化城市街区生成器

    我试图在javascript代码注释(位于js/procedural.city.generator.js中)中包含尽可能多的详细信息。Perlin噪声实现的全部功劳归于Stefan Gustavson(stegu@itn.liu.se),Peter Eastman和Joseph Gentle。

    three.js-demo

    2. `main.js`:这里是核心JavaScript代码,实现了3D场景的构建和动画逻辑。 3. `styles.css`:可能包含一些样式规则,用于调整3D元素的外观或页面布局。 4. `models/`:可能包含3D模型文件,如`.obj`、`.gltf`或`....

    Three.JS实现三维场景

    同时,逐步理解并实践每个组件的作用,通过注释和实验来加深对Three.JS的理解。 总的来说,Three.JS为Web3D开发提供了一个强大而便捷的平台,结合合适的开发工具和丰富的社区资源,可以轻松地创建出各种复杂的3D...

    ThreeJsDemo:ThreeJs示例代码

    Three.js 是一个基于 WebGL 的 JavaScript 库,用于在 Web 浏览器中创建三维图形和交互式场景。这个“ThreeJsDemo”项目提供了一系列的示例代码,帮助开发者理解和学习如何使用 Three.js 进行3D编程。让我们深入探讨...

    TC.js:Three.js和Cannon.js变得简单!

    TC:ThreeCannon /!\项目已终止/!\ 3大改进 TC.BodyObject3D既是主体又是object3d,无需在每个帧上更新网格位置/四元数!...如果不使用THREE.Object3d的属性旋转,则代码将保持有效 删除您的机制以从CANNON.B

    js源码及注释.zip

    这个"js源码及注释.zip"压缩包包含了一系列与JavaScript相关的源代码文件,特别是针对一个名为Three.js的库。Three.js是一个基于WebGL的3D库,它使得在浏览器中创建复杂的3D图形变得简单。 1. **Three.min.js**:这...

    three.js-bump-mapping:使用three.js JavaScript 库创建和纹理3D 场景

    图形库“Three.js using WebGL”: ://threejs.org/ 来自three.js的代码示例: : Three.js 食谱章节:1、3、10 TrackballControls 库,允许与鼠标交互。 图像资产 所有图片资源均来自无版权站点: : 注释 为...

    WebGLHolo:Three.js全息图效果

    2. `js`文件夹 - 包含所有JavaScript代码,如主程序逻辑、Three.js的配置和全息图效果的实现。 3. `css`文件夹 - 可能包含项目的样式表,用于调整布局和视觉样式。 4. `assets`文件夹 - 可能包含3D模型、纹理图片和...

    地图下钻demo代码包体

    2. `babel.config.js`:Babel是一个JavaScript编译器,用于将ES6+的现代JavaScript语法转换为向下兼容的版本,使得代码能在较旧的浏览器或环境中运行。此文件是Babel的配置文件。 3. `package-lock.json`和`yarn....

    threejs_room_model:使用three.js进行库房建模,包含货柜,摄像头,灭火器等,其中点击摄像头可以播放视频

    库房建模示例 技术交流群:1018373095 使用three.js进行库房建模,包含货柜,摄像头,...直接下载运行即可,具体内容请看代码,都有详细注释,不明白的可以提issues。 ##开源不易,得到帮助的朋友可以点一下star,谢谢

Global site tag (gtag.js) - Google Analytics