WebGL
文章平均质量分 77
iteye_3742
这个作者很懒,什么都没留下…
展开
-
html5实现的旋转立方时钟(基于three.js)
效果: 代码:1.CubeClock.html<!doctype html><html> <head> <meta charset="utf-8"/> <title>CubeClock</title> <style> body,*{margi原创 2014-12-31 11:29:26 · 413 阅读 · 0 评论 -
使用MorphAnimMesh实现ThreeJS动画
效果: 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Morph-Bird</title> <style>body{background:#eeeeee;margin:0;原创 2015-01-19 22:15:35 · 443 阅读 · 0 评论 -
使用MorphAnimation实现ThreeJS动画
效果: 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Horse</title> <style>body{background:#eee;margin:0;padding:0;原创 2015-01-19 22:12:08 · 421 阅读 · 0 评论 -
通过改变morphTargetInfluences实现物体变形
在three.js中morphTargets允许物体发生变形。如果该物体的geometry有 n 个顶点,那么MorphTargets允许你再指定 n 个, 2n 个, 3n 个甚至更多个顶点(比如,p⋅n 个),同时mesh对象提供一个数组morphTargetInfluences(公式中fj表示morphTargetInfluences[j]),具有 p 个元素,每个元素取值在0-1之间。...原创 2015-01-19 21:48:04 · 865 阅读 · 0 评论 -
ThreeJS系列教程-Lesson7
效果: 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 07</title> <style>body{background:#原创 2015-01-17 11:55:27 · 106 阅读 · 0 评论 -
ThreeJS系列教程-Lesson6
效果: 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 06</title> <style>body {background:原创 2015-01-10 16:34:39 · 140 阅读 · 0 评论 -
ThreeJS系列教程-Lesson5
效果: 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 05</title> <style>body{background:#ee原创 2015-01-09 21:47:04 · 104 阅读 · 0 评论 -
ThreeJS系列教程-Lesson4
效果: 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 04</title> <style>body{background:原创 2015-01-09 21:42:11 · 104 阅读 · 0 评论 -
ThreeJS系列教程-Lesson3
效果: 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 03</title> <style>bo原创 2015-01-09 18:57:44 · 147 阅读 · 0 评论 -
ThreeJS系列教程-Lesson2
效果: 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 02</title> <style>bo原创 2015-01-09 18:55:30 · 120 阅读 · 0 评论 -
ThreeJS系列教程-Lesson1
效果: 代码:<!DOCTYPE html> <!-- The previous line tells the browser, that the page uses the HTML5 standard. --> <html> <head> <meta charset="utf-8"/> &..原创 2015-01-09 18:53:14 · 155 阅读 · 0 评论 -
ThreeJS画网格及其它
效果: 代码:<!doctype html><html> <head> <meta charset="utf-8"/> <title>Grid</title> <style>body{background:#eeeeee;margin:0;padding:0原创 2015-01-07 18:24:16 · 320 阅读 · 0 评论 -
3D加载程序的性能优化
通过使用数组实现连续内存,从而提高程序加载速度,在绘制几十万个三角形的时候让它的帧数也保持在60帧 效果: 代码:<!doctype html><html> <head> <meta charset="utf-8"/> <title>Cube</title> &原创 2015-01-06 22:17:24 · 236 阅读 · 0 评论 -
ThreeJS加载3D模型
效果: 代码:<!doctype html><html> <head> <meta charset="utf-8"/> <title>Bunny</title> <style>body{background:#EEEEEE;margin:0;padding原创 2015-01-05 15:24:55 · 995 阅读 · 0 评论 -
ThreeJS创建3D的基本步骤及相关知识
ThreeJS创建3D的基本步骤: scene创建场景添加物体添加光源 camera创建摄像机设置位置//添加相机到场景中 renderer创建渲染器设置渲染器的大小设置渲染器的背景将渲染器的DOM元素添加到页面容器进行渲染(renderer.render(scene, camera)) ---------------...原创 2015-01-05 15:07:44 · 258 阅读 · 0 评论 -
HSV颜色模型
HSV颜色模型 H:色调(0°~360°,决定显示什么颜色)S:饱和度(0.0~1.0)V:亮度(0~1) 圆锥的顶面中心处 S=0,V=1,H无定义,代表白色。在圆锥的顶点(即原点)处,V=0,H和S无定义,代表黑色。在圆锥顶面的圆周上的颜色,V=1,S=1,这种颜色是纯色。 色调H用角度度量,取值范围为0°~360°,从红色开始按逆时针方向计算...原创 2015-01-04 18:02:02 · 638 阅读 · 0 评论 -
线性代数及三维旋转矩阵(与3D和WebGL相关)
1.基本概念:WebGL中使用三维/正交/右手坐标系 三维:三个坐标轴(x轴/y轴/z轴)正交:两两垂直右手:x轴拇指正方向/y轴食指正方向/z轴无名指正方向 3D坐标系中原点的位置:(Vx, Vy, Vz)=(0, 0, 0) 标量:有大小无方向(如:温度/质量/能量)矢量:有大小有方向(如:力/加速度/速度) 矢量相加/矢量相减 矢量乘...原创 2015-01-02 11:57:29 · 1112 阅读 · 0 评论 -
使用Animation实现ThreeJS动画
第一步:画地面,并让地面旋转,以便观察效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Knight</title> <style>body{background:#f原创 2015-01-21 16:33:45 · 1175 阅读 · 0 评论