六、如何让卡片一直对着摄像头

        上期我们创建了卡片,那么如何让卡片一直面向浏览器。这个交互有一部分公司还是很需要的,今天我们就来讲讲,先看效果图

在animate.js里面增加卡片Mesh的LookAt,代码如下

import camera from "./camera";
import renderer from "./renderer";
import controls from "./controls";
import scene from "./scene";
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min'function animate () {controls.update();TWEEN.update();requestAnimationFrame(animate);// 使用渲染器渲染相机看这个场景的内容渲染出来renderer.renderer.render(scene, camera);renderer.css3drender.render(scene, camera);scene.children.forEach(element => {if (element.type == 'Object3D') {// gsap.to(element.rotation, {//   duration: 0.1,//   // y: controls.object.rotation._y + Math.PI / 4,//   repeat: 1,//   ease: "none",// })//让卡片一直面向摄像头element.lookAt(camera.position);}});
}

卡片面对浏览器

以上就是让卡片面向摄像头的方法,其实就是使用lookAt方法传入视频对象的位置即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/143413.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【STM32】IAP升级01 bootloader实现以及APP配置(主要)

APP程序以及中断向量表的偏移设置 前言 通过之前的了解 之前的了解,我们知道实现IAP升级需要两个条件: 1.APP程序必须在 IAP 程序之后的某个偏移量为 x 的地址开始; 2.APP程序的中断向量表相应的移动,移动的偏移量为 x&#xff…

如何制作gif动图gif (多图合成gif、GIF录制软件、视频制作成GIF动图)

文章目录 1 在线制作多图合成gif动画2 GIF录制软件3 将现有的视频 制作成GIF动图 1 在线制作多图合成gif动画 在线制作gif动画链接:https://www.matools.com/gif ①选择需要制作gif动画的图片将其添加 ②调整时间间隔,图片宽高等设置 ③一键生成gif ④下载到本…

两种风格的纯CSS3加载动画

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>加载动画</title><style>.loader {w…

蓝桥杯每日一题2023.9.27

4408. 李白打酒加强版 - AcWing题库 题目描述 题目分析 对于这题我们发现有三个变量&#xff0c;店&#xff0c;花&#xff0c;酒的数量&#xff0c;对于这种范围我们使用DP来进行分析。 dp[i][j][k]我们表示有i个店&#xff0c;j朵花&#xff0c;k单位酒的集合&#xff0c…

数据挖掘note(赵老师语录)

&#xff08;一&#xff09; 数据挖掘一般分为机器学习和统计学习&#xff0c;大数据学的课程一般是关于机器学习&#xff0c;我们学的浅&#xff0c;主要关于统计学习&#xff0c;示意图如下所示&#xff1a; 这是一个大数据时代&#xff0c;但是数据挖掘的利用率不足0.5%&am…

MySQL 索引的作用、索引结构及执行流程介绍(索引篇 一)

索引介绍 MySQL索引&#xff08;index&#xff09;是一种用于加快数据库中数据搜索和查询的数据结构。它类似于书籍的目录&#xff0c;可以帮助数据库快速定位和访问特定数据&#xff0c;而无需扫描整个数据表。 索引的作用和缺点 1. 加快数据搜索&#xff1a;通过使用索引&…

linux下离线安装telnet

安装过程概要&#xff1a; &#xff08;一&#xff09;互联网端下载rpm包&#xff1b; &#xff08;二&#xff09;上传到服务器root目录下&#xff1b; &#xff08;三&#xff09;安装telnet服务和测试&#xff1a; 详细内容&#xff1a; &#xff08;一&#xff09;互联…

Redis与分布式-主从复制

接上文 常用中间件-OAuth2 1.主从复制 启动两个redis服务器。 修改第一个服务器地址 修改第二个redis 然后分别启动 redis-server.exe redis.windows.conf) 查看当前服务器的主从状态&#xff0c;打开客户端&#xff1a;输入info replication命令来查看当前的主从状态&am…

601-体育馆的人流量

文章目录 601-体育馆的人流量1. 题目2. 思路3. 解决4. 运行结果 601-体育馆的人流量 1. 题目 2. 思路 思路&#xff1a;查询Stadium表中人流量超过100的记录&#xff0c;将查询结果与自身的临时表连接&#xff0c;再使用where获得满足条件的记录 查询Stadium表中人流量超过10…

