如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前言：css3的出现使得我们可以通过前端技术，让网页内容变得更丰富，更华丽。今天来玩玩好玩的颜色渐变。

以下是 JavaScript 错误 Top 10：

       为了便于阅读，我们将每个错误描述都缩短了。接下来，让我们深入到每一个错误，来确定什么会导致它，以及如何避免创建它。 
1. Uncaught TypeError: Cannot read property 
        如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多（LOL…）。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。

       发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。
        我们来看一个在真实应用程序中发生的例子：我们选择 React，但该情况也同样适用于 Angular、Vue 或任何其他框架。

Javascript代码  

class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
} 这里有两件重要的事情要实现：

• 组件的状态（例如 this.state）从 undefined 开始。
• 当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是未定义的。 这又意味着 ItemList 将 items 定义为 undefined，并且在控制台中出现错误 - “Uncaught TypeError: Cannot read property ‘map’ of undefined”。
  

       这很容易解决。最简单的方法：在构造函数中用合理的默认值来初始化 state。

Javascript代码

class Quiz extends Component {
  // Added this:
  constructor(props) {
    super(props);
    // Assign state itself, and a default value for items
    this.state = {
      items: []
    };
  }
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

       在你的应用程序中的具体代码可能是不同的，但我们希望我们已经给你足够的线索，以解决或避免在你的应用程序中出现的这个问题。如果还没有，请继续阅读，因为我们将在下面覆盖更多相关错误的示例。
        2. TypeError: ‘undefined’ is not an object
        这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测 试。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。

      3.TypeError: null is not an object
        这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 您可以在 Safari Developer Console 中轻松测试。

有趣的是，在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===：  

       在现实世界的例子中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。 因为 DOM API 对于空白的对象引用返回值为 null。
        任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。 JS 代码按照 HTML 中的规定从上到下进行解释。 所以，如果 DOM 元素之前有一个标签，脚本标签内的 JS 代码将在浏览器解析 HTML 页面时执行。 如果在加载脚本之前尚未创建 DOM 元素，则会出现此错误。
        在这个例子中，我们可以通过添加一个事件监听器来解决这个问题，这个监听器会在页面准备好的时候通知我们。 一旦 addEventListener被触发，init() 方法就可以使用 DOM 元素。

Html代码

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      var userName = myTextfield.value;
    }
  }
  document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
      init();
    }
  });
</script>
<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>

4. (unknown): Script error 
       当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。 例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。 
        要获得真正的错误消息，请执行以下操作： 
        1. 发送 ‘Access-Control-Allow-Origin’ 头部 
        将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。 如有必要，您可以将域替换为您的域：例如，Access-Control-Allow-Origin：www.example.com。 但是，处理多个域会变得棘手，如果你使用 CDN，可能由此产生更多的缓存问题会让你感觉到这种努力并不值得。 在这里看到更多。 
         这里有一些关于如何在各种环境中设置这个头文件的例子： 
         在 JavaScript 文件所在的文件夹中，使用以下内容创建一个 .htaccess 文件：
代码

       Header add Access-Control-Allow-Origin "*"  

       将 add_header 指令添加到提供 JavaScript 文件的位置块中：
代码

       location ~ ^/assets/ {  add_header Access-Control-Allow-Origin *;  }  

        将以下内容添加到您为 JavaScript 文件提供资源服务的后端： 

代码 

        rspadd Access-Control-Allow-Origin:\ *  

        在 <script> 中设置 crossorigin="anonymous"

在您的 HTML 代码中，对于您设置了Access-Control-Allow-Origin header 的每个脚本，在 script 标签上设置crossorigin =“anonymous”。在脚本标记中添加 crossorigin 属性之前，请确保验证上述 header 正确发送。 在Firefox 中，如果存在crossorigin属性，但Access-Control-Allow-Origin头不存在，则脚本将不会执行。 

