![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Three.js
文章平均质量分 82
小冯小冯冲冲冲
QQ邮箱:1633816081@qq.com
展开
-
Three.js学习12
文章目录前言一、步骤1.设置侦听事件2.侦听到事件后处理响应的函数前言本篇主要介绍通过document.addEventListener()侦听和event.keyCode获取按下键盘的ASCII编码,通过switch分支实现键盘控制。一、步骤1.设置侦听事件使用document.addEventListener(),一个侦听事件并处理相应的函数document.addEventListener( 'keydown', onDocumentKeyDown, false );documen.原创 2021-11-19 20:52:07 · 290 阅读 · 0 评论 -
Three.js学习10
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、光线投射Raycaster1.a2.a2.1 a二、b1.b2.b2.1 b三、c1.c2.c2.1 c前言本篇主要介绍光线投射Raycaster用于进行鼠标拾取,形成鼠标点击事件的效果。一、光线投射Raycaster想要给物体添加点击事件,官方文档提供了一个Raycast类进行物体拾取。这个类用于进行raycasting(光线投射), 光线投射用于进行鼠标拾取(在三维空原创 2021-11-18 21:53:59 · 705 阅读 · 0 评论 -
Three.js学习11
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、a1.a1.1 导入包1.2 创建GUI方法1.3 设置参数1.3.1 函数控制1.3.2 直接改变参数值2.a2.1 a二、b1.b2.b2.1 b三、c1.c2.c2.1 c前言本篇主要介绍。一、a1.a1.1 导入包先导入包import { GUI } from '../jsm/libs/dat.gui.module.js';1.2 创建GUI方法创建原创 2021-11-18 21:34:06 · 486 阅读 · 0 评论 -
Three.js学习09
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、三维模型导入1.stl格式的三维模型导入1.1 引入STLLoader.js文件1.2 使用 THREE.STLLoader() 创建加载器加载模型1.3 效果2.obj格式的三维模型导入2.1 引入OBJLoader.js和MTLLoader.js文件2.2 使用 THREE.OBJLoader()和THREE.MTLLoader() 创建加载器加载模型2.3 改变材质属性前言原创 2021-10-25 10:31:15 · 317 阅读 · 0 评论 -
Three.js学习08
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、a1.a2.a2.1 a二、b1.b2.b2.1 b三、c1.c2.c2.1 c前言本篇主要介绍。一、a1.a2.a2.1 a二、b1.b2.b2.1 b三、c1.c2.c2.1 c...原创 2021-10-21 13:42:05 · 171 阅读 · 0 评论 -
Three.js学习07
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、精灵模型Sprite1.设置纹理贴图2.精灵材质对象SpriteMaterial3.创建精灵模型对象4.scale.set() 方法设置精灵大小二、精灵模型模拟森林场景1.创建草坪2.利用for循环设置一定数量的雨滴精灵模型三、精灵模型模拟下雨场景1.创建草坪2.创建group群组里放入一定数量的雨滴3.利用函数让渲染器渲染遍历雨滴群组,控制刷新频率产生动画效果,然后执行渲染操作。原创 2021-10-07 14:06:31 · 857 阅读 · 0 评论 -
Three.js学习06
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、设置阴影1.方向光2.聚光光源二、光照贴图添加阴影前言本篇主要介绍不同的光源给几何体添加阴影,以及给接收阴影的平面添加光照贴图。一、设置阴影1.方向光效果如下:首先在场景里创建几何体,即产生投影的对象,这里以长方体为例。将模型加入场景后加入下面这句,设置产生投影的网格模型。// 设置产生投影的网格模型 mesh.castShadow = true;然原创 2021-10-05 22:08:01 · 251 阅读 · 0 评论 -
Three.js学习05
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、纹理贴图1.将几何体模型整个表面进行纹理贴图2.利用数组将几何体模型某些面进行不同的纹理贴图二、利用face3的.materialIndex 将几何体的某些三角面改变材质(颜色、贴图等)三、1.c2.c2.1 c前言本篇主要介绍。一、纹理贴图1.将几何体模型整个表面进行纹理贴图声明几何体后使用 THREE.TextureLoader() 方法创建一个纹理加载器对象加载图原创 2021-10-03 21:53:30 · 1073 阅读 · 0 评论 -
Three.js学习04
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、函数1.球体网格模型创建函数2.圆柱体网格模型创建函数二、用类Group实现层级模型三、本地坐标.position 和世界坐标 .getWorldPosition() 方法前言本篇主要介绍层级模型通过父对象group完成、函数的使用和世界坐标。一、函数我们在一个实例里可能多次使用一个几何体,如果一直声明显得很麻烦,我们可以创建一个函数 function 函数名(参数1,原创 2021-10-02 15:08:49 · 182 阅读 · 0 评论 -
Three.js学习03
提示:本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。文章目录前言一、几何体Geometry1.设置几何体对象的顶点坐标,用Face3构造函数创建一个三角面2.设置顶点的法向量,将三角面添加到几何体中3.设置颜色3.1 设置三角面的颜色3.2 分别设置三角面face2三个顶点的颜色4.材料对象5.效果前言本篇主要介绍了几何体Geometry如何渲染出几何体效果。一、几何体Geometry之前使用的是缓冲类型几何体BufferGeometry原创 2021-10-01 21:29:34 · 267 阅读 · 0 评论 -
Three.js学习02
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、顶点1.几何体由三角形构成,三角形由3个顶点构成面2.顶点法向量2.1 不设置顶点法向量2.2 添加法向量使光源参与光照计算2.3 添加法向量没有效果的问题3.重复的顶点数据可以用顶点索引总结前言提示:提示:一、顶点1.几何体由三角形构成,三角形由3个顶点构成面首先明确几何体都由三角形构成,两个三角形拼成一个矩形平面。比如一个立方体网格模型由6个矩形构成。球体网格模型也是通过三角形构成一个球面,三角形数量越原创 2021-10-01 16:17:22 · 262 阅读 · 0 评论 -
Three.js学习01
文章目录前言一、引入three.js二、第一个案例1.展示3D效果2.旋转动画效果3.利用鼠标控制动画三维场景4.插入新的几何体4.1 常用几何体4.2 辅助坐标系4.3 插入新的几何体5.设置光源6.设置材质总结前言学习内容参考Three.js电子书,http://www.webgl3d.cn/Three.js/Three.js是基于原生WebGL封装运行的三维引擎,因项目需要,现开始学习。一、引入three.js打开前端编译软件新建HTML(我使用的是WebStorm)。在.html文件.原创 2021-09-20 09:18:01 · 846 阅读 · 0 评论