
Three.js进阶
文章平均质量分 96
你华还是你华
博客专家 全栈领域优质创作者
以代码为笔,逻辑为墨,绘制着代码世界的无限可能。作为优快云平台上备受瞩目的优质创作者,我致力于将复杂的技术难题简化为通俗易懂的语言,分享从前端设计到后端架构、从数据库优化到云计算部署的全栈知识体系。加入我,一起在全栈的征途中,探索未知,创造未来!
展开
-
Cannon-es.js编程进阶:复杂形状的碰撞
我们在Cannon-es.js基础入门:3D 物理碰撞效果已经了解了简单的物体碰撞效果,我们还可以监听其碰撞的事件,和监听休眠事件。甚至我们可以实现多个形状的组合物体以及复杂模型的物理碰撞。并且解决了threejs里的gltf模型缩放了7倍,cannon-es里的Trimesh该如何对应的问题。原创 2024-09-25 23:00:57 · 1034 阅读 · 0 评论 -
Three.js 3D人物漫游项目(下)
在数字技术的浪潮中,三维图形渲染技术以其独特的魅力,正逐步渗透到我们生活的方方面面,从电影特效的震撼呈现到游戏世界的沉浸式体验,再到虚拟现实(VR)与增强现实(AR)技术的蓬勃发展,三维图形技术无疑成为了连接现实与虚拟世界的桥梁。而在这众多技术中,Three.js作为一款轻量级、易于上手且功能强大的JavaScript 3D库,凭借其跨平台、高性能的特点,成为了前端开发者探索三维世界的重要工具。本文章基于Three.js 3D人物漫游项目(上)与Three.js 3D人物漫游项目(中)原创 2024-09-23 16:00:09 · 2090 阅读 · 0 评论 -
Three.js 3D人物漫游项目(中)
在数字技术的浪潮中,三维图形渲染技术以其独特的魅力,正逐步渗透到我们生活的方方面面,从电影特效的震撼呈现到游戏世界的沉浸式体验,再到虚拟现实(VR)与增强现实(AR)技术的蓬勃发展,三维图形技术无疑成为了连接现实与虚拟世界的桥梁。而在这众多技术中,Three.js作为一款轻量级、易于上手且功能强大的JavaScript 3D库,凭借其跨平台、高性能的特点,成为了前端开发者探索三维世界的重要工具。本文章基于《Three.js 3D人物漫游项目(上)》基础上将完成人物的投影及丰富场景的建筑物。原创 2024-09-21 22:24:52 · 1600 阅读 · 0 评论 -
Three.js 3D人物漫游项目(上)
在数字技术的浪潮中,三维图形渲染技术以其独特的魅力,正逐步渗透到我们生活的方方面面,从电影特效的震撼呈现到游戏世界的沉浸式体验,再到虚拟现实(VR)与增强现实(AR)技术的蓬勃发展,三维图形技术无疑成为了连接现实与虚拟世界的桥梁。而在这众多技术中,Three.js作为一款轻量级、易于上手且功能强大的库,凭借其跨平台、高性能的特点,成为了前端开发者探索三维世界的重要工具。本系列文章《人物漫游项目(上)》,将带您深入Three.js。原创 2024-09-21 00:11:29 · 1404 阅读 · 0 评论 -
Threejs之看房案例(下)
点精灵Threejs之看房案例(上)本篇文章的球形模式代码为基础,在此基础上如果需要交互的话,我们使用到射线进行交互。我们首先得有点精灵图进行标识厨房与大厅,加入代码如下所示:1.2 点精灵效果可以看到效果那就是点精灵厨房位置没对上,那我们其实可以打开坐标轴来设置点精灵位置,打开坐标轴辅助器:效果:我们可看到点精灵 轴都要设置为负的:后效果如下:已经贴在了我们厨房门上。添加鼠标移动事件,我们需要做的是将鼠标移动的点坐标转换为一个位于二维空间中的点,在标准化设备坐标中鼠标的二维坐标 ——原创 2024-09-18 19:18:54 · 1968 阅读 · 1 评论 -
Threejs之看房案例(上)
Three.js是一个基于WebGL的JavaScript3D库,它允许在网页上创建和显示3D图形。在房地产行业中,Three.js常被用于实现全景看房案例,为用户提供沉浸式的房屋浏览体验。原创 2024-09-17 20:30:37 · 2070 阅读 · 0 评论 -
Threejs合并模型动画(下)
可以看到模型动画完全由我们用户交互进行控制了。 用来调度存储在中的动画。说明: 的大多数方法都可以链式调用。在传入的时间间隔内,逐渐将此动作的权重()由0升到1。此方法可链式调用。在传入的时间间隔内,逐渐将此动作的权重()由1降至0。此方法可链式调用。重置动作。此方法可链式调用。该方法会将暂停值 设为, 启用值 设为,时间值 设为0, 中断任何预定的淡入淡出和变形, 以及移除内部循环次数以及延迟启动。说明: 停止方法内调用了重置方法(), 但是 不会调用 。 这就表示: 如果你想要这两者, 重原创 2024-09-15 18:26:46 · 986 阅读 · 0 评论 -
Threejs合并模型动画(中)
在Threejs合并模型动画(上)这篇博客中我们把两个相同的模型不同的动画整合到了一个模型上,那么这篇将围绕整合的模型进行动画的展示。动画混合器。动画融合引擎专为场景中特定实体的动态展示而设计。在复杂场景中,当多个独立实体各自演绎独特动画时,每一实体均能共享同一高效动画融合引擎。原创 2024-09-15 16:39:15 · 1529 阅读 · 0 评论 -
Threejs合并模型动画(上)
我们常常会遇到相同的模型具有不同的动画,那么我们想把不同的动画都给到一个相同的模型,让这个模型具有许多动画,通常这都是3d设计师给到你的,但是如果我们自己也不熟悉3d编辑器,我们又想模型有不同的动画,我们这个时候就可以使用Three.js来完成这样的合并,并且运用动画。接下来本篇文章将介绍。原创 2024-09-15 15:39:03 · 1300 阅读 · 0 评论