5. TypeError: Object doesn’t support property

       这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。

       这相当于 Chrome 中的 “TypeError：”undefined“ is not a function” 错误。 是的，对于相同的逻辑错误，不同的浏览器可能具有不同的错误消息。 
        对于使用 JavaScript 命名空间的 Web 应用程序，这是一个 IE l浏览器的常见的问题。 在这种情况下，99.9％ 的原因是 IE 无法将当前名称空间内的方法绑定到 this 关键字。 例如：如果你 JS 中有一个命名空间 Rollbar 以及方法 isAwesome 。 通常，如果您在 Rollbar 命名空间内，则可以使用以下语法调用isAwesome方法：
Javascript代码 

this.isAwesome();  

        Chrome，Firefox 和 Opera 会欣然接受这个语法。 另一方面 IE，不会。 因此，使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。

6. TypeError: ‘undefined’ is not a function
        当您调用未定义的函数时，这是 Chrome 中产生的错误。 您可以在 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。

       随着 JavaScript 编码技术和设计模式在过去几年中变得越来越复杂，回调和关闭中的自引用范围也相应增加，这是这种/那种混淆的相当常见的来源。
       考虑这个代码片段：
Javascript代码

function testFunction() {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearBoard();    // what is "this"?
  }, 0);
};

执行上面的代码会导致以下错误：“Uncaught TypeError：undefined is not a function”。 你得到上述错误的原因是，当你调用setTimeout()时，实际上是调用window.setTimeout()。 因此，在窗口对象的上下文中定义了一个传递给setTimeout()的匿名函数，该函数没有clearBoard()方法。
一个传统的，旧浏览器兼容的解决方案是简单地将您的 this 保存在一个变量，然后可以由闭包继承。 例如：
Javascript代码 

function testFunction () {
  this.clearLocalStorage();
  var self = this;   // save reference to 'this', while it's still this!
  this.timer = setTimeout(function(){
    self.clearBoard(); 
  }, 0);

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Echarts 标签中文本内容太长的时候怎么办 ? 
- 1对文本进行倾斜 
在xAxis.axisLabe中修改rotate的值

 xAxis: {
            data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 nameLocation:'end',//坐标轴名称显示位置。 axisLabel : {//坐标轴刻度标签的相关设置。 interval:0, rotate:"45" }
        },

 grid:{//直角坐标系内绘图网格 show:true,//是否显示直角坐标系网格。[ default: false ] left:"20%",//grid 组件离容器左侧的距离。 right:"30px",
            borderColor:"#c45455",//网格的边框颜色 bottom:"20%" // },

 axisLabel : {//坐标轴刻度标签的相关设置。 formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 4;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整 /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */ // 条件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循环每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 开始截取的位置 var end = start + provideNumber;// 结束截取的位置 // 此处特殊处理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不换行 tempStr = params.substring(start, paramsNameNumber);
                                    } else { // 每一次拼接字符串并换行 tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串 }

                            } else { // 将旧标签的值赋给新标签 newParamsName = params;
                            } //将最终的字符串返回 return newParamsName
                }

            }

axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } } 

axisLabel : {//坐标轴刻度标签的相关设置。 clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里 interval : 0,
                formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
                    } else { return params;
                    }
                }

            }

这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。

那么如何使用CSS实现这个效果？

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

  document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
  }
   1.选择元素，等待，直到用户将鼠标移过它；
   2.计算相对于元素的位置；
   3.将坐标存在CSS的变量中。

动画渐变
  .button {
     position: relative;
     appearance: none;
     background: #f72359;
     padding: 1em 2em;
     border: none;
     color: white;
     font-size: 1.2em;
     cursor: pointer;
     outline: none;
     overflow: hidden;
     border-radius: 100px;
  span {
    position: relative;
  }
  &::before {
    --size: 0;  
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
    }
    &:hover::before {
    --size: 400px;
      }

   }

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里、

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex;}
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex;}
Webkit 内核的浏览器display: -webkit-flex;
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。




容器属性：

flex-direction：（排列方向横向还是纵向）
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。



flex-wrap：（如何换行）
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow：（flex-direction和flex-wrap简称，默认值为row nowrap）

justify-content：（横向对齐方式）
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。



align-items：（纵向对齐方式）
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。



align-content：（多根轴线的对齐方式）
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴。



 
box属性：

order：（排列顺序）
数值越小，排列越靠前，默认为0。

