ubee 发布的文章
-
ThreeJS学习笔记(五)——二维几何体元素及穿梭动画
二维几何体 ThreeJS可以创建三种二维几何体，包括CircleGeometry（圆形），PlaneGeometry（矩形），ShapeGeometry（自定义形状）。 创建二维几何体和创建三维几何体差不多,同样由形状和材质两个参数，拥有的属性也和三维几何体一样。 new THREE.Mesh(new THREE.PlaneGeometry(width, height, 1, 1 ),new THREE.MeshBasicMaterial(MaterialParam )); 需要注意的是，由于贴图的尺寸必须是(2的幂数)X (2的幂数)，如：1024*512，所以为了防止贴图变形......
-
ThreeJS学习笔记(四)——粒子系统
粒子和粒子系统 Threejs中制作粒子效果有两种方法： THREE.Particle和THREE.ParticleSytem 如果项目使用的渲染器是CanvasRenderer,直接使用THREE.Particle创建完粒子即可直接添加到scene中，但是如果使用的是WebGlRenderer渲染器，那就要先创建THREE.ParticleSytem对象，然后通过这个对象来创建粒子。PatricleSystem具有形体和材质两个属性，因此使用PatitlceSystem可以借助几何体生成粒子，也可以先创建一个由多个点构成的形体后去创建粒子。 THREE.Sprite ......
-
ThreeJS学习笔记(三)——三维空间用户交互与动画
拾取器raycaster ThreeJS提供了一个 raycaster的API用于返回用户光标所在位置的所有3维元素，它的实现原理是在屏幕上某个二维坐标点与相机位置和视角形成的向量方向上投射一条射线，返回与射线相交的所有三维物体的集合，集合的第一个物体为距离相机最近的物体，最后一个则为离相机最远的。 当使用拾取器去获取用户点击的物体时，需要事先将所有可参与用户交互的三维物体放到一个集合里。在创建拾取器后获取两个集合的交集，即当前用户在屏幕点击的位置上所有被设置为可被选择的物体，第一个即可视为用户直接点击的物体。 拾取器示例 以下代码段实现当用户鼠标移动到object1和object......
-
#ThreeJS学习笔记( 二)——导入外部模型
外部模型格式 Threejs支持了许多格式的3D模型导入，包括*.obj、 *.sea、*.3mf 、*.amf、*.sea、*.pmd、*.json等。 这里主要讲解一下obj模型的导入，及将obj文件转成文件更小的json格式导入。 导入obj模型 3Dmax格式转换成obj格式 美术提供的一般为3Dmax项目文件夹，里面包含了.max文件以及贴图图片等资源，用3DMAX打开.max文件可以看到3D模型 如图： 点击菜单里的导出,选择obj格式,点击保存后出现选项 导出比例：几何体选项里的输出比例，默认是1.0，我们根据模型的分辨率，以及需要在网页上呈现的分辨率设置一......
-
Threejs学习笔记(一) 基础篇
基本概念 此学习笔记主要记录使用threejs的制作http://sqace.163.com网站中用到的API和相关知识点。 一个完整的3D环境包含以下元素: 1.场景(Scene)：是物体、光源等元素的容器， 2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机 3.物体对象（Mesh）：包括二维物体（点、线、面）、三维物体、粒子 4.光源（Light）：包括全局光、平行光、点光源 5.渲染器（Renderer）:指定渲染方式，如webGL\canvas2D\Css2D\Css3D等。 6.控制器(Control): 相机控件，可通过......
-
记天下手游移动官网踩的坑
周末两天加班制作天下手游移动官网。如下图 git地址为：http://git-wz.gz.netease.com/tx/tx-gw-m-16v1 地址：http://tx.163.com/index.html（在你看到的时候有可能会新版替换） 在制作过程一直到上线在ios下的动画表现都很顺畅。然而上线后第二天，就有编辑来说部分安卓机卡爆了。尝试去掉视差组件parallax.js，小米4卡的程度减轻，但是还是看不了首屏七字动画，而且小米note,红米依然卡。卡到每一次界面有动画就是直接以方格形式从下往上从左往右渲染出动画的最终画面，而看不到动画的过程。 没得说，开始找问题。......
