three
文章平均质量分 58
qq_38694034
这个作者很懒,什么都没留下…
展开
-
正片叠低后图像边缘有白边
在做项目的时候,要做一个正片叠低的效果,当做完后发现一个不可思议的效果。图片边缘有描边,如下最后在webglRender中添加了该属性后, var renderer = new THREE.WebGLRenderer({premultipliedAlpha: false}) 后完美解决,解决后效果如下那么这个属性到底是干什么呢,,下面是我的一些理解:premultipl原创 2018-01-24 18:15:04 · 573 阅读 · 0 评论 -
three 中 shadow的常用参数
当我们投射阴影的时候如果想调节阴影的清晰度:可以将 shadow.mapSize 设置为更大的值: light.shadow.map.width = light.shadow.map.height = 1024 // 还可以选的值 128,256,512,2048等当我们投射阴影的时候如果想调节阴影的大小:可以设置 shadow.camera 的参数:var d = 50;light.s...原创 2018-04-04 17:28:05 · 1286 阅读 · 0 评论 -
three 蒙皮动画核心过程
简介: 蒙皮动画:通过模拟人的运动来模拟3D物体的动画,游戏中也经常使用。制作蒙皮动画的主要过程和注意点:1. 制作蒙皮骨骼: var material = new THREE.MeshBasicMaterial({color: 0xfff000,wireframe:true,skinning : true}); mesh = new THREE.SkinnedMes...原创 2018-04-10 16:03:53 · 505 阅读 · 0 评论 -
camera中lookAt的理解
camera为相机看的目标点:因为屏幕显示的是相机视椎体的可视范围,而相机的lookAt方法指的是相机观察的目标点,故可以得出:相机lookAt的点一定显示在屏幕的正中央:利用这点,我们可以实现物体移动时,我们可以一直跟踪物体,让物体永远在屏幕的中央:一下是代码实现<!doctype html><html lang="en"><head> <meta...原创 2018-03-26 19:54:38 · 12908 阅读 · 0 评论 -
geometry 的偏移(translate)和mesh的偏移的区别
geometry中的偏移,是物体的网格偏移了,,但是物体的世界的坐标还在原来的位置:这样可以很简单的实现一个绕着世界坐标的中心点旋转的物体效果:1. 怎么实现物体绕这世界坐标的中心点旋转:实现的思路是:网格(geometry)先偏移(translate),以后生成网格物体(mesh),最后网格旋转,实现代码如下:var geo = new THREE.BoxGeometry(10,10,10);...原创 2018-03-26 19:24:38 · 3334 阅读 · 2 评论 -
相机的视椎体范围就是屏幕显示的范围
1.计算机屏幕显示的是相机视椎体的范围:如下: 对于透视相机,当我设置camera为如下参数:camera = new THREE.PerspectiveCamera(20,width/height,1,1000);屏幕的显示效果如下:当我设置相机的参数如下:camera = new THREE.PerspectiveCamera(60,width/height,1,1000);效果如下:视角改...原创 2018-03-26 19:21:06 · 1274 阅读 · 0 评论 -
场景快速切换放大到某一部分
简介我们在做直播的时候,可能场景中某左下角突然出现了一个非常惊人的意外,那么我们怎么能快速的切换到场景的左下角呢?案例实现过程图解 《1》。首先添加全景图,如上所示,场景x轴,z轴分为四个象限,分别在各个象限中添加不同颜色的方块《2》。点击 w键,页面切换到第四象限,也就是红色区域效果如下:《3》点击s键切换到第二象限的位置:《4》同理点击a切换到白色方块,点击d键切换到黄色方块区域: ...原创 2018-03-30 11:13:12 · 481 阅读 · 0 评论 -
webgl中的基本坐标系统
在构造和显示场景的过程中会使用几个不同的笛卡尔坐标系:建模坐标系(几部坐标系): 在各自的坐标系统中构造每一个对象的形状,比如自己构造的车,树,花等模型。世界坐标系:一旦构建好模型后,就可以将对象放到称为世界坐标系的场景参考系的相应位置。这一步涉及到单独的局部坐标系到世界坐标系的指定位置和方向的变化。观察流水线:在描述完场景之后,要将该场景中的世界坐标系经过各种处理转化到一个或多个输出设备的坐标系...翻译 2018-03-14 13:07:38 · 1821 阅读 · 0 评论 -
three中的renderer剪刀(setScissor,setScissorTest)的用法
这里不多介绍,给你们推介以下可以参考的资料:https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_views.html点击打开链接http://tmp.linhongxu.com/learnThreejs/cameras.html ...翻译 2018-03-15 16:13:54 · 1495 阅读 · 0 评论 -
three Quaternion 源码解读
//Quaternion 执行一个四元数。这是用来旋转的东西, 而不会遇到可怕的 万向节锁问题等优点。function Quaternion( x,y,z,w ) {原创 2018-02-06 14:50:41 · 1304 阅读 · 0 评论 -
为什么three中position,scale,rotation, quaternion, modelViewMatrix ,normalMatrix 等属性 直接修改属性值失败
在以前做项目的时候,我想改一个Mesh的顶点值为鼠标点击的坐标,直接设置设置失败,原因是这样的,以下是源码:Object3D 对象中:Object.defineProperties( this, { position: { enumerable: true, value: position }, rotation: {原创 2018-02-05 17:03:23 · 2123 阅读 · 0 评论 -
three 源码解析之 Euler
// 欧拉角function Euler( x,y,z,order ) { // 自定义 x,y,z,order,并且设定默认值 this._x= x ||0; this._y= y ||0; this._z= z ||0; this._order= order || Euler.DefaultOrder; // 默认值可以修改原创 2018-02-06 12:34:15 · 393 阅读 · 0 评论 -
webgl 中 WebGL 源码的阅读过程
总体的思路(可能有的翻译不是很准确,主要看代码思维)总体架构:1. 申明变量,并且赋值canvas,3d各种值的默认值(默认值具体看canvas 3D API,可以参考的网址: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)varREVISION ='88';var MOUSE原创 2018-02-02 18:36:16 · 1157 阅读 · 0 评论 -
EventDispatcher 的yuan解读
//事件触发类function EventDispatcher() {}// Object.assign 合并对象Object.assign(EventDispatcher.prototype,{ // addEventListener 添加方法给 this._listeners 对象,最终的结果是 this._listeners = {"click":[funct原创 2018-02-05 15:15:10 · 225 阅读 · 0 评论 -
ajax bufferarray three中loader的实现原理
ajax的返回数据的类型有五中,,在研究three的loader的时候,突然发现ajax返回的数据还有arrayBuffer数据类型,以前我只知道返回文本,,于是我查阅资料,总结了一下,,以下是我的总结:responseType的值如下五中:《1》“ ”和 "text" 字符创(默认) 《2》“arraybuffer” ArrayBuffer原创 2018-01-26 19:00:07 · 459 阅读 · 0 评论 -
texture中的 anisotropy属性,纹理的各向异性
定义:anisotropy: 沿通过具有最高纹理像素密度的像素的坐标轴取样的数量。默认情况下,此值为1.较高的值会产生比基本mipmap更少的模糊结果,但需要使用更多纹理样本。使用renderer.getMaxAnisotropy()来查找GPU的最大有效各向异性值; 这个值通常是2的幂。这样能实现什么效果呢:如果大家想让物体缩小的时候,任然比较清晰,可以将 anisotropy: 设大;我们看一...原创 2018-04-04 17:36:19 · 4604 阅读 · 0 评论