![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Three.js
文章平均质量分 51
King.W.
这个作者很懒,什么都没留下…
展开
-
Three.js的轻量级封装框架Sim.js解析(1)
这段事件在看《WebGL入门指南》,其中使用的Three.js的轻量级封装框架,本来使用Three.js框架就有点困难,还要使用Three.js的框架,OMG~~~发牢骚归发牢骚,不看是不会懂的。初看书本上的Sim.js写出的代码,第一感觉,这都写的是啥啊。的确,要看懂这些,要求对js的面向对象的思想有一定的了解。下面是本人先学先卖总结的有关js面向对象的知识,仅供参考: http://blog.原创 2016-03-13 13:17:10 · 3426 阅读 · 0 评论 -
GetTickCount/QueryPerformanceFrequency/QueryPerformanceCounter
DWORD GetTickCount(void); 1) 定义在Release版本中,该函数从0开始计时,返回自设备启动后的毫秒数(不含系统暂停时间)。在Debug版本中,设备启动后便从计时器中减去180秒。这样方便测试使用该函数的代码的正确溢出处理。返回值:如正确,返回毫秒数。头文件: Winbase.h. 链接库: Coredll.lib.2) 应用用来计算某个操作所使用的时间:转载 2016-08-24 09:09:02 · 536 阅读 · 0 评论 -
04.ThreeJs开发指南-第四章-材质
第四章 材质材质种类: MeshBasicMaterial:为几何体赋予一种简单的颜色,或者显示几何体的线框 MeshDepthMaterial:根据网格到相机的距离,该材质决定如何给网格染色 MeshNormalMaterial:根据物体表面的法向量计算颜色 MeshFaceMaterial:这是一种容器,可以在该容器中为物体的各个表面上设置不同的颜色 MeshLambertMater原创 2016-09-02 15:20:30 · 9813 阅读 · 2 评论 -
05.ThreeJs开发指南-第五章-几何体
第五章 学习使用几何体二维几何体:一、PlaneGeometry:平面var plane = new THREE.PlaneGeometry(width,height,widthSegments,heightSegments);width: 必须,矩形宽度 height:必须,矩形高度 widthSegments:可选,指定矩形的宽度应该划分成几段。 heightSegments:可选,指定矩原创 2016-09-02 15:22:52 · 6004 阅读 · 1 评论 -
06.ThreeJs开发指南-第六章-高级几何体
第六章 高级几何体一、ConvexGeometry:凸面体在一组点外面建立一个凸包。function generatePoints(){ var points = []; for(var i = 0; i<20;i++){ var randomX = -15 + Math.round(Math.random() * 30); var randomY =原创 2016-09-02 15:24:38 · 6470 阅读 · 0 评论 -
07.ThreeJs开发指南-第七章-粒子系统
第七章 粒子系统function createParticles(){ var meaterial = new THREE.ParticleBasicMaterial(); for(var x = -5 ; x < 5 ; x ++){ for(var y = -5 ; y < 5 ; y ++){ //手动创建一个粒子,只需传递一个材质即可。还材质可以原创 2016-09-02 15:26:27 · 8901 阅读 · 0 评论 -
08.ThreeJs开发指南-第八章-加载外部模型
第八章 创建、加载高级网格和几何体对象的组合当从一个几何体中创建网格,并使用多种材质时,Three.js就会创建一个组。该几何体的多个副本就会添加到这个组里,每份副本都有自己特定的材质。我们看到的结果是,一个网格拥有多个材质,实际上它是一个包含多个网格的组。sphere = createMesh(new THREE.SphereGeometry(5,10,10));cube = createMes原创 2016-09-02 15:28:13 · 14758 阅读 · 3 评论 -
09.ThreeJs开发指南-第九章-创建动画和移动相机
第九章 创建动画和移动相机基础动画:render();function render(){ renderer.render(scene,camera); requestAnimationFrame(render);//通常保持60/s的帧率渲染}一、简单动画复杂动画的基础function render(){ cube.rotation.x += controls.rotati原创 2016-09-02 15:30:59 · 11209 阅读 · 0 评论 -
10.ThreeJs开发指南-第十章-加载和使用纹理
第十章 加载和使用纹理在材质中使用纹理function createMesh(geom,imageFile){ var texture = THREE.ImageUtils.loadTexture('../assets/textures/general/' + imageFile); var mat = new THREE.MeshPhongMaterial(); mat.map原创 2016-09-02 15:32:45 · 12716 阅读 · 2 评论 -
03.ThreeJs开发指南-第三章-光源
第三章环境光:AmbientLight 点光源:PointLight 聚光灯:SpotLight 方向光:DirectionalLight:无限光,例如太阳光,平行光 半球光:HemisphereLight:模拟更加自然的室外光线,反光面,光线微弱的天空 面光源:AreaLight 镜头眩光:LensFlareAmbientLight:影响整个场景的光源 光源没有特定的来源,不能产生阴原创 2016-09-02 15:16:59 · 4124 阅读 · 0 评论 -
02.ThreeJs开发指南-第二章-场景
第二章创建中的基本组件: 1.相机 2.光源 3.物体创建渲染的时候,相机会自动加载到场景中。当然啦,你也可以手动添加。相机,光源等,只要添加到场景中都算是物体。 scene.add(obj); scene.children 数组,元素是obj obj instanceof THREE.MESH 当然还有光源和相机 Scene.getChildByName(name) scen原创 2016-09-02 15:14:47 · 3086 阅读 · 0 评论 -
01.ThreeJs开发指南-第一章
第一章不同的材质对光源的反应并不相同。材质: (1)MeshBasicMaterial,简单的给物体着色。 (2)MeshLambertMaterial (3)MeshPhongMaterial(2)(3)可以根据光源进行着色。默认情况下,ThreeJs不产生阴影,需要进行大量计算。renderer.shadowMapEnabled = true;需要指定接受投影的物体,和产生投影的物体。不是原创 2016-09-02 15:12:00 · 1728 阅读 · 0 评论 -
自己封装ajax
/** 全局ajax对象 */var ajax = new Object();var ajaxCore = null;/** * @see 创建ajax核心对象,兼容浏览器有:IE6,7,8,9,谷歌,火狐,欧朋,360极速,360安全,苹果,搜狗,遨游,猎豹,腾讯 * @return XMLHttpRequest */ajax.getCore = function() { va原创 2016-06-07 20:48:14 · 2561 阅读 · 0 评论 -
Three.js控制相机
先看效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手动旋转相机</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript原创 2016-08-03 14:19:46 · 5400 阅读 · 1 评论 -
three.js手写缩放
效果图: 其实就是手动修改相机的fov参数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手动旋转相机</title> <script type="text/javascript" src="../libs/three.js"></script> <script type=原创 2016-08-04 09:10:45 · 2305 阅读 · 1 评论 -
three.js绕边缘旋转
dummy = new THREE.Object3D(); plane = new THREE.Mesh(new THREE.PlaneGeometry(100,100),new THREE.MeshBasicMaterial({color:0xff0000})); plane.position.set(50,0,0); dummy.add(plane)转载 2016-08-04 10:02:11 · 4803 阅读 · 0 评论 -
OrbitControl 旋转
原文地址: http://www.cnblogs.com/hundan/p/3614542.html?utm_source=tuicool&utm_medium=referral#undefined一、摘要分析了OrbitControl的基本原理。二、资源源码地址:三、分析最外层框架:OrbitControl 为函数对象,原型处理THREE.OrbitControls = function ( o转载 2016-08-04 11:11:00 · 5421 阅读 · 0 评论 -
Three.js自定义相机旋转动画:沿圆弧旋转
/* *camera:相机 *angle:旋转角度 *segs:分段,即圆弧对应的路径分为几段 *during:动画执行的时间 */ function myCameraTween(camera, angle, segs, during) { var x = camera.po原创 2016-08-17 09:41:36 · 14972 阅读 · 3 评论 -
Three.js中添加指南针
本例在three.js中添加一个指南针。前提: 1.three.js中场景的控制是使用OrbitControl控制相机,换言之,世界坐标系的旋转其实转动的是相机,即相机的转向即为世界坐标系的转向。本利以z轴负方向为正北方向,只考虑XOZ平面的方向。2.使用一个jQuery旋转库:http://blog.csdn.net/sinolzeng/article/details/403776373.在ht原创 2016-08-22 09:35:02 · 5179 阅读 · 1 评论 -
Three.js使用OrbitControl重置相机
1.初始化的时候保存相机参数var camToSave = {};camToSave.position = camera.position.clone();camToSave.rotation = camera.rotation.clone();camToSave.controlCenter = controls.center.clone();2.写一个重置相机的函数其中最主要的就是重置Orb原创 2016-08-23 14:56:55 · 2692 阅读 · 0 评论 -
Three.js 添加小地图
题目真的好取,效果就下面酱紫的。ps:哪位看官有好的题目,留言,我改。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../libs/three.js"></script>原创 2016-08-19 17:05:26 · 8592 阅读 · 4 评论