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 · 388 阅读 · 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 · 423 阅读 · 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 · 390 阅读 · 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 · 820 阅读 · 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 · 91 阅读 · 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 · 126 阅读 · 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 · 91 阅读 · 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 · 93 阅读 · 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 · 132 阅读 · 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 · 112 阅读 · 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 · 136 阅读 · 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 · 280 阅读 · 0 评论 -
3D加载程序的性能优化
通过使用数组实现连续内存,从而提高程序加载速度, 在绘制几十万个三角形的时候让它的帧数也保持在60帧 效果: 代码: <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Cube</title> &原创 2015-01-06 22:17:24 · 224 阅读 · 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 · 974 阅读 · 0 评论 -
ThreeJS创建3D的基本步骤及相关知识
ThreeJS创建3D的基本步骤: scene 创建场景 添加物体 添加光源 camera 创建摄像机 设置位置 //添加相机到场景中 renderer 创建渲染器 设置渲染器的大小 设置渲染器的背景 将渲染器的DOM元素添加到页面容器 进行渲染(renderer.render(scene, camera)) ---------------...原创 2015-01-05 15:07:44 · 238 阅读 · 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 · 574 阅读 · 0 评论 -
线性代数及三维旋转矩阵(与3D和WebGL相关)
1.基本概念: WebGL中使用三维/正交/右手坐标系 三维:三个坐标轴(x轴/y轴/z轴) 正交:两两垂直 右手:x轴拇指正方向/y轴食指正方向/z轴无名指正方向 3D坐标系中原点的位置:(Vx, Vy, Vz)=(0, 0, 0) 标量:有大小无方向(如:温度/质量/能量) 矢量:有大小有方向(如:力/加速度/速度) 矢量相加/矢量相减 矢量乘...原创 2015-01-02 11:57:29 · 1038 阅读 · 0 评论 -
使用Animation实现ThreeJS动画
第一步: 画地面,并让地面旋转,以便观察 效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Knight</title> <style>body{background:#f原创 2015-01-21 16:33:45 · 1153 阅读 · 0 评论