WebGL+Three.js
文章平均质量分 72
Arururururu
这个作者很懒,什么都没留下…
展开
-
Three.js入门(二)
摘自Three.js入门指南 张雯莉 (作者)原创 2018-06-03 00:33:29 · 1738 阅读 · 0 评论 -
THREE.js 粒子系统
经常看到这样一些场景:漫天飞舞的雪花、夜晚草丛中点点萤光、小河上下起的绵绵细雨… 这些浪漫??的效果都可以用粒子系统来实现,粒子系统用THREE.js实现就是通过Points或者Sprite类来实现的啦。一、Points A class for displaying points. The points are rendered by the WebGLRenderer using ...原创 2018-06-10 18:54:22 · 5019 阅读 · 0 评论 -
THREE.js 管道体TubeGeometry
THREE.js封装了很多几何体供我们使用,其中一个叫TubeGeometry的十分神奇, 它根据3d曲线curve来张成一条管道,我们来看看它的构造函数。TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)其中...原创 2018-06-10 18:09:24 · 10925 阅读 · 2 评论 -
THREE.js 利用OrbitControls实现摄影机切换
计图大项目接近尾声,把自己部分的代码加入到大佬搭好的场景时,学习到了实现摄影 机切换的方法,于是分享一下。1、OrbitControlsOrbitControls类是three.js提供的鼠标、方向键与场景交互的控件,通过鼠标拉拽来改变camera的位置、旋转角度等,从而改变视觉,更有真实感。 其构造函数如下:OrbitControls( object : Camera, do...原创 2018-06-17 21:25:12 · 5812 阅读 · 2 评论 -
Three.js入门(一)
摘自Three.js入门指南 张雯莉 (作者) 本书针对Three.js的几个重要话题分章节介绍,包括:Three.js和WebGL的背景资料、照相机的设定、在场景中添加物体、实现动画效果、导入外部模型、添加光源和阴影效果、着色器等。1、WebGLWebGL是基于OpenGL ES 2.0的Web标准,可以通过HTML5 Canvas元素作为DOM接口访问。WebGL可以看做是将...原创 2018-06-02 16:38:14 · 801 阅读 · 0 评论 -
Three.js 面积光光源RectAreaLight
RectAreaLight RectAreaLight emits light uniformly across the face a rectangular plane. This light type can be used to simulate light sources such as bright windows or strip lighting. The...原创 2018-06-08 17:37:34 · 924 阅读 · 0 评论 -
Three.js半球光光照HemisphereLight
HemisphereLight A light source positioned directly above the scene.HemisphereLight类用于在场景中创建半球光,主要用在室外,但是没有阴影。构造函数HemisphereLight( skyColor, groundColor, intensity )各参数解释如下:skyColo...原创 2018-06-08 17:13:36 · 1601 阅读 · 0 评论 -
Three.js中camera的lookAt函数与OrbitControls冲突
今天想把整个场景往下沉一点,想要照相机也跟着沉,于是设置了camera.lookAt(new THREE.Vector3(0, -1000, 0));结果发现视角并没有发生改变,在网上查了一下发现是与three.js的OrbitControls控件有关系, 在OrbitControls的源代码中可以看到,camera的lookAt对象被更改了:THREE.OrbitControl...原创 2018-06-14 14:22:03 · 6333 阅读 · 7 评论 -
THREE.js 实现屏幕只能看到指定区域
计图项目展示完了,虽然展示的时候模板测试这一块还是有bug(可见区域会受透视投影的影响导致形状发生变化或离开视野),但是避开了bug展示。 今天看了一些资料,有了一点灵感,终于大概修好了bug。1、功能设想实现像透过竹子口看世界一样的效果,就是像下图这样2、挣扎与灵感来源因为计图项目中的bonus有模板测试这一项,本着努力做完所有bonus的念头,开始着手研究。 看了一下o...原创 2018-06-20 18:57:21 · 3028 阅读 · 0 评论 -
THREE.js创建三维文字TextGeometry
三维文字在许多场景中很常见,而THREE.js也为我们封装了TextGeometry类来更好(容易)地生成三维文字。先来看看官网的介绍: TextGeometry A class for generating text as a single geometry. It is constructed by providing a string of text, and a h...原创 2018-06-11 15:06:21 · 11983 阅读 · 10 评论 -
Three.js入门(三)
摘自Three.js入门指南 张雯莉 (作者)6、网格在学习了几何形状和材质之后,我们就能使用他们来创建物体了。最常用的一种物体就是网格(Mesh),网格是由顶点、边、面等组成的物体;其他物体包括线段(Line)、骨骼(Bone)、粒子系统(ParticleSystem)等。创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色、纹理等信息。网格...原创 2018-06-03 21:06:39 · 1063 阅读 · 0 评论 -
Three.js 天空盒
天空盒天空盒是用于增强场景表现力的一个常用技术,它一般通过在相机周围包裹一个纹理来实现。OpenGL中天空盒的思想就是绘制一个大的立方体,然后将观察者放在立方体的中心,当相机移动时,这个立方体也跟着相机一起移动,这样相机就永远不会运动到场景的边缘。在Three.js中,除了这种方法外还可以设置场景的背景,将六个面的贴图通过CubeTextureLoader()载入,顺序为[right,...原创 2018-06-03 18:13:29 · 6050 阅读 · 2 评论 -
关于THREE.js中ParametricGeometry画不出来的原因
因为计图项目是海底世界创建,所以虽然画出了个竹子,但是还是想画海草。 由于海草也是波浪形的,想起之前在一个博客里看到了波浪平面的生成是利用ParametricGeometry生成的,于是也想试一试,就写出了如下代码://海草形状var radialWave = function (u, v) { var r = 150; var z = Math.s...原创 2018-06-10 23:01:41 · 1575 阅读 · 0 评论