three js的使用 [问题点数:100分,无满意结帖,结帖人tianfang]

Bbs2
本版专家分:156
Blank
黄花 2017年11月 Java大版内专家分月排行榜第二
2017年9月 Java大版内专家分月排行榜第二
Blank
蓝花 2017年8月 Java大版内专家分月排行榜第三
2017年4月 Java大版内专家分月排行榜第三
2016年3月 Java大版内专家分月排行榜第三
结帖率 97.62%
Bbs1
本版专家分:0
Bbs5
本版专家分:2717
Bbs2
本版专家分:156
Blank
黄花 2017年11月 Java大版内专家分月排行榜第二
2017年9月 Java大版内专家分月排行榜第二
Blank
蓝花 2017年8月 Java大版内专家分月排行榜第三
2017年4月 Java大版内专家分月排行榜第三
2016年3月 Java大版内专家分月排行榜第三
Bbs2
本版专家分:156
Blank
黄花 2017年11月 Java大版内专家分月排行榜第二
2017年9月 Java大版内专家分月排行榜第二
Blank
蓝花 2017年8月 Java大版内专家分月排行榜第三
2017年4月 Java大版内专家分月排行榜第三
2016年3月 Java大版内专家分月排行榜第三
Bbs1
本版专家分:0
如何使用ES6开发Three.js项目(一)
如何<em>使用</em>ES6开发Three.<em>js</em>项目(一) 如何<em>使用</em>ES6开发Three.<em>js</em>项目(二) 配置开发环境:node.<em>js</em>+webpack+webpack-dev-server+babel+ES6+<em>three</em>.<em>js</em> node.<em>js</em> webpack webpack-dev-server babel ES6 <em>three</em>.<em>js</em>   1、<em>使用</em>npm安装<em>three</em>.<em>js</em>。注意安装命令是thr...
Three.js视频教程
前言 <em>使用</em>Three<em>js</em>有几年了,一直想录制一套关于<em>three</em><em>js</em>引擎的视频教程,所以想着在这里先写一个录制大纲。
three.js初级教程(一)画线
前几个星期突然接了小程序的任务,所以<em>three</em>.<em>js</em>的教程就晚点发布了。 直接上代码,先码上html和css: canvas { width: 100%; height: 100% } div#canvas-frame { border: none; cursor: pointer;
three.js入门(7)—— 各种模型探究(2)
 鉴于很多人看姿势博客基本只看个开头(从自己身上发现),所以会把后面的主要内容和重点内容先拎上来概括一下。  上一章的例子里给的图都是只有线,没有面,要么只有面,没有线,上网查了很多办法,这一章先来解决既有线又有面的问题。然后再来玩一下椎体模型、圆柱体模型和球体模型,球体模型我会重点关注,这跟我的毕设(搭建一个全景图平台)挂钩。最终所学会做成一个毕设网站,至于要不要申请域名,到时候看情况。  ...
