JS仿照3D手办模型展台实现示例详解

目录
  • 前言
  • 效果预览
    • 代码片段
      • style
      • Script
  • 核心科技
  • 获取旋转角度
    • 监听 touch 事件，通过开始、结束坐标计算移动方向
    • 根据坐标计算移动方向
  • PC端支持 touch 事件

前言

前几年实现的一个 demo 效果，今天翻出来整理下，给大家提供类似场景参考思路。

当时的需求场景是需要 3D 展示手办模型，但是因为甲方预算有限，问有没有其他青春版（性价比）方案。

刚好那段时间在处理 lottie 动画跳帧的问题，就提出了给模型拍个全身照，旋转的时候逐帧播放达到模拟手办模型旋转的动画效果。

众所周知，帧率越高，单位时间内图像帧的个数就会越多，对应动画效果就会越流畅，当然了，对应需要准备的模型素材也就越多。

效果预览

代码片段

为了省流，这里没有预渲染图片资源，

赞 (0)

相关推荐

  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • three.js实现3d全景看房示例

    three.js实现3d全景看房示例

    目录 背景 认识threejs 安装与使用 3D世界的三剑客 场景(scene) 相机(camera) 透视相机 正交投影相机 渲染器(renderer) 世界雏形 造物 几何体(geometry) 材质(material) 渲染循环 轨道控制器(OrbitControls) 3D全景房 天空盒贴图 全景图片贴图 房屋模型 灯光 串门 Sprite(精灵模型) Raycaster(光线投射) 遇到问题 总结 背景 随着电商时代的发展,网上购物的方式已经成为主流,良好的购物体验已经显得极为重要.展

  • 利用Three.js实现3D三棱锥立体特效

    利用Three.js实现3D三棱锥立体特效

    目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 3D特效的话最容易让人想到的应该是three.js吧.我们今天来说说它. Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多.使用最广泛的三维引擎. Threejs是一款WebGL三维引擎,它可以用来做什么许多许多地场景应用 一个小案例 <!DOCTYPE html> <html lang="en"> <head> <me

  • 基于JS实现简单的3D立方体自动旋转

    基于JS实现简单的3D立方体自动旋转

    目录 演示 技术栈 源码 css js 雪花部分 演示 技术栈 display:inline-block,block,inline元素的区别: display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始. display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变.多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行. display:inline

  • 在Vue3中使用BabylonJs开发 3D的初体验

    在Vue3中使用BabylonJs开发 3D的初体验

    目录 开始 安装 Vue3 安装 BabylonJs 创建 Vue 组件: BabylonOne.vue 创建 Babylon 类 渲染场景 修改 CSS 并添加相机和灯光 结尾 随着前端的发展,在 Web 浏览器中构建 3D 图形变得越加简单. 加入我的 3D 开发旅程,我将向你展示如何使用 Babylon.js 创建基本场景. 在这篇文章中,我们将接触以下内容: 使用 Vue3 创建一个 Vue 组件 创建 Babylon 类 在画布上渲染场景 创建 3D 网格 开始 安装 Vue3 首先,

  • Three.js+React实现3D开放世界小游戏

    Three.js+React实现3D开放世界小游戏

    目录 背景 效果 设计 实现 加载资源 页面结构 数据初始化 场景初始化 创建世界 创建星空 创建地形 加载进度管理 创建基地模型 创建阿狸模型 控制阿狸运动 动画更新 页面缩放适配 添加游戏逻辑 毛玻璃效果 总结 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民必须穿戴基地发放的防辐射服才能生存.阿狸驾驶星际飞行器降临此地,快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧! 本文使用 Three.js + React + CANNON 技术栈,实现通过滑动屏

  • JS仿照3D手办模型展台实现示例详解

    JS仿照3D手办模型展台实现示例详解

    目录 前言 效果预览 代码片段 style Script 核心科技 获取旋转角度 监听 touch 事件,通过开始.结束坐标计算移动方向 根据坐标计算移动方向 PC端支持 touch 事件 前言 前几年实现的一个 demo 效果,今天翻出来整理下,给大家提供类似场景参考思路. 当时的需求场景是需要 3D 展示手办模型,但是因为甲方预算有限,问有没有其他青春版(性价比)方案. 刚好那段时间在处理 lottie 动画跳帧的问题,就提出了给模型拍个全身照,旋转的时候逐帧播放达到模拟手办模型旋转的动画效

  • node运行js获得输出的三种方式示例详解

    一.通过console.log输出(我最喜欢的) 1.js脚本 1.js var arguments = process.argv.splice(2); //获得入参 var a= arguments[0]; 取第一个 console.log(a) //输出 2.python脚本 test_1.py import os print(os.popen('node 1.js fuck').read()) #打印结果fuck 二.通过文件读写获取 1.js脚本 1.js //npm环境别忘了装了 va

  • JS递归遍历查询是否有权限示例详解

    目录 前言 需求分析 设计思路 代码 声明查找模板如下 js 版本 ts 版本 后记 前言 最近参与了一个基于 qiankun 构建的微前端大型项目,涉及到十几个子应用,基于基座独立开发了一个完善的权限中心模块.而权限中心中涉及到了 模块 > 一级菜单 > N级菜单/按钮 结构的权限管理. 这次的需求是在其中一个子应用的按钮级别的权限管理,在鉴权阶段写了一个小的方法,用来从权限树中查询是否有某一个按钮的权限,从而控制用户对于按钮的使用权限. 需求分析 权限的每一层对应的子菜单的键不尽相同. 在

  • js前端上传文件缩略图技巧示例详解

    目录 引言 文件对象简介 Blob File FileReader FormData 文件对象之间的关系 缩略图的实现 总结 引言 通常情况下,前端提交给服务器的数据格式为JSON格式,但很多时候用户想上传自己的头像.视频等,这些非文本数据的时候,就不能直接以JSON格式上传到后端了. 当我们要获取用户上传的文件,可以使用input表单项,将type属性值设置为“file”. <form action=""> <input type="file"

  • js中的cookie的读写操作示例详解

    cookie是一小段信息,以键/值对的信息保存在计算机硬盘上的字符串, cookie存储容量大概在4kb,不同的浏览器厂家对cookie大小的限制有微微的差异:cookie主要的本质是"识别",通过识别来做一些事情;cookie 也是无法从你的硬盘取得任何其它数据,传送电脑病毒或者获取你的电子邮件地址.cookie是有有效期的,cookie的默认有效期是从cookie生成至浏览器关闭,也可以通过设置cookie的有效期来指定其失效日期:用户也可以禁止cookie也可以手动删除cooki

  • Three.js实现雪糕地球的使用示例详解

    Three.js实现雪糕地球的使用示例详解

    目录 前言 ThreeJS 基础——实现转动的球体 ThreeJS 纹理——实现转动的地球 交互式雪糕地球 添加 loading 效果 前言 最近的天气有几分酷热,去实验室的道路也有几分漫长,走着走着,小包感觉灵魂已经被热出窍了.回到实验室,把空调打开,雪糕吃上,静坐了几分钟,才重新感觉到灵魂的滋味,葛优躺在实验室的小床上,思维开始天马行空,世上有一万种方式能让小包凉快,但地球母亲呐,她却日渐炎热,谁能来给她降降温? 躺着躺着,进入了梦乡,小包梦到未来有一天,人类超级发达,可以穿梭时空,但发展的

  • Three.js引入Cannon.js及使用示例详解

    目录 引言 大体代码及效果 Cannon.js 打造当前 UI 引言 在开始之前,我们还是要解释下什么是 Cannon.js 以及它的作用. Cannon.js 是一个 3D 物理引擎,通过为物体赋予真实的物理属性的方式来计算运动.旋转和碰撞检测.Cannon.js 相较于其他常见的物理引擎来说,比较轻量级而且完全通过 JavaScript 来实现. Cannon.js 的官方文档地址为 schteppe.github.io/cannon.js/ ,从官方介绍中也可以看到很多有趣的例子,如下所示

  • 20行代码简单实现koa洋葱圈模型示例详解

    目录 引言 koa中间件的使用 洋葱圈模型 洋葱圈模型的实现,koa-compose 单次调用限制 koa-compose与流程引擎 总结 引言 koa想必很多人直接或间接的都用过,其源码不知道阅读本文的你有没有看过,相当精炼,本文想具体说说koa的中间件模型,一起看看koa-compose的源码,这也是koa系列的第一篇文章,后续会更新一下koa相关的其他知识点 koa中间件的使用 先让我们启动一个koa服务 // app.js const koa = require('koa'); cons

  • JS中原始值和引用值的储存方式示例详解

    在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值 原始值指的是代表原始数据类型的值,也叫基本数据类型,包括:Number.Stirng.Boolean.Null.Underfined 引用值指的是复合数据类型的值,包括:Object.Function.Array.Date.RegExp 根据数据类型不同,有的变量储存在栈中,有的储存在堆中.具体区别如下: 原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始

随机推荐