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

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

前言

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

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

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

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

效果预览

代码片段

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

时间: 2022-09-21

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

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

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

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

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

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

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

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

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

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

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

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

JS的时间格式化和时间戳转换函数示例详解

JS的时间格式化和时间戳转换函数 //格式化时间 function dateFormat(fmt,date){ var o = { "M+" : date.getMonth()+1, //月份 "d+" : date.getDate(), //日 "h+" : date.getHours(), //小时 "m+" : date.getMinutes(), //分 "s+" : date.getSeconds

three.js着色器材质的内置变量示例详解

什么是着色器? 固定渲染管线: --标准的几何&光照(T&L)管线,功能是固定的,它控制着世界.视.投影变换及固定光照控制和纹理混合.T&L管线可以被渲染状态控制,矩阵,光照和采制参数.如果有了固定渲染管线,编写程序就比较容易了,因为所有的变换都是由固定渲染管线来完成的,但是缺点就是自由度低.固定渲染管线只能完成一些最基本的操作,如果想要做一些特殊的处理,就比较麻烦了. 可编辑渲染管线:--WebGL中不存在固定渲染管线,坐标变换必须全部由自己来做,这个记述了坐标变换的机制就叫做着

three.js实现炫酷的全景3D重力感应

本文实例为大家分享了three.js 全景重力感应的具体代码,供大家参考,具体内容如下 实现three.js 全景图 demo 使用three.js 写了球体和圆柱体版本的3D重力感应全景图,支持手指触摸和陀螺仪感应,也支持PC端的鼠标.给大家介绍一下基于移动端H5球体的实现方法,圆柱体类似. 设置容器和展示的样式 设置容器的宽高为全屏展示,清除body的margin,引用three.min.js(3D渲染框架) 和orienter.js (陀螺仪经纬度计算) <div id="Canva

js实现炫酷光感效果

本文实例为大家分享了js实现炫酷光感效果的具体代码,供大家参考,具体内容如下 首先写一个大盒子 <div class="main"></div> 然后给这个大盒子添加样式 * { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { background: darkblue; } .main { width: 8px; height: 8px; positio

vue.js表单验证插件(vee-validate)的使用教程详解

综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.

vue.js的状态管理vuex中store的使用详解

一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

基于vue中css预加载使用sass的配置方式详解

1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

vue安装和使用scss及sass与scss的区别详解

1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w

Vue中的vue-resource示例详解

vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

vue cli4下环境变量和模式示例详解

本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con