Threejs mesh中的点绕指定轴旋转

//获取start--->end的向量

function rotateSpecifiedAxis(mesh:THREE.Mesh){

        let vertices = [];

        for (let i = 0; i < mesh.geometry.attributes.position.array.length; i += 3) {

            vertices.push(new THREE.Vector3(mesh.geometry.attributes.position.array[i],             mesh.geometry.attributes.position.array[i + 1], mesh.geometry.attributes.position.array[i + 2]));

        }

        let box = new THREE.Box3().setFromObject(mesh)

        let center = new THREE.Vector3()

        box.getCenter(center);

        // 此处定义指定轴(起点----->终点)

        let axis = new THREE.Vector3(this.m_vEnd.x, this.m_vEnd.y, this.m_vEnd.z).sub(new         THREE.Vector3(this.m_vStart.x, this.m_vStart.y, this.m_vStart.z)).normalize();

        //将所有点绕start--->end的向量旋转90度

           vertices.forEach((item, index) => {

            item.applyMatrix4(new THREE.Matrix4().makeTranslation(-center.x, 0, -center.z));

            item = item.applyAxisAngle(axis, Math.PI / 2);

        })

}

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用Three.js库实现立方体指定所在直线旋转的完整网页代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Three.js Cube Rotation</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script> <script> // Create scene, camera and renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create cube and add to scene const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // Set up variables for rotation animation const axis = new THREE.Vector3(); const pointA = new THREE.Vector3(0, 0, 0); const pointB = new THREE.Vector3(5, 5, 5); const angle = Math.PI / 2; let t = 0; // Function to rotate cube around line between pointA and pointB function rotateAroundLine() { // Calculate axis of rotation axis.subVectors(pointB, pointA).normalize(); // Set quaternion for current rotation const quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle * t); // Apply quaternion to cube's rotation cube.quaternion.copy(quaternion); // Increment t for next frame t += 0.01; } // Render loop function animate() { requestAnimationFrame(animate); rotateAroundLine(); renderer.render(scene, camera); } animate(); // Resize handler window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html> ``` 在这个示例,我们创建了一个Three.js场景并添加了一个绿色立方体。我们使用了一个`rotateAroundLine`函数来计算立方体当前帧应该直线旋转多少,并且在每一帧都将其应用到立方体的旋转上。我们还在`animate`函数调用`rotateAroundLine`函数,并使用`requestAnimationFrame`来启动渲染循环。最后,我们添加了一个`resize`事件处理程序,以确保在窗口大小改变时,相机和渲染器的视口与新的窗口大小匹配。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值