随笔分类 - threeJS小案例
主要是个人做的小demo已经觉得不错的案例分享
摘要：canvas绘制圆角矩形 Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现 我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处，然后acrTo(x+w,y,x+w,y+h,r
阅读全文
摘要：three中加css2d属性框展示 vue项目 一、引入文件CSS2DRenderer, CSS2DObject import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; 二
阅读全文
摘要：three中材质移动动画 // 材质移动动画 animationTexture(mesh){ var textureLoader = new THREE.TextureLoader(); this.textureAlarm = textureLoader.load('/static/test.png
阅读全文
摘要：three自定义动画 var clock = new THREE.Clock()/* 模型从一个位置移动到另一个位置的动画 mesh:为控制的mesh或者object3d name:为mesh或object3d的名字 initX,initY,initZ:为mesh或object3d初始化的x,y,z
阅读全文
摘要：three点击交互，改变材质颜色 一、在vue的的methods方法中写入 // 模型点击改变颜色 onmodelclick(event) { var raycaster = new THREE.Raycaster(); let mouse = new THREE.Vector2(); mouse.
阅读全文
摘要：three.js帧动画 + 自动适配尺寸 直接上代码，有疑惑请加群讨论：854184700 var mixer, var posTrack = new THREE.KeyframeTrack( "Build.position", [0, 20], [0, 0, 0, -100, 0, 0]//前三个
阅读全文
摘要：Tthree.js加载精灵图片 直接上代码。有问题，请加群讨论 ：854184700 var textureLoader = new THREE.TextureLoader(); var map = textureLoader.load("/img/alarm.png"); var material
阅读全文
摘要：vue中加载three.js全景图 代码如下： <template> <div class="VRScene"> <div id="container"></div> </div> </template> <script> import * as THREE from "three"; import
阅读全文
摘要：vue中加载three.js的gltf模型 一、开始引入three.js相关插件。首先利用淘宝镜像，操作命令为： cnpm install three //npm install three也行 二、three.js中所有的控件插件，都可以在node_modules下面的three里面找到 三、安装
阅读全文
摘要：这个小案例是当初我在学习的时候，小的一个小案例，代码还需要进一步优化；还请谅解~~；主要用到了threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸等这些小功能； （点击每个mesh，mesh的颜色会变为红色） 点击 1 需要加载这些相关的js文件 2 下面是实现的
阅读全文