flex-grow：（剩余空间分配，box放大比例，默认为0，即如果存在剩余空间，也不放大）



flex-shrink：（box缩小比例，默认为1，即如果空间不足，该项目将缩小）



flex-basis：（box占据的宽度或高度）



align-self：（单个box的对齐方式，与其他box对齐方式）

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、什么是BFC
       BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
    中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念， 从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

二、如何触发 BFC

      上面介绍了 BFC 的定义，那么如何触发 BFC 呢？
    满足下面任一条件的元素，会触发为 BFC ：
    1、浮动元素，float 除 none 以外的值
    2、绝对定位元素，position（absolute，fixed）
    3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
    4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、BFC布局与普通文档流布局区别      
    普通文档流布局规则
    1.浮动的元素是不会被父级计算高度
    2.非浮动元素会覆盖浮动元素的位置
    3.margin会传递给父级
    4.两个相邻元素上下margin会重叠

    BFC布局规则
    1.浮动的元素会被父级计算高度（父级触发了BFC）
    2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
    3.margin不会传递给父级（父级触发了BFC）

    4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

   下面来说一下BFC的实际使用场景
   场景1：解决子盒子都浮动时 父盒子高度不参与计算问题
    <style>
      .far {
         border: 10px solid pink;
         width: 300px;
     }
      .child {
         border: 10px solid yellowgreen;
         width:100px;
         height: 100px;
         float: left;
    }
     .far{
         overflow: hidden;
    }
    </style>
    <body>
        <div class="far">
             <div class="child"></div>
             <div class="child"></div>
        </div>
    </body>

    根据overflow 除了 visible 以外的值（hidden，auto，scroll）就会触发BFC的原则 计算BFC高度时 ，floatbox也参与其中。

    场景2：box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ，这就是margin上下间值合并的原因

    <style>
    p {
        color: pink;
        background: #fcc;
        width: 200px;
        height:100px;
        text-align:center;
        margin: 100px;
    }
    </style>
    <body>
       <p></p>
       <p></p>
    </body>

    要解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了,解决代码如下。
    <style>
       .box {
          overflow: hidden;
       }
       p {
          background: green;
          width: 200px;
          height: 200px;
          margin: 100px;
      }
    </style>
    <body>
       <p></p>
       <div class="box">
           <p></p>
       </div>

    </body>

    场景3：实现左侧固定右侧自适应等类似布局
    <style>
        .out{
            border: 1px solid red;
            height: 200px;
        }
        .left{
            width: 200px;
            height: 150px;
            background-color: green;
            float: left;
        }
        .right{
            background-color: pink;
            height: 250px;
            overflow: hidden;
        }
      </style>
      <body>
     <div class="out">
        <div class="left"></div>
        <div class="right"></div>
      </div>

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

我们都知道，three.js库里面内置了很多着色器通道对象供我们渲染场景，本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现：

1.RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建：

[javascript] view plain copy

1. let renderPass = new THREE.RenderPass(scene, camera);  

2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果，实现的效果超有时代感，新建：

[javascript] view plain copy

1. /*四个参数分别为粗糙程度，扫描线强度，扫描线数量，是否转换为灰度图*/  
2. let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
3. //将渲染结果输出到屏幕  
4. effectFilm.renderToScreen = true;  

3.EffectComposer可以理解为着色器通道容器，着色器通道按照先后顺序添加进来并执行，新建：

[javascript] view plain copy

1. /*渲染效果组合器，每个通道都按照传入的顺序执行*/  
2. let composer = new THREE.EffectComposer(renderer);  
3. composer.addPass(renderPass);  
4. composer.addPass(effectFilm);  

本文实现的demo基于three.js_r86(请自行下载)，代码所用js文件和图片都在下载的那个包里面，请读者自行引用。

实现效果：

代码：