【数据分享】2023年我国行政村(社区)点位数据(免费获取\shp格式\excel格式)

行政村&#xff08;社区&#xff09;点位数据是我们各项研究中经常使用到的数据&#xff0c;在之前的文章中我们分享过2022年度的行政村&#xff08;社区&#xff09;点位数据&#xff08;可查看之前的文章获悉详情&#xff09;。本次我们带来的是2023年的全国范围的行政村&…

iOS自动化测试方案(一):MacOS虚拟机保姆级安装Xcode教程

文章目录 一、环境准备二、基础软件三、扩展&#xff1a;usb拓展插件 一、环境准备 1、下载VMware虚拟机的壳子&#xff0c;安装并注册软件(可以百度注册码)&#xff0c;最新版本&#xff1a;v17 2、下MacOS系统iOS镜像文件&#xff0c;用于vmware虚拟机安装&#xff0c;当前镜…

Linux(CentOS/Ubuntu)——安装nginx

如果确定你的系统是基于CentOS或RHEL&#xff0c;可以使用以下命令&#xff1a; ①、安装库文件 #安装gcc yum install gcc-c#安装PCRE pcre-devel yum install -y pcre pcre-devel#安装zlib yum install -y zlib zlib-devel#安装Open SSL yum install -y openssl openssl-de…

【力扣每日一题】2023.9.27 餐厅过滤器

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目挺长&#xff0c;估计中等难度是给在了阅读理解上。 简单来说就是给我们一堆餐厅的信息&#xff0c;每个餐厅拥有五个属性&#xff…

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Badge

可以附加在单个组件上用于信息标记的容器组件。该组件从API Version 7开始支持。 支持单个子组件。子组件类型&#xff1a;系统组件和自定义组件&#xff0c;支持渲染控制类型&#xff08;if/else、ForEach和LazyForEach&#xff09;。 一、接口 方法1&#xff1a; Badge(value…

宁德时代Inside,中国智驾Outside!

随着华为Mate 60系列的未发先售&#xff0c;问界新M7的朋友圈疯狂刷屏到今日刘德华惊喜现身的“华与华”发布会&#xff0c;余承东的一句“遥遥领先”彻底出圈。 华为的“遥遥领先”&#xff0c;早已不止步于智能手机领域。在刚刚结束的华为秋季全场景新品发布会上&#xff0c…

那么国内比较好用的ai写作助手?

在过去的几年里&#xff0c;人工智能&#xff08;AI&#xff09;已经取得了巨大的进步&#xff0c;其中之一就是AI写作助手。这些工具基于先进的自然语言处理技术&#xff0c;可以生成多种类型的文本&#xff0c;包括文章、博客、广告文案、新闻稿等。它们不仅可以提供高质量的…

laravel设置与获取header请求头

laravel设置与获取header请求头 设置 <?phpnamespace App\Http\Controllers\Text;use Illuminate\Http\Request; use App\Http\Controllers\Controller;class TextController extends Controller {public function TextCC(Request $request){$token $request->header(j…

JAXB(Java Architecture for XML Binding)下载、使用

简介 JAXB&#xff08;Java Architecture for XML Binding&#xff09;就是XML数据绑定的java架构。JAXB可以根据XML Schema生成java类&#xff0c;也能根据java类生成XML Schema&#xff0c;能将XML数据unmarshall到Java内容树&#xff0c;也能将Java内容树持久化为XML数据。…

优化Python开发环境的几个神技巧

用Python编代码体验极佳&#xff0c;并且随着新版本的发布越来越好&#xff01; 对于很多人而言&#xff0c;Python提供的大量免费函数库、高可读性的程序和新引入的类型注释让很多爱不释手。 然而&#xff0c;数据科学家特别容易使自己的Jupyter notebook变得庞大而杂乱&…

Archlinux Timeshift的系统备份与还原

服务器在滚挂或误删系统文件,timeshift系统备份与还原的情景: 安装 timeshif 1 yay -s timeshif 备份设置 选择快照类型 此处选择【RSYNC】 选择储存位置 每台设备安装分区不一样,大家安装实际情况选择,一般选择比较大的空间存储,并且最好是机械,这样不容易损坏 设置计…