qq_21476953的博客

原创 030-ThreeJS 服务端(node.js)渲染

用node.js 渲染 Three.js。首先,安装依赖:package.json{... "devDependencies": { "pngjs": "^3.4.0", "three": "^0.112.1", "three-software-renderer": "https://github.com/lanceschi/three-software-rend...

原创 扇形

参考:https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.htmlhttps://www.jianshu.com/p/5f6d0cd75443文本代码 中的第24篇。024-模拟ThreeJS扇形几何体1、网格(Mesh)在ThreeJS中3D物体的网格(Mesh)由几何体(G...

原创 ThreeJS 给 Shader传参

参考:https://www.cnblogs.com/softimagewht/p/4750847.htmlThreeJS 给 Shader传参一、Shader三种变量类型（uniform, attribute 和varying）1、uniform顶点着色器和片元着色器都可以使用一般用来传递：变换矩阵，材质，光照参数和颜色等信息用法: 外部(js)给着色器传数据// 着色器...

原创 ThreeJS计算工具

出处ThreeJS计算工具three-utils.js1、获取任意深度的可见视野这两个功能将为您提供距PerspectiveCamera给定距离的场景中可见的高度和宽度。// 获取任意深度的可见视野// from https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-...

原创 投影纹理

教程投影纹理1、投影纹理将相机矩阵和模型矩阵相乘,最后得到纹理采样坐标:顶点着色器:uniform mat4 viewMatrixCamera;uniform mat4 projectionMatrixCamera;varying vec4 vTexCoords;void main() { ... // in: position,顶点局部坐标 // in: mode...

原创 模拟ThreeJS相机

WebGL 对于我来说操作太繁琐了;ThreeJS太方便了,但是相关的数学计算也封装起来了,但是这一部分又很重要,所以通过ThreeJS 来学习底层相机的实现。这是一篇学习笔记,学习的内容出自:代码,教程。更多的代码也来自ThreeJS库。WebGL本不存在相机,想的多了也就有了。模拟ThreeJS相机1、着色器代码glsl.fragmentShader.jsexport ...

原创 ThreeJS 中显示小窗口

参考ThreeJS 中显示小窗口这种效果的主要代码:function initStage() { ... // 不要自动清除 renderer.autoClear = false; renderer.setClearColor(0x000000, 0.0); // 创建2个相机 mainCamera, viceCamera ...}// 循环渲染函数functio...

原创 ThreeJS中CameraHelper的使用

代码参考ThreeJS中CameraHelper的使用想达到这种效果,都必须使用2个相机。一个是屏幕相机,最终投影成像在屏幕一个是带相机助手的相机就如上图2所示,屏幕相机的投影是整个屏幕(左右两个小窗口共同组成),带相机助手的投影是左面的画面。伪代码:// 屏幕相机let camera = new THREE.PerspectiveCamera(45, 1, 0.01, 3...

原创 006-剪裁-CohenSutherland

原创 005-绘制多边形-区域填充

原创 004-绘制多边形-X扫描转化

原创 overflow:scroll无效

可能是禁用了页面滚动:// 禁止浏览器滚动页面let edit2d = document.querySelector(".edit2d");edit2d.addEventListener("touchmove", e => { e.preventDefault();});<全文结束>...

原创 003-画线算法-Bresenham

原创 002-中点画线法

代码基于Three.js参考:【1】计算机图形学基础教程(第一版)-课件【2】 中国大学MOOC 中国农业大学 计算机图形学课程【3】中点画线法代码地址: https://github.com/dslming/learningComputerGraphics/tree/master/002-中点画线法采用增量思想的DDA算法,虽然只需计算一个加法,但是是浮动数加法。1、基本原理...

原创 001-画线算法-DDA