系列文章目录构建基础场景文章目录系列文章目录构建基础场景前言一、下载three.js二、搭建基础场景1.构建场景（Scene）2.构建摄像机（Camera）正交相机（OrthographicCamera）：物体不会受距离影响，无论远近都不会改变大小透视相机（PerspectiveCamera）：物体受距离影响，远小近大，跟我们的人眼非常相似。透视相机构造函数的四个参数3.渲染器基础的已经搭建完成了

设定巡航行动轨迹引入three.path初始化坐标点animate执行行动轨迹动画参考博客我们写3D时，常常会有按照一定轨迹去浏览模型，所以,我们要先确认行动轨迹，渲染出行动轨迹以后，再让人物按照行动轨迹去移动引入three.pathcnpmithree.path//绘制路径，相较于tubeGeometry，贴图的效果展现得更好import{PathGeometry,PathPointList}f

THREE.JS销毁将场景相关的参数重置，防止页面多次打开，导致的越来越卡顿的问题beforeDestroy(){this.resetScene();},deactivated(){this.resetScene();},//销毁场景等信息resetScene(){this.isShowWebgl=false;//销毁divtry{cancelAnimationFrame(animateId);c

按照行动轨迹移动人物模型并相机视角跟随人物1.初始化加载模型2.开始移动模型3.人物模型启动4.暂停模型移动5.重置模型位置6.切换区域动画7.摄像机追踪模型8.移动模型位置9.动画执行人物按照上一篇博客所设定的关键点位置，匀速移动1.初始化加载模型//加载巡航人物模型callback动作完成的回调函数initWalkPerson(callback){fbxloader("walk").then(

THREE.JS模型上方显示信息框/标签---CSS3DSprite精灵模型1.CSS2DRenderer/CSS3DRenderer/Sprite的优劣2.实现模型上方显示信息框2.1引入2.2初始化加载的时候就执行此方法2.3animate循环执行2.4获取设备状态并在每个设备上显示设备状态2.5样式CSS3DSprite精灵模型面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线

THREE.JS点击事件1.增加监听点击事件2.点击事件实现3.记得关闭页面时销毁此监听事件1.增加监听点击事件renderer.domElement.addEventListener("click",this.onClick,false);注:初始化render时监听2.点击事件实现onClick(event){constraycaster=newTHREE.Raycaster();constm

THREE.JS辉光设定和解决辉光导致背景变暗的问题THREE.JS辉光设定THREE.JS辉光导致背景变暗的问题1.设定背景图片2.初始化辉光3.animate一直渲染辉光THREE.JS辉光设定给我的设计好的fbx模型,已经设定好了模型发光材质,所以直接添加辉光效果,就可以自动发光blender模型生成器里的发光只是生成器里的发光效果,导入到three里并不生效,需要用代码生成辉光效果1.引入

一、通过npm下载three.js相关插件npmithreegsap二、页面引入import*asTHREEfrom"three";//引入扩展库OrbitControls.jsimport{OrbitControls}from"three/addons/controls/OrbitControls.js";//引入扩展库GLTFLoader.jsimport{GLTFLoader}from"th

文章目录前言一、如何生成边线？二、给线条加上辉光效果下期预告：下一期我们将在地图上添加精灵和别的几何体，然后让它们可以被点击，从而来产生一些交互前言1.3D地图的第三步，增加描边的线条和辉光一、如何生成边线？1.还记得当初我们引入的map.json文件去生成的地图吗？如果忘了，可以去复习第二章，现在我们要做的是创建一个arr，把map.json的数据以省份的格式放进来，如果直接使用地图的数据，线条

20232.9.12今天我学习了如何使用vue2+three制作一个3d图形，效果：首先安装：npminstallthree相关代码：import*asTHREEfrom'three'exportdefault{data(){return{scene:null,//场景camera:null,//照相机renderer:null,//渲染器mesh:null,//物体light:null,//灯光

2023.9.12今天我学习了vue2+three.js实现一个好看的动态效果：首先是安装：npminstallthree相关代码如下：import*asTHREEfrom'three'exportdefault