Three.js开发
文章平均质量分 62
用于近年来很火的一款Web3D渲染引擎:Three.js的学习经验的分享和交流
coder_路远
抱着学习的心态做IT
展开
-
vue-cli + three.js 解决页面跳转时Css2dObject遗留在dom的问题
最近再做项目的时候,采用vue + three.js进行开发大型的3d场景项目,该项目中涉及到需要为建筑中的元素添加标签说明一些信息、名称,遂决定使用three.js的CSS2DRenderer和CSS2DObject进行标签的绘制,用的代码如下:function makeCSS2DObject(position, radius, text) { const div = document.createElement( 'div' ); div.className = 'scene-la原创 2020-05-31 21:27:52 · 3543 阅读 · 4 评论 -
Three.js使用TextBufferGeometry创建3D文本
学习交流欢迎加群:789723098,博主会将一些demo整理共享我们知道在Web前端上,可以用CSS样式设置多种多样的二维字体格式。如果我们想文本当成3D几何绘制在场景中,即生成3D文本来提升场景的逼格,可不可以呢?答案是肯定的,Three.js中提供了绘制文本的接口,TextGeometry和TextBufferGeometry,使用这两个接口,再配合FontLoader就可以实现3D字体...原创 2019-11-12 20:31:54 · 2088 阅读 · 0 评论 -
Three.js用SkinedMesh创建蒙皮 (1)
学习交流欢迎加群:789723098,博主会将一些demo整理共享蒙皮(skin)是3D动画中常用的一种为模型添加骨骼的技术,由于骨骼与模型是相互独立的,为了让骨骼驱动模型性运动,把模型绑定到骨骼上的技术称之为蒙皮。蒙皮被广泛应用于3D动画制作或者3D游戏中的角色对象,很多模型制作软件都有带这一功能,例如3Dmax和blender,而由它们创建出来的动画模型利用unity这样的游戏引擎,...原创 2019-11-08 21:29:04 · 915 阅读 · 0 评论 -
Three.js动态增删场景模型
学习交流欢迎加群:789723098,博主会将一些demo整理共享有时候我们在开发一些项目的时候,需要不断的往场景中添加和移除模型,所以会经常调用到scene,这是一件很烦的事,特别是当项目很大的时候,你会发现再很多地方乱用scene.add和scene.romove会很容易出错,那有没有什么好方法避免N多次的scene调用的,当然是有的啦,three.js设计的时候应该也考虑到这个问题了吧...原创 2019-11-06 21:55:08 · 4398 阅读 · 0 评论 -
three.js射线:THREE.Raycaster实现鼠标选取几何图元
学习交流欢迎加群:789723098,博主会将一些demo整理共享一、介绍有时候我们在对三角网格模型进行操作的时候可能会需要对三角面进行选择,而实现这一功能最方便快捷的方法就是利用THREE.Raycaster创建射线来实现,在这边就不详细介绍射线的原理了,如果有兴趣的同学可以自行百度查询,有很多介绍射线的文章。Raycaster类的使用方法可以在官方文档中查询到:Raycaster使用方...原创 2019-04-25 19:12:25 · 2636 阅读 · 2 评论 -
three.js创建简单的法向贴图
学习交流欢迎加群:789723098,博主会将一些demo整理共享在上一节,我们用了three.js创建了简单的凹凸贴图效果:点击查看凹凸贴图,凹凸贴图可以呈现出比普通贴图更多细节,也更具层次感,如果我们对场景要求更为细致,我们可以使用法向贴图对材质进行贴图,本文以THREE.MeshPhongMaterial为例,演示一个法向贴图的示例,法向贴图主要是利用材质的normalMap来贴图,利用...原创 2018-09-21 17:11:20 · 4881 阅读 · 0 评论 -
three.js创建简单的凹凸贴图
有时候我们需要某个场景或者物体突出其凹凸特征,让物体看起来更有层次感,怎么办?Three.js的许多材质就提供了凹凸贴图的属性,下面笔者以THREE.MeshPhongMaterial为例,演示如何对一个立方体进行凹凸贴图: function textureBump() { let texture1 = new THREE.TextureLoader().load("text...原创 2018-09-12 16:10:14 · 2900 阅读 · 0 评论 -
three.js用THREE.CubeCamera和环境贴图创建反光效果
在文章:three.js贴图之CubeTextureLoader全景贴图中已经讲过全景贴图的应用,本文将进一步扩展全景贴图的功能,结合THREE.CubeCamera功能,创建出一个具有反光效果的场景,首先来看看看看THREE.CubeCamera的用法:let cubeCamera = new THREE.CubeCamera(0.1, 10000, 128);//实例化一个cubeCam...原创 2018-09-12 11:59:34 · 4447 阅读 · 0 评论 -
three.js贴图之CubeTextureLoader全景贴图
学习交流欢迎加群:789723098,博主会将一些demo整理共享有时候我们在创建地图街景或者地点全景图的时候,会经常用到THREE.CubeTextureLoader来对场景Scene的背景进行贴图,使之成为一个天空盒,只不过这个天空盒不能看见其外面的情景,无论怎么缩放,始终都在全景内,这是为什么呢?原因很简单,我们是对Scene的背景颜色进行贴图;笔者从官方文档中查到其应用的方法如下:...原创 2018-09-09 22:04:37 · 13133 阅读 · 1 评论 -
用three.js创建点云粒子贴图
学习交流欢迎加群:789723098,博主会将一些demo整理共享点云可以用来模拟各种各样的场景,如下雨、下雪和火焰燃烧等;点云在THREE.JS中也称为精灵(sprites);接下来将介绍THREE.JS中点云的两种创建方式:1.运用于少量点云粒子场景:代码如下例:let material = new THREE.SpriteMaterial()for (let i = -3...原创 2018-08-25 21:25:18 · 3325 阅读 · 0 评论 -
使用three.js的着色器通道一之渲染地球模型
学习交流欢迎加群:789723098,博主会将一些demo整理共享我们都知道,three.js库里面内置了很多着色器通道对象供我们渲染场景,本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现:1.RenderPass这个通道会在当前场景(scene)和摄像机(camera)的基础上渲染出一个新场景,新建:let renderPass ...原创 2018-05-12 11:27:51 · 3045 阅读 · 0 评论 -
three.js光源的应用
学习交流欢迎加群:789723098,博主会将一些demo整理共享three.js中定义了不同种类的光源,本节主要讲四种基本光源的应用:THREE.AmbientLight、THREE.PointLight、THREE.SpotLight和THREE.DirectionalLight。它们的介绍如下表:THREE.AmbientLight 自然光源,该光源的颜色会叠加到场景现有...原创 2017-12-17 19:18:39 · 1310 阅读 · 0 评论 -
three.js中正交和透视投影相机的应用
学习交流欢迎加群:789723098,博主会将一些demo整理共享一个场景之所以会呈现在我们眼前是因为我们具有眼睛,眼睛提供了视觉。换句话说,如果three.js场景中没有这双眼睛,就像电影没有摄像机一样,场景就无法呈现在我们面前?这双眼睛就是相机,可见相机是Three.js场景中不可或缺的一个组件。Three.js库提供了两种不同的相机:正交投影相机和透视投影相机,接下来分别讲解这两种相机以...原创 2017-12-01 23:12:27 · 4183 阅读 · 0 评论 -
three.js给场景加上阴影
学习交流欢迎加群:789723098,博主会将一些demo整理共享现实世界中(假设只在地球,先不考虑外太空),只要有光的地方就会有阴影产生。所以当我们构建好一个具备光照的场景后,还必须给其加上阴影,才能更清楚地显示场景中各个元素的关系,光照和阴影是webgl和three.js开发大型场景必不可少的元素,如果少了这两者,想象一下,地球上一切事物如果没有阴影,没有灯光,那么是不是世界乌漆嘛黑,什么...原创 2017-11-20 13:39:53 · 8136 阅读 · 0 评论 -
three.js轨道控制器OrbitControls.js
学习交流欢迎加群:789723098,博主会将一些demo整理共享轨道控制器OrbitControls.js是一个相当神奇的控件,用它可以实现场景用鼠标交互,让场景动起来,控制场景的旋转、平移,缩放,下面介绍轨道控制器的代码实现方式://添加轨道控制器//新建一个轨道控制器orbitControls = new THREE.OrbitControls(camera, rende...原创 2017-11-19 17:01:38 · 40307 阅读 · 14 评论 -
three.js 画一个旋转的立方体
学习交流欢迎加群:789723098,博主会将一些demo整理共享试想一下,如果我们的周围的事物都是静止的,那将是多么无聊的一个世界;同样的,我们创建出的场景如果是静止的,只能满足我们一时的视觉体验,时间一长会让我们感觉到枯燥无聊,所以要营造好的视觉体验和享受,就必须让场景动起来,这样才能给我们以震撼的效果。接下来做一个旋转的立方体实例。在此之前有一个问题:无论学WebGL还是Three....原创 2017-11-19 13:49:25 · 4003 阅读 · 1 评论 -
three.js基础几何体:立方体,球,圆柱的绘制
学习交流欢迎加群:789723098,博主会将一些demo整理共享 作为three.js的学习入门,一直在思考要怎样写才可以更符合初学者,对于我自己来说,本身也不是资深的玩家,也是入门不久的菜鸟,但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性的东西介绍太多,因为其是基于WenGL开发的第三方库,如果延伸下去那就会没完没了,这也违背了three.js开发的初衷(为...原创 2017-11-18 15:42:36 · 23858 阅读 · 0 评论