threejs
文章平均质量分 66
目尽地平线
踏尽青山寻前路,寻遍千家无归处
展开
-
Threejs性能监视和可视化控制
概述性能监视是监视threejs运行中的刷新频率,要使用到threejs提供的stat.js,可视化控制是在窗口中显示一个可见的控制框,可以通过鼠标改变其中的值,达到改变threejs对象参数的目的原创 2016-08-16 01:22:05 · 5533 阅读 · 0 评论 -
threejs设置对象层次
threejs提供了层次的支持。和相机处于同一层次的对象可见,否则不可见。在threejs中,最多可以设置32层,默认的层次是1。层次在有些系统中很有用,可以将不同的模式的对象设成不同的层次,这样,切换模式就只需切换一下相机的层次就可以了。原创 2017-03-05 21:06:36 · 8449 阅读 · 0 评论 -
threejs渲染器剔除模式
渲染器剔除模式渲染器可以设置成舍弃某些面,如前面、背面等。默认情况下,是剔除掉背面,也就是背对着相机的面。原创 2017-03-05 21:08:06 · 6569 阅读 · 3 评论 -
threejs向量夹角和夹角方向
计算threejs向量夹角和夹角方向原创 2017-03-05 21:10:31 · 14423 阅读 · 0 评论 -
threejs路径
路径通常指存在于多种计算机图形设计软件中的以贝塞尔曲线为理论基础的区域绘制方式。路径在Canvas、SVG上都有相关定义,一般用来创建形状。在threejs中,也可以用来创建形状,除此之外,还可以用作物体运动的轨迹。原创 2017-03-05 21:12:34 · 10513 阅读 · 0 评论 -
threejs-经纬度转换成xyz坐标的方法
用threejs做3D应用时,很经常会接触到球状物体,比如说地球,要定义球上的一点,用经纬度是常用的办法,将经纬度转换成xyz坐标,就可以直接在指定的经纬度上放置我们想要的模型原创 2017-07-24 14:39:33 · 40338 阅读 · 6 评论 -
threejs- z-fighting 问题
在threejs中,使用z-buffer来处理模型的可见性,由于z-buffer是有限的,难免会出现两个面对应到同一个深度等级的情况,这种情况可能会造成模型的闪烁,破面,是使用threejs经常会遇到的一个问题。在这里做一下总结原创 2017-09-08 21:40:57 · 6287 阅读 · 0 评论 -
ThreeJS 开发实例
形状和材质虚线画虚线:function DrawDashLine(){ var geometry = new THREE.Geometry(); /** * vertexColors: false 关闭使用点颜色来生成线的颜色,这个值默认是false,如果设置为true,那么后面设置的color将不起作用 * ...原创 2016-08-09 09:21:32 · 26040 阅读 · 6 评论 -
threejs相机和渲染器
渲染器渲染器其实代表的是canvas标签。渲染器的类型WebGLRender使用WebGL来渲染图形,速度较快,但是有些机器不支持WebGL。CanvasRender使用canvas2d来渲染图形,在较老的版本上,主要是用来渲染2D图形。现在这个渲染器在新版本中已弃用。创建渲染器创建渲染器代码如下:renderer = new THREE.W原创 2017-02-14 18:18:18 · 6169 阅读 · 1 评论 -
threejs指定对象旋转中心
默认情况下,对象的旋转中心都是自身的中心。对于组对象而言,也是如此。因此,可以利用这个特点,实现对象绕任何点旋转,也就是指定旋转中心。原创 2017-03-05 21:04:23 · 20629 阅读 · 8 评论 -
threejs对象拾取
对象拾取对象拾取也就是要获得鼠标事件发生位置的图形对象。在threejs中,是通过Raycaster 对象来拾取对象的,ray是射线,caster是投射器,从字面上即可理解其工作原理是:从某个方向发射一条射线,穿过鼠标所在的点,则这条射线经过的对象就是鼠标点击的对象。原创 2017-03-05 21:00:10 · 13146 阅读 · 2 评论 -
threejs中坐标系转换和实现物体跟随鼠标移动
threejs中屏幕坐标系向threejs坐标的转换方法,以及实现物体跟随鼠标移动原创 2016-09-11 17:59:19 · 20953 阅读 · 4 评论 -
ThreeJS阴影
在threejs中,阴影可以定义为“在渲染器支持的情况下,有一个可以产生阴影的光,照射在若干个可以产生阴影的物体上,并在某个可以接受阴影的物体上产生阴影”。所以,要产生阴影,渲染器、光、物体,接受光线的物体,四者缺一不可。渲染器需要设置阴影渲染renderer.shadowMapEnabled = true;光线要设为能产生阴影//表示这个光是可以产生阴影的spotLig...原创 2016-08-11 15:30:46 · 3979 阅读 · 1 评论 -
threejs概览
本文讲述threejs的总体概况,希望从一个较高的角度看threejs到底能做什么原创 2017-02-15 19:12:45 · 3154 阅读 · 3 评论 -
threejs创建平面几何形状
平面几何形状有三种:点,线,面三种,下面说说用threejs创建这几种形状的方法。原创 2017-02-16 15:18:51 · 19232 阅读 · 0 评论 -
threejs纹理
纹理纹理用来表现物体的细节。理论上可以将物体的每个细节建模出来,但是这样时间成本和性能成本都太高,因此,将物体的一些细节用纹理来表示。原创 2017-02-20 17:24:41 · 10270 阅读 · 0 评论 -
threejs加载3D模型例子
加载3D模型需要使用ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D模型的数据转换成自己支持的格式原创 2017-02-20 17:20:29 · 31318 阅读 · 2 评论 -
threejs骨架形状
骨骼是什么?骨骼就是一个可以控制其它形状的对象。在threejs中,骨骼(Bone)就是一个空的Object3D对象原创 2017-02-20 17:14:34 · 5974 阅读 · 0 评论 -
threejs精灵(Sprite)
Sprite精灵Sprite叫精灵,计算机图形学中,精灵指包含于场景中的二维图像或动画(wiki)。在threejs中,是指一个永远面向相机的平面原创 2017-02-16 16:26:47 · 24270 阅读 · 1 评论 -
threejs坐标转换
屏幕坐标转three.js坐标将屏幕坐标转变成threejs空间坐标:function transToThreeCoord(x,y){ let mouse = new THREE.Vector3(); mouse.x = (x/window.innerWidth)*2 -1; mouse.y = -(y/window.innerHeigh...原创 2018-02-08 00:35:50 · 10933 阅读 · 1 评论