Sass 基础 PXtoEMMixin 和 @function
CSS 单位 是一个很意思的东西，到目前为止，CSS的单位不仅仅局限于 em,px,pt,com,in...，还出现了新的单位，比如 rem，vw，vh，vmin和vmax等等。在 CSS-trick 有对这些单位进行描述。在这么多的单位中，其中px与em两者的互转是最令同学们头痛的。简值是一言难尽，理不清呀！ 如果你想了解更多有关于 px 转 em 相关知识，建议您仔细阅读一下下面的文章： PX…
Three.js 背景完全透明 模型悬浮在网页上
通过 Three.js 渲染一个模型的时候，不希望 Canvas 画布有背景颜色，也就是canvas画布完全透明，可以透过canvas画布看到画布后面叠加的HTML元素图文，呈现出来一种三维模型悬浮在网页上面的效果。 通过Three.js渲染器 WebGLRenderer 的 alpha 属性值设置为true就可以，WebGL渲染器的alpha属性默认值是false。 // 在构造函数参数中设置a…
Three.js 模型加载速度 模型太大
Threejs 开发项目加载的模型，可能会比较大，模型三角形面数越多，一方面是threejs渲染模型的性能下降，另一方面是加载模型的时间比较长，影响体验。 因为三维模型文件往往比较大，所以 Web3D 项目相比较普通的前端web项目，需要加载文件体积比较大，需要花费的时间自然比较多，加载时间比较长的情况下，对于用户来说体验肯定不太好。 二进制格式 使用不同文件格式，文件的大小会有所不同，如果同一个…
Sass 中的反三角函数
有可能你会认为数学在 CSS 中用不上，但实际上，在写 CSS 时运用一些数学可以帮你做一些令人惊讶的事情。数学（尤其是三角函数）可以帮助你模拟一个真实的世界。如果你想做这样的事情，你需要了解复杂的三维变换。如果你只是想在朋友面前展示一下你的才华，这将是一件非常有兴趣的事情。 这里有一个示例：https://codepen.io/anon/embed/kpCyx 这是一个旋转的三十二面体（由二十个…
Sass Guidelines 中文版本之命名约定和注释
这是 Sass Guidelines 第三部分，主要介绍了如何在 Sass 编写中命名和写注释。里面提供的一些细节还是值得大家编码中注意一二的。 命名约定 在本节，我们不会讨论适用于大规模和可维护的最佳 CSS 命名方案，因为这不仅仅超过了个人的能力范围，也不是一个Sass样式指南可以解决的问题。我个人推荐遵从CSS Guidelines的建议。 良好的命名对保持整体代码的一致性和可读性非常重要，…
Three.js 光照阴影实时计算
在方向光的作用下，物体会形成阴影投影效果。完整源码和视频讲解参考本站发布的 Threejs 视频教程 5.2 节光照阴影。 平行光投影计算代码 Three.js 物体投影模拟计算主要设置三部分，一个是设置产生投影的模型对象，一个是设置接收投影效果的模型，最后一个是光源对象本身的设置，光源如何产生投影。 var geometry = new THREE.BoxGeometry(40, 100, 40…
Three.js 相机对象 .up 属性
Threejs 相机对象 Camera 的 .up 属性表示相机对象的上方向，如果你有一定图形学基础，你可以很好的理解，如果没有图形学基础也没关系，你可以在 threejs 代码中更改 .up 的属性值，查看threejs 渲染结果有什么变化。 .up 属性默认值是 new THREE.Vector3(0,1,0)，沿着y轴朝上，你可以使用下面代码看渲染效果绿色 y 轴数值向上，你可以改变 .up…
Three.js 音频
Threejs 音频相关的 API 音频 Audio、位置音频 PositionalAudio、监听者 AudioListener、音频分析器 AudioAnalyser、音频加载器 AudioLoader。关于这些API的具体介绍可以参考 Three.js 官方文档。 音频 Audio、位置音频 PositionalAudio 等Threejs类本质上是对原生 Web Audio API 的封装…
Sass 嵌套选择器规则
众所周知 Sass 是一种高效、可靠而又精确的工具，给了我们很多自由空间，让开发者减少使用CSS的一些痛苦，当然，这也意味着一种新的责任到来。 问题所在 在 CSS 中，我们都知道所有代码都在一个“根级别”的选择器中，每个CSS的样式声明都写嵌套的话，那意客味需要写很多的代码。 今天我要带领大家进入到Sass的最基本原则中。这就是所谓的“基础规则(Inception rule)”。此规则可以帮助你…
使用 Sass 来定义 Keyframes
CSS 的 Animation 成为 Web Animation 中主要实现方式之一。使用 CSS 的 animation 可以在 Web 中实现一些动画效果。而其中最为关键的还是依赖于 @keyframes，让动画可以根据帧定制不同的动画效果。 其实这篇文章的主要目的不是要给大空介绍 @keyframes 的语法和使用方法。因为，大家对它并不会陌生，而且也知道怎么使用？那么大家在使用 keyfr…
- 共 2 页
- 1
