qq_22188085的博客

three。js 例子

three.js性能优化

前言变换有三种状态：平移、旋转、缩放。当我们变换一个图形时，实际上就是在移动这个图形的所有顶点。课堂目标掌握图形变换的三种方式。可以对图像进行复合变换。知识点平移旋转缩放第一章 平移对图形的平移就是对图形所有顶点的平移。1-举个例子已知：顶点p(x,y,z)在x、y、z 三个方向上，分别将点p 移动tx、ty、tz求：点p 移动后的位置p’(x’,y’,z’)解：x'=x+txy'=y+tyz'=z+tz如果这个图形中并非只有一个顶点，而是有三个，或

前言三角形是一个最简单、最稳定的面，webgl 中的三维模型都是由三角面组成的。咱们这一篇就说一下三角形的绘制方法。课堂目标理解多点绘图原理。可以绘制三角形，并将其组合成多边形。知识点缓冲区对象点、线、面图形第一章 webgl 的绘图方式我们先看一下webgl是怎么画图的。绘制多点如果是线，就连点成线如果是面，那就在图形内部，逐片元填色webgl 的绘图方式就这么简单，接下咱们就说一下这个绘图方式在程序中是如何实现的。第二章 绘制多点在webgl

前言课堂目标使用js向着色器传递数据获取鼠标在canvas 中的webgl 坐标系位置知识点attribute 变量gl.vertextAttribute3f() 的同族函数鼠标在canvas 中的css 位置转webgl 坐标位uniform 变量gl.uniform4f() 的同族函数第一章 用js控制一个点的位置1-attribute 变量的概念。回顾一下我们上一篇中点的定位：gl_Position = vec4(0,0,0,1);这是一种将数据写死了的硬编码，缺

前言课前准备安装webstorm 或vscode 开发工具。安装live-server，用于启服务，安装方法 npm i -g live-server需掌握es6、html、css 的基础知识。数学基础，三角函数和向量（非必须）。课堂目标对webgl 的概念有一个整体认知掌握webgl 基本绘图原理和流程知识点webgl 概述webgl 最短教程 - 在画布上刷底色webgl 最简单图形 - 画一个点第一章 webgl概述1-webgl是什么？webgl 是在网页上