[html] view plain copy

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>shader_2_earth</title>  
6.     <style>  
7.         body{  
8.             margin: 0;  
9.             overflow: hidden;  
10.         }  
11.     </style>  
12. </head>  
13. <body>  
14. <script src="build/three.js"></script>  
15. <script src="js/libs/stats.min.js"></script>  
16. <script src="js/libs/dat.gui.min.js"></script>  
17. <script src="js/controls/OrbitControls.js"></script>  
18. <script src="js/Detector.js"></script>  
19.   
20. <script src="js/postprocessing/EffectComposer.js"></script>  
21. <script src="js/postprocessing/ShaderPass.js"></script>  
22. <script src="js/postprocessing/MaskPass.js"></script>  
23. <script src="js/postprocessing/FilmPass.js"></script>  
24. <script src="js/postprocessing/BloomPass.js"></script>  
25. <script src="js/postprocessing/RenderPass.js"></script>  
26.   
27. <script src="js/shaders/CopyShader.js"></script>  
28. <script src="js/shaders/FilmShader.js"></script>  
29.   
30. <div id="stats"></div>  
31. <div id="container"></div>  
32. <script>  
33.     //检测webgl的兼容性  
34.    if(!Detector.webgl) Detector.addGetWebGLMessage();  
35.   
36.    let scene;  
37.    let camera, renderer, sphere, controls, stats;  
38.    let ambientLight, spotLight;  
39.    let composer;  
40.    let clock;  
41.   
42.    main();  
43.    render();  
44.   
45.    function main() {  
46.        scene = new THREE.Scene();  
47.   
48.        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);  
49.        camera.position.set(-10, 15, 25);  
50.        camera.lookAt(new THREE.Vector3(0, 0, 0));  
51.   
52.        renderer = new THREE.WebGLRenderer({antialias:true});  
53.        renderer.setClearColor(new THREE.Color(0,0,0));  
54.        renderer.setSize(window.innerWidth, window.innerHeight);  
55.        renderer.shadowMapEnabled = true;  
56.   
57.        controls = new THREE.OrbitControls(camera);  
58.        controls.autoRotate = false;  
59.   
60.        clock = new THREE.Clock();  
61.   
62.        ambientLight = new THREE.AmbientLight(0x181818);  
63.        scene.add(ambientLight);  
64.   
65.        spotLight = new THREE.SpotLight(0xffffff);  
66.        spotLight.position.set(550, 100, 550);  
67.        spotLight.intensity = 0.6;  
68.        scene.add(spotLight);  
69.   
70.        //创建地球  
71.        sphere = createMesh(new THREE.SphereGeometry(10, 60, 60));  
72.        scene.add(sphere);  
73.   
74.        document.getElementById("container").appendChild(renderer.domElement);  
75.   
76.        /**  
77.         * 添加渲染通道  
78.         */  
79.        //在当前场景和摄像机的基础上渲染一个新场景  
80.        let renderPass = new THREE.RenderPass(scene, camera);  
81.        //通过扫描线和失真来实现模拟电视屏幕的效果  
82.        let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
83.        //将渲染结果输出到屏幕  
84.        effectFilm.renderToScreen = true;  
85.   
86.        //渲染效果组合器，每个通道都按照传入的顺序执行  
87.        composer = new THREE.EffectComposer(renderer);  
88.        composer.addPass(renderPass);  
89.        composer.addPass(effectFilm);  
90.   
91.        //菜单栏元素  
92.        let guiFields = {  
93.            "扫描线数量": 256,  
94.            "灰度图像": false,  
95.            "扫描线强度": 0.3,  
96.            "粗糙程度": 0.8,  
97.            "updateEffectFilm": function () {  
98.                effectFilm.uniforms.grayscale.value = guiFields.灰度图像;  
99.                effectFilm.uniforms.nIntensity.value = guiFields.粗糙程度;  
100.                effectFilm.uniforms.sIntensity.value = guiFields.扫描线强度;  
101.                effectFilm.uniforms.sCount.value = guiFields.扫描线数量;  
102.            }  
103.        };  
104.   
105.        //新建一个菜单栏  
106.        let gui = new dat.GUI();  
107.        gui.add(guiFields, "扫描线数量", 0, 2048).onChange(guiFields.updateEffectFilm);  
108.        gui.add(guiFields, "扫描线强度", 0, 1).onChange(guiFields.updateEffectFilm);  
109.        gui.add(guiFields, "粗糙程度", 0, 3).onChange(guiFields.updateEffectFilm);  
110.        gui.add(guiFields, "灰度图像").onChange(guiFields.updateEffectFilm);  
111.   
112.        stats = initStats();  
113.    }  
114.   
115.    //创建一个Mesh  
116.    function createMesh(geometry) {  
117.   
118.        //初始化纹理加载器  
119.        let textureLoader = new THREE.TextureLoader();  
120.        //加载图片  
121.        let uniforms = {  
122.            planetTexture:{value:textureLoader.load("textures/planets/earth_atmos_2048.jpg")},  
123.            specularTexture:{value:textureLoader.load("textures/planets/earth_specular_2048.jpg")},  
124.            normalTexture:{value:textureLoader.load("textures/planets/earth_normal_2048.jpg")}  
125.        };  
126.   
127.        //创建phong材料，并进行相应图片的贴图  
128.        let planetMaterial = new THREE.MeshPhongMaterial();  
129.        planetMaterial.specularMap = uniforms.specularTexture.value;  
130.        planetMaterial.specular = new THREE.Color(0x4444aa);  
131.   
132.        planetMaterial.normalMap = uniforms.normalTexture.value;  
133.        planetMaterial.map = uniforms.planetTexture.value;  
134.   
135.        //新建一个mesh  
136.        let mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [planetMaterial]);  
137.   
138.        return mesh;  
139.    }  
140.   
141.    //渲染更新场景  
142.   
143.    function render() {  
144.        stats.update();  
145.        let delta = clock.getDelta();  
146.        controls.update(delta);  
147.        sphere.rotation.y += 0.002;  
148.        requestAnimationFrame(render);  
149.   
150.        //没有着色器通道系统默认为WebGLRenderer.render  
151.        //使用着色器通道后，应使用使用composer.render  
152.        composer.render(delta);  
153.    }  
154.   
155.    //左上角帧显示  
156.    function initStats() {  
157.        let stats = new Stats();  
158.        stats.setMode(0);  
159.        stats.domElement.style.position = 'absolute';  
160.        stats.domElement.style.left = '0px';  
161.        stats.domElement.style.top = '0px';  
162.        document.getElementById("stats").appendChild(stats.domElement);  
163.   
164.        return stats;  
165.    }  
166. </script>  
167. </body>  
168. </html>  

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

       单选框和复选框在网页表单中应用十分广泛，但是浏览器默认自带的单选框和复选框样式不仅不统一，而且大多都比较简单丑陋。本文给大家介绍了一些基于CSS3的个性化单选框和复选框，一些选中动画是基于jQuery的，你可以挑选喜欢的单选框和复选框应用到自己的网页中去，非常方便。

         1、jQuery超级个性化的单线框和复选框

       今天要分享的也是一个非常个性化的单选框和复选框插件，颜色你可以自己定义。

                   在线演示  源码下载

         2、CSS3漂亮的自定义Checkbox复选框 9款迷人样式

       今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。

                    在线演示  源码下载

        3、CSS3自定义美化复选框Checkbox组合

       今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不错的CSS3自定义美化checkbox组合。

                在线演示   源码下载

       4、jQuery实现美化版的单选框和复选框

       今天这款是利用jQuery实现的美化版单选框和复选框，样式风格非常简洁清爽，是一款很不错的jQuery按钮插件。

                          在线演示  源码下载

       5、纯CSS3 3D按钮 按钮酷似牛奶般剔透

       CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。

                 在线演示  源码下载

        6、HTML5/CSS3开关按钮 立体3D按钮

        今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。

                  在下演示  源码下载

         7、CSS3自定义发光Radiobox单选框

       今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件，该radiobox选中时也有滑块的动画。

                   在线演示  源码下载

      8、CSS3实现自定义Checkbox动画

      今天我们要再来分享一款CSS3自定义checkbox，而且这款checkbox还带有动画效果，当你选中checkbox的时候，会以动画的方式打上一个大大的勾。

                   在线演示  源码下载

         以上就是8个非常个性化的CSS3单/复选框，希望对你有所帮助。

       本文链接：http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一.include指令标记