threejs 3d环绕旋转动画效果实例 |
您所在的位置：网站首页 › 动画种类 › threejs 3d环绕旋转动画效果实例 |
threejs 3d环绕旋转动画效果实例
|
之前的一个数据可视化大屏 项目开发中，有一个要求是需要进行3d环绕旋转的效果，这个效果之前有个案例demo中看到过，是通过css的matrix3d方式实现的，css实现方式，但是这个demo的css太长了，如果按照这个来写的话，实在是困难，首先每一个的css都特别长，写10几个的话，那工作量就很大了，假如中间客户要新增一个或者减少一个又要增加不少工作量，于是想到使用threejs来实现。 演示效果：threejs 3d环绕旋转动画效果实例
根据可视化大屏ui设计图来看的话，有5条轨道，3条轨道上有内容，那么我们先绘制轨道，通过ArcCurve绘制弧形曲线，然后通过LineLoop连接起来绘制成一个闭合的轨道。 circle(r) { // ArcCurve创建一个圆弧曲线 var arc = new THREE.ArcCurve(0, 0, r, 0, 2 * Math.PI, true); // 获取点数越多，圆弧越光滑 var points = arc.getPoints(100); //返回一个vector2对象作为元素组成的数组 // console.log('points', points); var geometry = new THREE.BufferGeometry(); //setFromPoints方法的本质：遍历points把vector2转变化vector3 geometry.setFromPoints(points); var material = new THREE.LineBasicMaterial({ color: 0x0f4984, linewidth: 1 }); // THREE.Line var line = new THREE.LineLoop(geometry, material); //起始点闭合 // 圆弧线默认在XOY平面上，绕x轴旋转到XOZ平面上 line.rotateX(Math.PI / 2); scene.add(line); } 在轨道上添加物体因为threejs还不够熟悉，不知道怎么直接在场景中直接添加旋转的css2d，所以我们这里创建网格模型，然后css2d获取网格模型的坐标。 创建网格模型创建透明的网格模型，用于css2d获取模型的位置 var geometry = new THREE.SphereGeometry(1, 0, 10); var material = new THREE.MeshBasicMaterial({ // 设置颜色贴图 color: 0x00ffff, transparent: true, opacity: 0, }); //材质对象Material var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh mesh.name = type.title scene.add(mesh); //网格模型添加到场景中 创建css2d创建css2d，获取模型的坐标，通过模型的坐标获取世界坐标，渲染出来。 var group = scene.getObjectByName(type.title) var label = that.tag(group.title, type, 0)//把名称obj.name作为标签 var pos = new THREE.Vector3() group.getWorldPosition(pos)//获取obj世界坐标、 label.position.copy(pos)//标签标注在obj世界坐标 scene.add(label)//标签插入model组对象中css2d我们创建后，需要监听，当鼠标放在了css2d上就需要停止环绕动画，鼠标移开后css2d继续环绕，所以我们需要添加一个标识，用来判断是否需要进行滚动。 tag(name, data, index) { var that = this; // 创建div元素(作为标签) var div = document.createElement('div') div.innerHTML = ` ${data.title} ` div.addEventListener('mouseover', function (e) { that.isRoll[index] = false }) div.addEventListener('mouseout', function (e) { that.isRoll[index] = true }) div.classList.add('tag') //div元素包装为CSS2模型对象CSS2DObject var label = new CSS2DObject(div) div.style.pointerEvents = 'none'//避免HTML标签遮挡三维场景的鼠标事件 // 设置HTML元素标签在three.js世界坐标中位置 // label.position.set(x, y, z); return label//返回CSS2模型标签 }, 坐标更新通过事先设置的速度参数我们来设置每次变化的角度来控制模型在轨道上的速度，通过然后通过sin cos来计算模型在x轴z轴的位置，css2d获取模型的位置获取世界坐标刷新自身的位置。就达到了旋转动画的效果了。 that.listMesh.forEach((type, index) => { that.listAngle[index] -= that.isRoll[0] ? that.speed[0].num : 0; // 每次执行render角度新增加 var x = that.huanList[0].R * Math.sin(that.listAngle[index]); //地球x坐标计算 var z = that.huanList[0].R * Math.cos(that.listAngle[index]); //地球z坐标计算 // 设置地球xz坐标，实现公转动画 type.position.set(x, 0, z); var pos = new THREE.Vector3() type.getWorldPosition(pos)//获取obj世界坐标、 that.listLabel[index].position.copy(pos)//标签标注在obj世界坐标 }); 完整实例代码项目基于vue3+vite javascript 方式编写 相关文件下载地址 此资源需支付 ¥5 后下载 微信支付 如已付费购买，请免登录验证。 如出现无法下载或链接失效请联系我微信:17331886870 喜欢 (0) |
【本文地址】