18211103738
- 浏览: 82844 次
- 性别:
-
最新评论
-
wxw520zdh：
msdghs 写道楼主，我下载了demo跑不起来，是哪里没设置 ...
ThreeJS加载3D模型 -
msdghs：
楼主，我下载了demo跑不起来，是哪里没设置正确么；
ThreeJS加载3D模型
文章列表
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 03</title>
<style>body {background: #000000;overflow: hidden;}</style>
<script src="js/r69/three.j ...
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 02</title>
<style>body{background: #eeeeee;overflow: hidden;}</style>
<script src="js/r69/three.js ...
效果：
代码：
<!DOCTYPE html>
<!-- The previous line tells the browser, that the page uses the HTML5 standard. -->
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 01</title>
<!-- The following meta ...
效果：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Grid</title>
<style>body{background:#eeeeee;margin:0;padding:0;}</style>
<script src="js/three.min.js"></script>
</head>
& ...
通过使用数组实现连续内存，从而提高程序加载速度，
在绘制几十万个三角形的时候让它的帧数也保持在60帧
效果：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Cube</tit ...
1.使用requestAnimationFrame
JavaScript创建动画时使用requestAnimationFrame帧动画，它很类似于setTimeOut函数，并且当标签页失去焦点时，它就不再运行
一般用法：
function render(){
//TODO
requestAnimationFrame(render);
}
render();
启动/停止的 ...
效果：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Bunny</title>
<style>body{background:#EEEEEE;margin:0;padding:0;}</style>
<script src="js/three.min.js"></script>
<script src ...
ThreeJS创建3D的基本步骤：
scene
创建场景
添加物体
添加光源
camera
创建摄像机
设置位置
//添加相机到场景中
renderer
创建渲染器
设置渲染器的大小
设置渲染器的背景
将渲染器的DOM元素添加到页面容器
进行渲染（renderer.render(scene, camera)）
-----------------------------------------
light
创建光源
设置光源的位置
添加光源到场景中
物体/角色
创建角色（var cube = new THREE.Mesh( ...
HSV颜色模型
H：色调（0°～360°，决定显示什么颜色）
S：饱和度（0.0～1.0）
V：亮度（0～1）
圆锥的顶面中心处 S=0，V=1,H无定义，代表白色。
在圆锥的顶点(即原点)处，V=0,H和S无定义，代表黑色。
在圆锥顶面的圆周 ...
1.基本概念：
WebGL中使用三维/正交/右手坐标系
三维：三个坐标轴（x轴/y轴/z轴）
正交：两两垂直
右手：x轴拇指正方向/y轴食指正方向/z轴无名指正方向
3D坐标系中原点的位置：(Vx, Vy, Vz)=(0, 0, 0)
标量：有大小无方向（如：温度/质量/能量）
矢量：有大小有方向（如：力/加速度/速度）
矢量相加/矢量相减
矢量乘以标量等于一个新的矢量：KV = (KVx + KVy + KVz)
V = (Vx, Vy, Vz)
如果K为-1，则得到一个与原矢量大小相等/方向相反的新矢量
3D空间中两个矢量相乘有两 ...
效果：
代码：
1.CubeClock.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CubeClock</title>
<style>
body,*{margin:0;padding:0;border:0;}
div{width:100%;height:100%;background:#FFFFFF;}
</style>
< ...
对象创建：
1.
//以下三种方法创建的对象是一样的，都是一个最普通的Object对象
var object = {}
var object = new Object();
var object = Object.create(Object.prototype);
创建的对象如图：
2.
/*创建一个没有原型的空对象
*这个新建的对象很可怜，他没有任何的原型
*也就是说它连Object内置的方法都没有，不能toString(),valueOf等
*/
var object = Object.create(null);
创建的对象如图：
3. ...
效果：
代码：
StringUtil.js
//去除字符串中间空格
String.prototype.Trim = function() {
return this.replace(/(^s*)|(s*$)/g, "");
}
//去除字符串左侧空格
String.prototype.LTrim = function() {
return this.replace(/(^s*)/g, "");
}
//去除字符串右侧空格
String.prototype.RTrim = function() {
...
效果：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于html5的拖拽</title>
<style>
*,html,body{border:0;margin:0;padding:0;width:100%;height:100%}
div{
width:150px;height:200px;background:#ABCEDF;float:left ...
效果：
代码：
<!doctype html>
<html>
<head>
<title>太阳系</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background-color:#000">
您的浏览器不支持canvas标签
</canvas>
&l ...