转

threejs 当使用正交投影时实现射线交互

//初始化一个正交投影的camera对象var w = window.innerWidth,h = window.innerHeight; camera = new THREE.OrthographicCamera( w/-2,w/2,h/-2,h/2, -1000, 1000 ); camera.position.z = 100;//鼠标点击事件的回调（不同于透视投影

转

Chrome V8引擎介绍

随着Web相关技术的发展，JavaScript所要承担的工作也越来越多，早就超越了“表单验证”的范畴，这就更需要快速的解析和执行JavaScript脚本。V8引擎就是为解决这一问题而生，在node中也是采用该引擎来解析JavaScript。V8是如何使得JavaScript性能有大幅提升的呢？通过对一些书籍和文章的学习，梳理了V8的相关内容，本文将带你认识 V8。　　1.渲染引擎及网页

原

echarts源码解析

echats实例化对象通过let myChart = echarts.init(document.getElementById('myChart'));实例化一个echarts对象。echarts实例化对象下图是myChart对象的属性，里面基本都是私有方法。公共方法在__proto__中：对应的echart源码：/** * @module echarts~ECharts */function E

原

echarts点击事件api

当点击echarts图形的时候，可以获取图形的所有属性，值，绝对位置等信息。 let option = { xAxis: {}, yAxis: {}, series: [{ symbolSize: 20, data: [[10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.

原

echarts遇到的一些问题总结

问题一：自定义图例设置了大小，但是点击时会变形。产生原因：echarts对于自定义的icon,会有一个默认的长宽，长25，宽14，而我自定的icon的图片大小不一致，导致我点击后，图片同意变成长25，宽14了。解决方法：切图的时候，要把图片的长宽比例和默认的保持一致。

转

用webgl绘制一个彩色旋转立方体

转载自：https://blog.csdn.net/qq_37338983/article/details/74502649今天给大家分享一个用webgl写的简单的三维场景：转动的交互式彩色立方体，其六个面的颜色都不一样。 上次绘制二维彩色矩形时讲到，二维是三维场景的特殊情况，所以由二维向三维拓展也并不难，webgl里面提供了画三角形的方法，立方体有6个面，一个面由两个三角形组成，共计需要12个三

转

WebGL画一个彩色矩形

转载自：https://blog.csdn.net/qq_37338983/article/details/73742119 今天和大家分享一个用WebGL画矩形(rectangle)的小Demo,也可用来绘制三角形(triangle)。本文适用于初学者掌握WebGL的基本绘图知识，WebGL是OpenGL的Web版本，所以它的绘图过程与OpenGL是一样的，这里不赘述，大家自行百度

转

第六节 WebGL画球算法

转载自：https://blog.csdn.net/qq_37338983/article/details/78643772很多学习WebGL的小伙伴，刚开始一直都是学怎么画立方体，等到立方体画的炉火纯青的时候，却被另一个东西难住了，那就是球。what,还会被一个球难住？。下面就给大家介绍一种画球的算法：我们的地球现在被划分为很多经线和纬线，如下图所示：由下面的图，我们来推导一下计算球面上点的坐标

转

第五节 WebGL绘制、鼠标与键盘交互实例

前几篇一直在讲一些基础性的内容，之前的介绍一直都是理论上的解释，理论总要与实际相结合，才能有所收获，知识也才能得到有效的应用。下面，就从一个实例开始讲解，这个实例绘制了一个彩色立方体，且实现了键盘与鼠标的交互，shift+鼠标左键或中建是旋转立方体，shift+鼠标右键是平移立方体，shift+鼠标滚轮缩放立方体，其效果图如下：接下来就详细地附上程序和注释。1 HTML文档其中，MV.js与cuo

转

第四节 WebGL中的图形变换：旋转、平移和缩放

在WebGL中，如果我们想实现更高级的动态场景，或者是对物体进行坐标变换，那么旋转、平移和缩放必不可少。这些变换所涉及的是一些矩阵运算，先从二维平面讲起，再推导至三维空间。下面分别对这几种变换进行一个讲解：1 旋转变换试想一下，如果当一个场景只是静态的，没有动画，那将是多么令人乏味的画面，而旋转变换的加入将会使场景的动画效果更具观赏性。如下图所示，表示点(x, y)绕原点旋转一定角度后到达新的位置

转

第三节 WebGL中使用gl.drawArrays()和gl.drawElements()绘制图形

我们可能都知道，很多三维模型构成的基本单位都是三角形（三角面片），例如.stl和.obj这两种应用广泛的三维模型文件格式。再复杂的模型都可以由三角面片来组成，由此可见三角形在图形学中的重要地位。而且WebGL里面除了支持点（gl.POINTS）、线（gl.LINES、gl.LINE_STRIP和gl.LINE_LOOP），就是三角形(gl.TRIANGLES、gl.TRIANGLE_STRIP、g

转

第二节 WebGL中着色器语言(GLSL ES)的简介

转载自：https://blog.csdn.net/qq_37338983/article/details/785560631.着色器简介着色器语言(GLSL ES)由OpenGL的着色器语言GLSL简化而来， 主要是为了适应目前的移动端手持设备，例如智能手机和平板电脑，由于这些手持设备受限于硬件条件，其性能远不如电脑。这意味着对这些手持设备硬件的利用和开销就要恰到好处，故由此催生了GLSL ES

转

第一节 关于WebGL的一些基础性介绍

1.什么是WebGL百度百科给出的解释是：WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，而且不需要任何插件就可以在浏览器端运行。以上定义总结为三点： (1)

原

加速度

在最简单的匀加速直线运动中，加速度的大小等于单位时间内速度的增量。若动点的速度v1经t秒后变成v2，则其加速度可表示为：即：v2=v1+a*t动点Q做一般空间运动时，速度矢量的变化和所经时间△t的比，称为△t时间内的平均加速度(图1)，记为a平：当时间间隔△t趋于零时，平均加速度的极限称为瞬时加速度(图1)，简称加速度，记为a：因而加速度的严格定义为：加速度矢量等于速度矢量对时向的导数，其方向沿着

原

三角函数总结

正弦，余弦，正切，余切直角三角形中正弦sin：对比/斜边，值在-1.0到1.0之间余弦cos：邻边/斜边，值在-1.0到1.0之间正切tan：sin/cos=对边/邻边余切cot：cos/sin=邻边/对边角度，弧度角度转弧度： π/180×角度 弧度变角度 ：180/π×弧度60°=π / 3，90°=π / 2，180°=π，等号的左边是度数，右边是弧度。圆上的点假设一个圆的圆心坐标是(a,b

转

three.js 3D坐标转化为2D屏幕坐标

three.js 3D坐标转化为2D屏幕坐标//创建一个3D坐标var vector = new THREE.Vector3();//获取模型var obj = scene.getObjectByName(modelName);vector = vector.setFromMatrixPosition(obj.matrixWorld).project(camera);

原

第三章 从Flux到Redux——《深入浅出React和Redux》读书笔记

第3章 从Flux到Redux

原

第二章 设计高质量的React组件——《深入浅出React和Redux》读书笔记

第2章 设计高质量的React组件 作为一个合格的开发者，不要只满足于编写出了可以运行的代码，而要了解代码背后的工作原理；不要只满足于自己编写的程序能够运行，还要让自己的代码可读而且易于维护。这样才能开发出高质量的软件。 在这一章里，我们将深入介绍构建高质量React组件的原则和方法，包括以下内容： 划分组件边界的原则； React组件的数据种类； Reac

原

第一章 react新的前端思维方式——《深入浅出React和Redux》读书笔记

jQuery的方式直观易懂，对于初学者十分适用，但是当项目逐渐变得庞大时，用jQuery写出的代码往往互相纠缠，形成类似图1的状况，难以维护。图1 jQuery方式造成的纠缠代码结构 使用React的方式，就可以避免构建这样复杂的程序结构，无论何种事件，引发的都是React组件的重新渲染，至于如何只修改必要的DOM部分，则完全交给React去操作，开发者并不需要关心，

转

javascript设计模式(1)——单例模式

1. 单例模式的特点和定义保证一个类仅有一个实例，并且提供一个访问它的全局访问点。2. 传统面向对象语言的单例模式2.1 传统语言描述的单例模式JavaScript实现var Singleton = function(name) { this.name = name; this.instance = null;};Singleton.prototype.getName = functi