Threejs从入门到。。。。。。。还是入门
前言 <em>three</em><em>js</em>官网:https://<em>three</em><em>js</em>.org/ github各个版本:https://github.com/mrdoob/<em>three</em>.<em>js</em>/tags 版本更迭很快,我用的时候还是r90秒秒钟r91出来了 刚入门的时候可以看看这个教程:http://www.hewebgl.com/article/articledir/1 初级教程是免费的,中高级是收费的,写的不是很枯燥...
用react vr重写threejs示例
react vr中文网:www.vr-react.com qq群:481244084 源码 github:https://github.com/LiuC520/ReactVR/tree/master/examples/<em>three</em><em>js</em> 示例不段更新中 调试安装步骤:首先进入<em>three</em><em>js</em>文件下面的具体示例中,然后打开命令输入:npm install ,安装完毕,需要修改thr
4 Three.js一个案例详解
之前根绝官网书写了两个简单的案例,今天开始写了一个教程书里面的案例。案例查看地址:http://www.wjceo.com/blog/<em>three</em><em>js</em>/2018-02-09/6.html(1)创建了渲染器,并传值对象antialias设置为true,告诉Three.<em>js</em>要启用抗锯齿(antialiased)渲染。抗锯齿可以避免绘制物体边缘时产生的锯齿。(2)创建场景。(3)创建相机,设置相机的投影视...
Three.js学习笔记-Extras(额外的部分)
Extras Earcut 实现earcut多边形三角剖分算法 方法 - triangulate(data, holeIndices, dim): Array data –垂直坐标的平面数组 holeIndices – 一组hole指数(如果有的话) dim – 输入数组中每个顶点的坐标数 ShapeUtils 一个包含形状的实用的函数 方法 - area(co...
three.js 性能插件stats简单用法
原出处:http://hewebgl.com/article/getarticle/58 话说,原出处代码居然还有语法错误,真是坑爹了,简单修改了,不多说,上代码,想说的都在注释里。 html5-canvas版本: Three框架 div#canvas-fr
79 Three.js 使用导入的模型生成粒子
简介 前几节我已经将现在一些经常<em>使用</em>的模型导入的方法。之前也接触粒子的创建。这个案例是把两者结合起来,通过导入模型获得几何体的数据,然后创建粒子。 实现案例 案例查看地址:http://www.wjceo.com/blog/<em>three</em><em>js</em>/2018-03-25/139.html 首先,引入script加载器,这里的案例是<em>使用</em>的STL格式的文件生成,所以,引入STL文件加载器 &amp;l...
three.js简介 —— 3D框架
随着HTML5的普及,网页的表现能力越来越强大,浏览器提供了WebGL接口,可以通过调用对应API进行3D图形的绘制,Three.<em>js</em>在这些基础接口之上又做了一层封装。 原文链接特点Three.<em>js</em>特点: * 掩盖了3D渲染细节 * 面向对象 * 功能丰富 * 速度快 * 支持交互 * 内置文件支持 * 拓展性强 * 同时支持HTML5、2D、Canvas动画示例<em>three</em><em>js</em>
使用React+Three.js 封装一个三维地球
良久没有写过博客了,最近忙的焦头烂额,忽略了博客,罪过罪过。今天补充一篇,前一段时间研究过的技术,<em>使用</em>React+Three.<em>js</em> 封装一个三维地球,支持鼠标的交互行为。其实也实现了对有坐标的<em>js</em>on数据展示在地球上的功能,以后会有补充。github仓库地址: https://github.com/zrysmt/react-<em>three</em><em>js</em>-app 整体做完之后的效果图: 废话少说,直接上环
103 THREE.JS 实现局部纹理刷新
前言 由于公司的项目需要增加用户体验,而且图片尺寸比较大,动不动就会大于2k,4k,甚至更高。如果直接加载这样尺寸的图片,会需要很长时间,对于用户体验十分的不友好。 所以,需要首先加载一张小图,然后将整张大图分块进行加载,这样可以<em>使用</em>户第一时间查看的到图片,并且在一定的时间内,也将分块图片加载进来,更新纹理,提高清晰度。 最初我是通过canvas画布实现,创建一块完整图片大小的画布,首先将小图加载...
WebGL着色器和Three.js自己定义后期处理着色器
WebGL着色器和Three.<em>js</em>自己定义后期处理着色器 为了渲染出一个网格的最终图像,开发者需要准确的定义顶点、变换、材质、光源以及相机是如何相互作用并最终生成图像的。而承担这个工作的就是着色器(shader)。着色器又称作可编程着色器,它是一段源码,它实现了将网格像素点投影到屏幕上的算法。图形硬件能够解析顶点、纹理以及其他底层的东西,但是并不能处理材质、光源、变换以及相机。这些高级的结构由着色...
使用vscode对threejs的代码提示
1. 最省事的办法,npm install --save @types/<em>three</em>2. my.<em>js</em> 同级目录下新建<em>js</em>config.<em>js</em>on空文件,在编辑my.<em>js</em>时就会出现提示
three.js粒子过度效果制作(二)
<em>three</em>.<em>js</em>粒子过度效果制作(二) 从图片获取粒子 下面演示的是粒子是从图片中获取的。采用的cpu的方式,普通geometry,单一颜色。 你也可以<em>使用</em>彩色图片,并<em>使用</em>彩色粒子,效果会更好一些。 步骤 创建meshGeo,这个是粒子系统的载体,,它的顶点数量决定了整个粒子的数量,这里球体(1,160,160)=25442个顶点。所以从两幅图像中离子化的顶点数量要小于该值,如果大于,就会显示...
Threejs 快速入门
现在什么都是3D,看电影3D,打游戏3D,估计3D打车,很快就会面世。那么作为前端开发的标准语言,JS和3D能不能也搞出点大新闻呢?刚好最近在做一个活动时,就遇到了需要播放3D全景视频的需求,顺便就研究了一下Three<em>js</em>,一个用于在浏览器中绘制3D图像的JS库(https://github.com/mrdoob/<em>three</em>.<em>js</em>),这篇文章算是做个笔记,也希望能帮助到那些想快速入门的同学。 最
55 - three.js 笔记 - 使用 Tween.js 实现动画效果
tween.<em>js</em>是一个小型的javaScript库,其github地址是https://github.com/tween<em>js</em>/tween.<em>js</em> 通过这个插件可以是用来定义,某个属性值之间的过渡,自动计算出起始值和结束值之间的所有中间值,这个过程叫做tweening补间。 示例: http://ithanmang.com/<em>three</em>Js/home/201808/20180829/05-anima...
three 星空穿梭,常见的星空星星移动
1.效果如下   2.实际上,这种效果在网上搜一大堆了,只是博主当时去搜索时,在很多网站找到后,需要注册它们的账号就罢了,却还要充币,而且效果也不是自己心中想的那样。于是一气之下自己写一个插件,方便自己用,这样还免费,哈哈哈~~~   3.插件代码 /* 炫酷星空背景 I am liangzhenyu 2018-05-06 */ /* <em>使用</em>方法说明: 1.此插件基于thr...
初试three.js--绘制星空
昨天上网时看到一个<em>three</em>.<em>js</em>入门教程就学着做了一下,效果如下 根据鼠标y位置粒子移动速度也会变化 Three.<em>js</em>有三种主要类型的3D对象:三角形(triangles),直线(lines)和粒子(particles)。 所有的3D对象都有材质对象,材质定义了它们是如何画出来的,颜色及透明度之类的属性。我们是这样定义的每个粒子的材质对象: 具体的做法在代码中注释了<!DOCTYPE HT
使用three.js加载3dmax资源,以及实现场景中的阴影效果
<em>使用</em><em>three</em>.<em>js</em>可以方便的让我们在网页中做出各种不同的3D效果。如果希望2D绘图内容,建议<em>使用</em>canvas来进行。但很多小伙伴不清楚到底如何为我们绘制和导入的图形添加阴影效果,更是不清楚到底如何导入我们已经制作好的3dmax资源。所以这篇教程将简要介绍如何将我们用3dmax制作好的资源导入进来,以及如何为我们导入的资源,包括所有自己绘制的图形添加阴影。也有很多小伙伴表示根本记不住这些八股文一般
Threejs 拓展之二进制数组
在Three<em>js</em> 的学习过程中,分配缓存区域时需要调用JavaScript中的Uint16Array、Float32Array等对象来分配连续的内存空间。看到Uint16Array、Float32Array时,感觉之前学了假的JavaScript。查资料发现,《ES6标准入门 第二版》的第十二章 二进制数组 详细的介绍了上面的几个对象。 二进制数组 二进制数组(ArrayBuffer
three.js入门(5)—— 辅助对象的使用、扩展一个新的基础方法调整对象参数
本来想说这一章节研究一下各种模型的,但我觉得应该将这个辅助工具单独拿出来玩一下,后面遇到难以理解的都可以开辅助,包括之前的一些可以开辅助的(估计写这个插件的人考虑到了美帝人民普遍数学比较差,空间想象能力不够用) 聚光灯和阴影那一章由于数据计算比较复杂,我正好又是个数学文盲,所以很多东西推荐大家自己体验一下。上一章说到在研究聚光光源的时候遇到一些弃用的方法,如:   light.shadow...
运用three.js写的漂浮立方
这是本人在CSDN上的第一篇文章,因为刚刚写了一个<em>three</em>.<em>js</em>的Demo,就传上来了,参考的是国外Karim Maaloul这位大佬的飞机游戏,给了我比较大的启发,和小伙伴们分享下。 <em>three</em>.<em>js</em> <em>three</em>.<em>js</em>是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。 —— [ 百度百科 ] 个人感觉这个库还是比较给力的,运用了图形建模的...
68 Three.js 导入OBJ格式和MTL的格式
简介 OBJ和MTL是相互配合的两种格式,经常一起<em>使用</em>。OBJ文件定义几何体,而MTL文件定义所用的材质。OBJ和MTL都是基于文本的格式。 Three.<em>js</em>可以很好地理解OBJ文件和MTL文件,而且Blender也支持这两种文件格式。所以作为替代方案,你也可以在Blender里选择OBJ/MTL格式的文件,而不是Three.<em>js</em>的JSON格式文件。在Three.<em>js</em>里提供两种不同的加载器。如...
使用threejs+tweenjs实现图片炸裂效果
在之前<em>使用</em><em>three</em><em>js</em>实现了点云的效果,后来想了一下还可以通过着色器修改一块板子上每个点的位置实现一些特殊的效果,比如让一个板子炸开~之前点云中点的运动轨迹都是自己计算出来的,后来发现tween<em>js</em>这个工具很好用,于是就应用到了这个项目中。   介绍项目之前,先理一理实现炸裂效果的思路        1.创建一个PlaneBufferGeometry对象方便对顶点进行处理,创建一个Shade
记一次在vue项目中加入three.js动画的探索过程
接到了一个任务,给PC端登录页面加一个动画 由于将近一年没有接触动画,查了一下,决定先学习一下<em>three</em>.<em>js</em>看能不能实现,若有时间再考虑用原生实现。 由于需要的动画在<em>three</em>.<em>js</em>官网里面有对应的例子,初步打算直接把对应的代码放在项目中 官网中对应的例子的网址是: https://github.com/mrdoob/<em>three</em>.<em>js</em>/blob/master/examples/canvas_...
23three.js加载纹理凹凸贴图和canvas画布
image.png 通过new THREE.ImageUtils.loadTexture(&quot;textures/Earth.png&quot;)的方式加载纹理。 var scene; var camera; var renderer; function init() { scene = new THRE...
Three.js入门——画星空(star field)
http://www.wukai.me/2015/11/15/star-field/ Three.<em>js</em>是一个很流行的3D JavaScript库。这里有一个<em>three</em>.<em>js</em>的入门教程,在浏览器窗口中画出星空。我按照教程重新实现了一遍,这里的这篇博客把教程大致翻译了一遍。我的demo。 变量 定义全局变量: 1 2 3 4 5 6 7 8 9 10 11
65 Three.js 使用JSON格式保存和加载整个场景
前言 本人是用开发指南里面的教程发现在新版本里面你的方法已经无法实现,所以,我们采用保存和加载模型的方法进行实现场景。 实现 案例查看地址:http://www.wjceo.com/blog/<em>three</em><em>js</em>/2018-03-18/125.html 首先,将scene场景转化为JSON对象,然后将JSON对象转换成为JSON字符串,就可以存储到本地存储。在案例当中可以通过点击export...
three.js全景视频
小生最近学习<em>three</em>.<em>js</em>,将<em>three</em>.<em>js</em>官网提供的网站实例翻译翻译,共同学习。接下来翻译一下 webgl_video_panorama_equirectangular.html 运行结果https://<em>three</em><em>js</em>.org/examples/#webgl_video_panorama_equirectangular <em>three</em>.<em>js</em> webgl - equirecta
three.js之性能检测插件(state)
关于性能:测试一个程序,性能上是否有瓶颈,在3D世界里,经常<em>使用</em>帧数的概念,首先我们来定义一下帧数的意义。 帧数:图形处理器每秒钟能够刷新几次,通常用fps(Frames Per Second)来表示 关于性能:测试一个程序,性能上是否有瓶颈,在3D世界里,经常<em>使用</em>帧数的概念,首先我们来定义一下帧数的意义。 帧数:图形处理器每秒钟能够刷新几次,通常用fps(Frames
Three.js学习笔记-Math(数学工具库)
Box2 2D空间中的盒子 构造函数 Box2(min: Vector2,max:Vector2) 方法 - containsBox(box)/containsPoint(point:Vector2)/distanceToPoint(point)/equals(box) - expandByPoint/Scalar/Vector(point/scalar/vector)/getC...
three.js入门(8)—— 天空盒研究、完善nodejs服务器、使用TrackballControls控制器
 日更停了,因为碰到了坑,这章开始,会贴近于最终的毕设来学习。有需要学习<em>three</em>.<em>js</em>的童鞋可以前往该博客 http://blog.csdn.net/birdflyto206 个人感觉这个博主对<em>three</em>.<em>js</em>的解析更加丰富透彻,毕竟他是真的做游戏的,我是做前端的哈哈。  本章开始前,先填一个之前的坑,由于之前的服务器搭建的过于脆弱,做了一定的调整,如果是从第一章开始看的朋友注意将你一直在...
使用typescript构建three.js项目
<em>使用</em>typescript开发<em>three</em>.<em>js</em>项目
three.js 07-03 之 Sprite 用外部图片格式化粒子
如果读者有读过前一篇博文,那么想改用外部图片来格式化粒子,就会显得轻而易举,非常简单,核心代码就只有这一点点: /** 从一个外部“.png”图片文件加载一幅类似雨滴的纹理图案 */ function loadTexture() { var loader = new THREE.TextureLoader(); return loader.load('./assets/textures/pa
35 Three.js的融合材质
简介 在上一节,<em>使用</em><em>three</em>.<em>js</em>的60版本,我们成功的实现了THREE.MeshDepthMaterial的案例。但是,我们没有办法修改它的材质的颜色。而一切都是由材质的默认属性决定的,但是Three.<em>js</em>库可以通过联合材质创建出新的效果(这也是材质融合起作用的地方)。 案例实现 所以,我们就需要从THREE.MeshDepthMaterial对象获得亮度,并且从THREE.Mesh...
Three.js精彩案例
Three.<em>js</em>学习笔记 – “我和小伙伴都惊呆了”的特效和Three.<em>js</em>初探 http://www.cnblogs.com/xufeiyang/articles/3181369.html本网站绝对惊艳的WebGL效果体验 http://www.hewebgl.com/article/getarticle/102
63 - three.js 笔记 - 使用骨骼和蒙皮 SkinnedMesh 制作动画
变形动画非常简单,知道所有顶点的位置,然后将每个顶点从一个位置迁移到下一个位置即可。 骨骼和蒙皮则比较复杂,<em>使用</em>骨骼来做动画时,移动一下骨骼需要迁移附着在骨骼上的皮肤以及一些列的顶点的变动。 1、示例 示例 http://ithanmang.com/<em>three</em>Js/home/201809/20180904/04-bones-manually.html 效果 这是一个手的模型,文件中...
Three.JS提升学习3:粒子
一理解粒子 <em>使用</em>THREESprite创建简单粒子 <em>使用</em>THREEPointCloud处理大量粒子 给粒子<em>使用</em>样式 <em>使用</em>HTML5画布样式化粒子 在THREECanvasRenderer中<em>使用</em>HTML5画布 在WebGLRenderer中<em>使用</em>HTML5画布 <em>使用</em>纹理样式化粒子 <em>使用</em>精灵贴图 从高级几何体创建THREEPointCloud 本文学习资源来自《Three.<em>js</em>开发
用Three.js实现简单布局的3D房间
废话不说了,直接上成果图。  代码如下 &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;房间布局&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; cont
three.js 07-06 之 Sprite 一幅图片多个精灵
前面谈到通过 THREE.Sprite 创建粒子时,可以通过加载外部图片的方式来格式化粒子。那么,如果一幅图片中包含多种精灵的话,那又该怎么办呢?     接下来我们就来探讨一下其实现方法,例如咋们有以下图片: 一幅图片中包含 5 种精灵     我首先大概来分析一下这张图片,可以看出这张图片一共有 5 种精灵,排列方式是一行平均分布,即每一种精灵在水平方向上(U 方向)都占整幅图片的
ThreeJS中文字体乱码问题
这几天刚刚接触ThreeJS,<em>使用</em>几天发现ThreeJS中默认是不支持中文的,只能显示英文,在网上找了一些资料,终于可以显示中文了。在此把显示中文的方法写下来,供大家参考,本人只是小白,大神勿喷。。。1、默认的<em>three</em><em>js</em>包中会带一些字体,在examples中里面有个font文件夹,里面是<em>three</em><em>js</em>自带的一些字体格式font问价夹里面就是这样的,默认带的字体格式是不支持中文的2、想要显示中文...
Three.js搭建环境
1、搭建一个本地服务器。2、下载<em>three</em>.<em>js</em>库。https://github.com/mrdoob/<em>three</em>.<em>js</em>/准备好前面的操作后,接下来是创建一个项目的过程。第一步:新建一个项目文件夹“Three<em>js</em>”第二步:在Three<em>js</em>文件夹内新建一个html文件(index.html)。该文件是通过浏览器进入游戏的入口。第三步:在Three<em>js</em>文件夹内新建一个libs文件夹,用来存放<em>three</em>...
33three.js用骨骼蒙皮创建动画
用骨骼蒙皮创建动画.jpg Three.<em>js</em>提供了带有蒙皮的网格对象THREE.SkinnedMesh。需要注意的是将材质的skinning属性设置为true,否则骨头不会运动的。 在练习书上的案例的时候遇到一些问题。 tween.<em>js</em>问题,版本不对总是报错。网上下载的版本也搞错了一次。压缩版的好像有版本号,正常版的没有。 Skinned...
Three.js之几何体(补充)
文字形状(TextGeometry) 下载说明 <em>使用</em>文字形状需要下载和引用额外的字体库,具体参见Three.<em>js</em> GitHub说明。 这里,我们以 helvetiker字体为例。我们在Three.<em>js</em> GitHub master/examples/fonts目录下,下载helvetiker_regular.typeface.<em>js</em>on文件放在你的目录下,然后用以下方法加载: var lo...
使用three.js的着色器通道一之渲染地球模型
我们都知道,<em>three</em>.<em>js</em>库里面内置了很多着色器通道对象供我们渲染场景,本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现:1.RenderPass这个通道会在当前场景(scene)和摄像机(camera)的基础上渲染出一个新场景,新建:let renderPass = new THREE.RenderPass(scene, camera);2....
利用three.js 实际开发的一个实例
首个<em>three</em><em>js</em>项目-前端填坑指南 第一次<em>使用</em><em>three</em><em>js</em>到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来。经过老板20天惨无人道的摧残,终于小有成就。 因为第一次搞这玩意,相对的遇到的问题也是大把的,让我来一一诉说一路上遇到的各种问题。 开发<em>使用</em>: C4D、Blender2.75、[<em>three</em><em>js</em>-r72](http:/...
ThreeJS全局安装访问不到,局部安装可以访问,非常奇怪!
npm install <em>three</em> -g  安装在node下面node_modules,此时<em>使用</em>require('<em>three</em>')访问不到npm install <em>three</em> 安装在当前工程目录下node_modules,此时<em>使用</em>require('<em>three</em>')可以访问得到
three.js入门(1)——用node.js在本地搭建最基本web环境
学习<em>three</em>.<em>js</em>为什么要搭建本地服务器?(强调一下只是一个最基本的,实际项目中,逻辑还是很复杂的,不要用下面的代码) 公:在文件夹里运行的时候发现网上的图片材质加载不出来。索性搭个服务器让它走http流程。 私:之前学的node.<em>js</em>由于长时间不<em>使用</em>,已经完全生疏了,之前有在eclipse里搭建一个tomcat服务器,各种配,各种配,各种配,配了一整天,脑廓都配爆炸了,今天花了一上午(回顾...
threejs中的坐标系
<em>three</em><em>js</em>中的坐标系 左手坐标系和右手坐标系 三维坐标系分种,左手坐标系和右手坐标系。如下图 : 左手坐标系和右手坐标系的区别只是Z轴的方向不同而已。而<em>three</em><em>js</em>中采用的是右手坐标系。 AxisHelper AxisHelper是一个坐标轴对象,添加到场景中我们就可以看到世界坐标系的具体位置。例子 : var scene = new T
three.js 多面几何体进行多面贴图 (贴图后需要再次渲染才能显现出来)
let materials = []; for (var i = 0; i &amp;lt; 6; ++i) { materials.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('../img/' + i + '.png',//图片的路径 {}, function()...
threejs添加网格辅助线grid
<em>three</em><em>js</em>.org: GridHelper( size, divisions ) GridHelper( size, divisions, colorCenterLine, colorGrid ) 按照官方文档,有2个构造函数; 4个参数分别是:网格宽度、等分数、中心线颜色,网格线颜色 默认分别是10,10,0x444444,0x888888
THREE.js-照相机(Camera)
既然是透过相机来渲染场景,那么没有相机,我们也就什么看不到了。THREE.<em>js</em>中提供了Camera类对相机这个角色进行抽象话。相机将三维的场景投影到二维的屏幕,根据投影的方式不同,THREE.<em>js</em>中提供了几种不同类型的相机。正交投影与透视投影 我们先从上面的两种图来理解正交投影与透视投影,我觉得我们可以把正交投影理解为到面的投影,投影线垂直于投影面进行投影,因此物体投影之后的比例是保持不变的。
VUE中使用three.js、通过OrbitControls控制模型、通过GLTFLoader导入外部模型
前言 网上大多数都是导入<em>three</em>.<em>js</em>简单<em>使用</em>,下载并引入<em>three</em>.<em>js</em><em>使用</em>THREE对象即可: npm install <em>three</em> --save // 下载安装的命令 import THREE from ‘<em>three</em>’ // 导入THREE对象 this.scene = new THREE.Scene() // 调用对象中的方法创建场景 基本上都不涉及控制和模型导入,只能自己瞎捉摸了好久...
Three.js进阶篇之8 - Physijs物理引擎
Three.<em>js</em>可以通过<em>使用</em>Physi<em>js</em>库向场景中加入物理效果。这个库是基于著名的物理引擎ammo.<em>js</em>。 Physiji 1.导入库文件 [html] view plain copy   Physi<em>js</em>.scripts.worker = '<em>js</em>/Physi<em>js</em>/physi<em>js</em>_worker.<em>js</em>';   Physi<em>js</em>
three.js开发指南》 笔记
3D对象基类THREE.Object3D。 第2章 <em>使用</em>构建Three.<em>js</em>场景的基础     2.1创建场景 .add(obj:Object);              在场景中添加对象 .remove(obj:Object);        在场景冲移除对象 .children();                        获取该场景所有对象数组;
Three.js呈现3D效果机房--初步方案
3D机房系统是最近用户的需求,通过相关了解最后<em>使用</em>Three.<em>js</em>,也发现最近有东西可以写出来分享: webGL可以让我们在canvas上实现3D效果。而<em>three</em>.<em>js</em>是一款webGL框架,由于其易用性被广泛应用 Three.<em>js</em>是通过对WebGL接口的封装与简化而形成的一个易用的图形库 分步实现3D效果 初始化3D模型参数 开始搭建场景 初始化渲染器 初始化摄像机 创建场景 灯光布置 创建网格线
19 Three.js实现雾化效果
案例查看地址:http://www.wjceo.com/blog/<em>three</em><em>js</em>/2018-02-12/21.html如果<em>使用</em><em>three</em>.<em>js</em>实现雾化效果很简单,只需要在给场景scene对象的fog属性添加值就好了,比如: scene.fog = new THREE.Fog(0xffffff,100,120);这样就给场景添加了雾化的效果,在实例化雾化的对象的时候,需要传三个值(雾的...
Three.js - THREE.Color颜色对象详解 (方法介绍)
转载来源: http://www.hangge.com/blog/cache/detail_1808.html 1,基本介绍 (1)在 Three.<em>js</em> 中,<em>使用</em> THREE.Color 对象来表示颜色。 (2)在构造 Color 对象时,可以<em>使用</em>十六进制字符串(&quot;#c0c0c0&quot;)或者十六进制值(0xc0c0c0)来指定颜色,还可以<em>使用</em> RGB 颜色值(0.3,0.5,0.6)。 ...
使用Three.JS以及A*寻路算法制作自动寻路场景(一)DEMO简介及环境部署
先上一波完成效果图,由于是自学,在此仅仅分享自己的一些见解,有不当之处还请大家指教! 1.DEMO简介 本DEMO<em>使用</em>Three.<em>js</em>作为主要开发工具,开发过程主要分为两个部分: 首先是<em>使用</em>Three.<em>js</em>实现A*寻路算法,效果图如下: 具体功能: 1.自动生成地图 2.根据选定开始及结束位置计算路线(涉及构造器,raycaster的<em>使用</em>) 3.播放寻路动画(requestA...
three.js SpotLight 光源产生阴影效果
不是所有的光源都可以投射阴影 ,这里<em>使用</em>聚点光源可以产生阴影  渲染器设置 // 参数:抗锯齿 this.renderer = new THREE.WebGLRenderer({antialias: true}); //告诉renderer我们需要阴影(允许阴影隐射) this.renderer.shadowMap.enabled = true; /...
three.js第三篇【简单画线】
今天简单给大家演示一下,如何绘制线条: 代码示意:                                                  // 老三样 场景scene,相机camera,渲染器render         var scene=new THREE.Scene();         // 相机         var camera
73 Three.js 导入PLY格式的模型
简介 PLY格式的全称是多边形(Polygon)文件格式,通常用来保存三维扫描仪的信息。这种格式只保存几何体数据,没有纹理颜色。 实现案例 案例查看地址:http://www.wjceo.com/blog/<em>three</em><em>js</em>/2018-03-22/133.html 首先,引入script加载器 &amp;lt;script src=&quot;/lib/<em>js</em>/loaders/PLYLoader.<em>js</em>&quot;...
threejs 通过两点生成贝塞尔曲线
三阶贝塞尔曲线 function addLines(v0, v3) { // 计算向量夹角 let angle = v0.angleTo(v3) * 270 / Math.PI / 10; // 0 ~ Math.PI let aLen = angle * 50, hLen = angle * angle * 120; let p0 = new TH...
Three.js之灯光
环境光 环境光是指场景整体的光照效果,是由于场景内若干光源的多次反射形成的亮度一致的效果,通常用来为整个场景指定一个基础亮度。因此,环境光没有明确的光源位置,在各处形成的亮度也是一致的。 在设置环境光时,只需要指定光的颜色: THREE.AmbientLight(hex) 其中,hex是十六进制的RGB颜色信息,如红色表示为0xff0000。 环境光并不在乎物体材质的color属性,而...
29 Three.js的特殊光源THREE.RectAreaLight窗口射入光线模拟
简介 这种光在整个面上均匀地发射出一个矩形平面。这可以用来模拟像明亮的窗户或带状照明的东西。 案例查看地址:http://www.wjceo.com/blog/<em>three</em><em>js</em>/2018-02-12/31.html 简单创建 由于是特殊光源,而且比较复杂,所以此灯光需要额外引入插件来创建 &amp;lt;script src=&quot;examples/<em>js</em>/lights/RectAreaLightU...
three.js入门(6)—— 各种模型探究(1)
在探究模型之前,先放一张官网的图,看一下大致有多少种模型可供<em>使用</em>。接下来两到三章应该都是针对于geometry的研究,关于material材质的研究放到后面去(发现了一个大坑) 可以看到,API文档里给出的模型大体分为两种,一种是XX模型,还有一种是XX缓存模型,之前的demo演示中我一直<em>使用</em>的是最基本的BoxGeometry(盒模型)。关于缓存几何模型的官网描述 缓存几何模型(Buffe...
threejs第十七用 merge合并
merge可以合并一些属性顶点位置 uv。。来提升性能 不过 好像不能合并纹理 。 var geometry = new THREE.Geometry(); var material = new THREE.MeshLambertMaterial({ color: 0xf33f66 }) var g = new THREE.BoxGeometry(2, 2, 2); var m = new ...
使用three.js加载obj+mtl文件
因在项目中运用到WEBGL的技术。所以研究了一下下。<em>three</em>.<em>js</em>库看来十分强大,此处为加载带材质的obj文件 1.下载相关<em>js</em>    https://<em>three</em><em>js</em>.org/     thee.<em>js</em>可去官网下载最新版本 2.搭建基本的wenGL场景 body{ margin: 0; overflow: hidden; }
怎样学习Three.js
thee.<em>js</em>封装了WebGL的接口,要想学习thee.<em>js</em>的同学我觉得至少应该知道OpenGL,WebGL还有Three.<em>js</em>之间的关系。 如果是因为正在学习图形学相关的想学习Three.<em>js</em>的话,我的建议是先学习Three.<em>js</em>的基本操作,至少对简单的功能做到可以实现,先入个门,在这推荐两个网站: 1. http://www.hewebgl.com/article/articledir/...
three.js创建地球带大气层、辉光、云层、凹凸、高光
文章目录<em>three</em>.<em>js</em>创建地球1、基本场景搭建2、添加地球3、添加轨道控制器4、添加云层5、添加大气层6、添加星空背景7、添加辉光效果8、添加轨道卫星9、TS重构10、打包发布 <em>three</em>.<em>js</em>创建地球 本教程采用<em>three</em>.<em>js</em>创建一个地球带包含材质贴图,凹凸/高光贴图,以及大气层、辉光、云层、轨道卫星、星空等效果。涉及到的知识点有: <em>three</em>.<em>js</em>基本场景 纹理贴图 轨道控制器 Shad...
86 Three.js 通过SkinnedMesh来创建骨骼和蒙皮动画
简介 变形动画十分简洁。Three.<em>js</em>知道所有目标顶点的位置,实现变形动画所要做的就是将每一个顶点从一个位置变换到另一个位置。而骨骼和蒙皮则要复杂一些。当你<em>使用</em>骨骼创建动画时,你移动一下骨骼,Three.<em>js</em>需要决定如何响应地移动相应的皮肤(一系列顶点)。 实现案例 案例查看地址:http://www.wjceo.com/blog/<em>three</em><em>js</em>/2018-04-19/147.ht...
初学three.js(一)创建立方体
1、三大组建 场景(scene)  相机(camera) 渲染器(renderer) 有这三样才能把物体渲染到页面上,才能够<em>使用</em>相机将场景渲染到网页上去 创建三要素的代码: 场景(场景是所有物体的容器,如果要显示一个苹果,就需要将苹果对象加入场景中。) 相机,只要设置不同的相机参数,就能够让相机产生不一样的效果。 定义一个相机的代码如下: 渲染器 决定了渲染...
angular项目中引入three.js
angular <em>three</em>.<em>js</em> Outline Pass 安装<em>three</em>.<em>js</em> 把<em>three</em>.<em>js</em>作为全局资源文件,放在html文件的头部 &lt;script src="./assets/<em>js</em>/<em>three</em>.min.<em>js</em>"&gt;&lt;/script&gt; //在添加下面一行代码,就可以<em>使用</em>全局的THREE了。 declare var THREE: any; npm方式安装 ...
60 Three.js 使用精灵贴图创建类似HUD层
<em>使用</em>的案例还是上一节的案例代码,由于上一节我们<em>使用</em>了两个scene和两个camera进行渲染,所以,现在我们只要查看怎么实现精灵贴图。 查看案例代码sreateSprite方法,我们可以看到,一张纹理我们直接导入了多个小怪物的图片,重点就是我们怎么切换图片。 纹理是固定的,我们可以通过map.offset和map.repeat属性,来让图片正确的显示其中的一个小怪物。 通过map.offse...
52 - three.js 笔记 - 加载 glTF 格式的文件
glTF是<em>three</em>.<em>js</em>推荐的一种文件格式,对其有很好的兼容性。 <em>使用</em>THREE.GLTFLoader()即可加载glTF 2.0格式的文件。 示例: http://ithanmang.com/<em>three</em>Js/home/201808/20180829/01-load-gltf-file.html 首先,需要引入GLTFLoader加载器 &amp;amp;lt;script src=&amp;quot;../../...
threejs第十二用 BloomPass辉光
看DEMO的名字 这个特效是参考UE4的 很炫 下面是需要的头文件 &amp;lt;script src=&quot;<em>js</em>/loaders/RGBELoader.<em>js</em>&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;<em>js</em>/loaders/HDRCubeTextureLoader.<em>js</em>&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;<em>js</em>/pmrem/PMR
基于three.js浏览全景图
引入<em>three</em>.<em>js</em>和photo-sphere-viewer.<em>js</em> &amp;lt;script src=&quot;<em>js</em>/<em>three</em>.min.<em>js</em>&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;<em>js</em>/photo-sphere-viewer.<em>js</em>&quot; type=&quot;text/javascrip
Three.js 3D打印数据模型文件(.STL)加载
对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML5(WebGL)可以用来构建3D视图、立体动画、人机交互。Three.<em>js</em>是一个主流的JS框架用来支持和简化WebGL编程。本例是一个简单的Three.<em>js</em>应用,即把一个外部可用于打印的3D标准建模文件(STL文件)载入到浏览器中绘制出来。
Three.js加载obj+mtl文件,(机房演示效果图)
压缩文件包含了一个<em>使用</em>Three.<em>js</em>框架加载obj+mtl模型文件的3d机房实例效果,可用于参考如何<em>使用</em>Three.<em>js</em>加载3dMax之类的软件做出来的obj模型文件以及mtl材质文件。可本地运行(<em>使用</em>火狐浏览器),或者开启本地服务运行也可以。
three.js一些常用的api方法(一)
/*** 场景(scene) ***/ var scene = new THREE.Scene(); // 创建场景 scene.add(x); // 插入场景 /*** 相机(camera) ***/ // 正交投影相机 var camera = new THREE.OrthographicCamera(left, right, top, bottom, ne
我的THREE.js之旅02: 使用THREE.js加载OSM的地图
之前为了做个轨迹三维可视化页面,用了vizicities.<em>js</em>来加载地图,昨前大概看了下vizicities的代码,决定自己用<em>three</em>.<em>js</em>写个demo出来。 涉及的知识点: Web墨卡托投影经纬度坐标与墨卡托投影坐标的转换OSM的地图切片,切片公式 参考链接: 墨卡托投影 地图切片公式备忘 WGS84经纬度坐标与web墨卡托之间的转换 Web(瓦片)地图的工作原理
three 环绕旋转,卫星可以各个角度绕星球旋转
1.先看看效果   2.如果是二维的话,可以根据变化角度结合三角函数就能计算从x和y坐标; 无奈,如果还是<em>使用</em>坐标改变的方式,博主不会三维数学啊,计算不出x,y和z坐标啊。 还好,过了好长时间,博主终于在网上找到了解决的方法, 就是把中心点,圆环(圆轨)和卫星三者组合成一体,再改变旋转角度   3.代码如下 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lan...
4.three.js中的坐标系
Three.<em>js</em>中的坐标系<em>three</em>.<em>js</em>中坐标系<em>使用</em>的是左手坐标系左手坐标系和右手坐标系的对比: 当然<em>three</em>.<em>js</em>中<em>使用</em>的是右手坐标系<em>three</em>.<em>js</em>中的旋转的定义但是<em>three</em>.<em>js</em>中的旋转是如何定义的呢? 在<em>three</em>.<em>js</em>中旋转<em>使用</em>的是弧度制,2π为一圈一定要注意可以用一个小部件来提示坐标var axisHelper=new axisHelper()//每个轴的长度 scene.
three.js笔记3--逻辑坐标系与画网格
1.坐标系thresJS<em>使用</em>的是右手坐标系。2.画网格&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Three框架&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;<em>js</em>/Three.<em>js</em>&quot;&amp;gt;&a
three后期处理与多通道渲染
1.设置后期处理 设置Three.<em>js</em>库为后期处理做准备,我们需要通过以下步骤对当前的配置进行修改: 1)创建一个EffectComposer(效果组合器)对象,然后在该对象上添加后期处理通道。 2)配置该对象,使它可以渲染我们的场景,并应用额外的后期处理步骤。 3)在render循环中,<em>使用</em>EffectComposer渲染场景、应用通道,并输出结果。 要<em>使用</em>后期处理,需要引入一些ja...
Three.js 阴影效果
明暗是相对的,阴影的形成也就是因为比周围获得的光照更少。因此,要形成阴影,光源必不可少。 在Three.<em>js</em>中,能形成阴影的光源只有THREE.DirectionalLight与THREE.SpotLight;而相对地,能表现阴影效果的材质只有THREE.LambertMaterial与THREE.PhongMaterial。因而在设置光源和材质的时候,一定要注意这一点。 下面,我们以
three.js学习点滴(1) — 创建场景
创建场景直接上代码 : CreateScene.html var controls; var container,stats; var camera, scene; var renderer; var mesh, zmesh, geometry; var mouseX = 0, mouseY = 0; var isShowFPS = true; initScene(
three.js兼容性检测
Detector.<em>js</em>插件的代码很短,但是功能很全, (1)判断canvas兼容。 (2)判断webgl兼容性。 (3)在页面添加不兼容提示信息。 这三个功能已经对兼容性检测足够了。<em>使用</em>方式也很简单: 首先,将插件引入到页面: &amp;lt;script src=&quot;examples/<em>js</em>/Detector.<em>js</em>&quot;&amp;gt;&amp;lt;/script&amp;gt; 然后,在<em>js</em>里面添加一个判断: &amp;lt;code ...
使用three.js画的简单的墙壁 在墙上挖了个门,做纪念
项目要用到web3d 但是webgl学习起来太麻烦,先用<em>three</em>.<em>js</em>库写这点,初期做个记录。    关于框架的基本搭建和<em>js</em>引入,场景相机等的基本添加就不说明了,随便搜一下就一堆说明,重点说下如何在墙壁上挖一个门出来。    首先<em>使用</em>了ThreeBSP.<em>js</em>的类库   然后是主要代码: var sphere1BSP = new ThreeBSP(cube);
three.js模型搭建与地图的3D可视化参考资源
    -----------------------------------------------------------------------某些资源需自备梯子------------------------------------------------------------------ https://<em>three</em><em>js</em>.org/  // 3D 开发无需怀疑的库 https://...
03 使用three.js开发全景漫游 制作单张球形全景
简介 一般网页中<em>使用</em>的全景图为两种,一种是由六张正方形图片组成的,另一种就是一整张的宽高比为2比1的全景图片。前面,第一节的案例就是一个六张正方形。今天我就实现一整张的案例文件引入。 实现思路 一张全景图都是这样的 这是一张<em>three</em>.<em>js</em>官方的全景图片。我们通过这张全景图实现全景查看。 首先我们需要一个球体的网格 var geometry = new THREE.Sphe
threejs学习笔记--各种光源
/*** 光照(light) ***/ //基础光源,它的颜色会添加到整个场景和所有对象的当前颜色 //在<em>使用</em>其他光源时同时<em>使用</em>AmbientLight,可以弱化阴影或添加一些颜色 //用色应该尽量保守,颜色过亮会导致画面颜色很快饱和 new THREE.AmbientLight(颜色); // 环境光(影响整个场景的光源) //可以只
关于SpringBoot bean无法注入的问题(与文件包位置有关)
问题场景描述整个项目通过Maven构建,大致结构如下: 核心Spring框架一个module spring-boot-base service和dao一个module server-core 提供系统后台数据管理一个module server-platform-app 给移动端提供rest数据接口一个module server-mobile-api 其中server-platform-app 与
配置管理工具-SVN下载
配置管理工具-SVN。包含了32位和64位的安装包。以及安装流程和教程。 相关下载链接:[url=//download.csdn.net/download/u013142781/9355417?utm_source=bbsseo]//download.csdn.net/download/u013142781/9355417?utm_source=bbsseo[/url]
清华组合数学答案(还能怎么详细,非要让我详细)下载
这个版本的答案(包含1-4章)比较全,但是有的好像不对,请大家查看时注意一下。 相关下载链接:[url=//download.csdn.net/download/imshhui/2015593?utm_source=bbsseo]//download.csdn.net/download/imshhui/2015593?utm_source=bbsseo[/url]
ASK系统仿真软件(课程设计版)下载
本人亲历的ASk数字信号课程设计,以C++语言编写,可实现换窗功能,可调信噪比,波形清晰。 相关下载链接:[url=//download.csdn.net/download/zhangzhanwenzzzzzz/2042928?utm_source=bbsseo]//download.csdn.net/download/zhangzhanwenzzzzzz/2042928?utm_source=bbsseo[/url]
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 js游戏开发视频 js微信开发教程
我们是很有底线的