Three.js入门
关注
分享
扫一扫
文章平均质量分 64
coder_路远
抱着学习的心态做IT
展开
-
three.js基础几何体：立方体，球，圆柱的绘制
学习交流欢迎加群：789723098，博主会将一些demo整理共享 作为three.js的学习入门，一直在思考要怎样写才可以更符合初学者，对于我自己来说，本身也不是资深的玩家，也是入门不久的菜鸟，但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性的东西介绍太多，因为其是基于WenGL开发的第三方库，如果延伸下去那就会没完没了，这也违背了three.js开发的初衷(为...原创 2017-11-18 15:42:36 · 24098 阅读 · 0 评论 -
three.js创建简单的法向贴图
学习交流欢迎加群：789723098，博主会将一些demo整理共享在上一节，我们用了three.js创建了简单的凹凸贴图效果：点击查看凹凸贴图，凹凸贴图可以呈现出比普通贴图更多细节，也更具层次感，如果我们对场景要求更为细致，我们可以使用法向贴图对材质进行贴图，本文以THREE.MeshPhongMaterial为例，演示一个法向贴图的示例，法向贴图主要是利用材质的normalMap来贴图，利用...原创 2018-09-21 17:11:20 · 4979 阅读 · 0 评论 -
three.js创建简单的凹凸贴图
有时候我们需要某个场景或者物体突出其凹凸特征，让物体看起来更有层次感，怎么办？Three.js的许多材质就提供了凹凸贴图的属性，下面笔者以THREE.MeshPhongMaterial为例，演示如何对一个立方体进行凹凸贴图： function textureBump() { let texture1 = new THREE.TextureLoader().load("text...原创 2018-09-12 16:10:14 · 3015 阅读 · 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 · 4612 阅读 · 0 评论 -
three.js贴图之CubeTextureLoader全景贴图
学习交流欢迎加群：789723098，博主会将一些demo整理共享有时候我们在创建地图街景或者地点全景图的时候，会经常用到THREE.CubeTextureLoader来对场景Scene的背景进行贴图，使之成为一个天空盒，只不过这个天空盒不能看见其外面的情景，无论怎么缩放，始终都在全景内，这是为什么呢？原因很简单，我们是对Scene的背景颜色进行贴图；笔者从官方文档中查到其应用的方法如下：...原创 2018-09-09 22:04:37 · 13341 阅读 · 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 · 3448 阅读 · 0 评论 -
使用three.js的着色器通道一之渲染地球模型
学习交流欢迎加群：789723098，博主会将一些demo整理共享我们都知道，three.js库里面内置了很多着色器通道对象供我们渲染场景，本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现：1.RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建：let renderPass ...原创 2018-05-12 11:27:51 · 3157 阅读 · 0 评论 -
three.js中正交和透视投影相机的应用
学习交流欢迎加群：789723098，博主会将一些demo整理共享一个场景之所以会呈现在我们眼前是因为我们具有眼睛，眼睛提供了视觉。换句话说，如果three.js场景中没有这双眼睛，就像电影没有摄像机一样，场景就无法呈现在我们面前？这双眼睛就是相机，可见相机是Three.js场景中不可或缺的一个组件。Three.js库提供了两种不同的相机：正交投影相机和透视投影相机，接下来分别讲解这两种相机以...原创 2017-12-01 23:12:27 · 4305 阅读 · 0 评论 -
three.js光源的应用
学习交流欢迎加群：789723098，博主会将一些demo整理共享three.js中定义了不同种类的光源，本节主要讲四种基本光源的应用：THREE.AmbientLight、THREE.PointLight、THREE.SpotLight和THREE.DirectionalLight。它们的介绍如下表：THREE.AmbientLight 自然光源，该光源的颜色会叠加到场景现有...原创 2017-12-17 19:18:39 · 1360 阅读 · 0 评论 -
three.js中材质的应用
three.js几种常用材质的应用原创 2017-11-24 18:23:40 · 992 阅读 · 0 评论 -
three.js轨道控制器OrbitControls.js
学习交流欢迎加群：789723098，博主会将一些demo整理共享轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放，下面介绍轨道控制器的代码实现方式：//添加轨道控制器//新建一个轨道控制器orbitControls = new THREE.OrbitControls(camera, rende...原创 2017-11-19 17:01:38 · 40618 阅读 · 14 评论 -
three.js给场景加上阴影
学习交流欢迎加群：789723098，博主会将一些demo整理共享现实世界中（假设只在地球，先不考虑外太空），只要有光的地方就会有阴影产生。所以当我们构建好一个具备光照的场景后，还必须给其加上阴影，才能更清楚地显示场景中各个元素的关系，光照和阴影是webgl和three.js开发大型场景必不可少的元素，如果少了这两者，想象一下，地球上一切事物如果没有阴影，没有灯光，那么是不是世界乌漆嘛黑，什么...原创 2017-11-20 13:39:53 · 8242 阅读 · 0 评论 -
three.js 画一个旋转的立方体
学习交流欢迎加群：789723098，博主会将一些demo整理共享试想一下，如果我们的周围的事物都是静止的，那将是多么无聊的一个世界；同样的，我们创建出的场景如果是静止的，只能满足我们一时的视觉体验，时间一长会让我们感觉到枯燥无聊，所以要营造好的视觉体验和享受，就必须让场景动起来，这样才能给我们以震撼的效果。接下来做一个旋转的立方体实例。在此之前有一个问题：无论学WebGL还是Three....原创 2017-11-19 13:49:25 · 4106 阅读 · 1 评论 -
three.js射线：THREE.Raycaster实现鼠标选取几何图元
学习交流欢迎加群：789723098，博主会将一些demo整理共享一、介绍有时候我们在对三角网格模型进行操作的时候可能会需要对三角面进行选择，而实现这一功能最方便快捷的方法就是利用THREE.Raycaster创建射线来实现,在这边就不详细介绍射线的原理了，如果有兴趣的同学可以自行百度查询，有很多介绍射线的文章。Raycaster类的使用方法可以在官方文档中查询到：Raycaster使用方...原创 2019-04-25 19:12:25 · 2717 阅读 · 2 评论