uniApp使用XR-Frame创建3D场景(3)光源投影的运用。

上一篇讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。

这篇我们讲解光源在场景中的运用以及相关属性。

在子组件 xr-startindex.wxml文件中我们加入如下代码


<xr-scene render-system="alpha:true" bind:ready="handleReady"><xr-node><xr-light type="ambient" color="1 1 1" intensity="1" /><xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow /><xr-meshnode-id="cube" cast-shadowgeometry="cube" uniforms="u_baseColorFactor:0.8 0.4 0.4 1"/><xr-meshposition="0 -1 0" scale="4 1 4" receive-shadowgeometry="plane" uniforms="u_baseColorFactor:0.4 0.6 0.8 1"/></xr-node><xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="cube" camera-orbit-control/>
</xr-scene>

这里有几点需要说明

1.<xr-node>标签,表示一个节点,这个可有可无,因为可以通过设置这个节点的隐藏属性直接控制子节点的显示与隐藏,所以常用于控制其下一组节点的动态显示或者同意的形变

2.<xr-light>标签,表示要在场景中添加光源,标签中的type属性为要添加的光源类型,这里分为两类:主光源追加光源

我们主要用到的光源就是四种

(1)环境光:ambient

支持颜色color和亮度intensity,直接影响物体的基础颜色和亮度。

(2)平行光:directional

支持颜色color和亮度intensity,以及通过旋转rotation决定的方向,为物体表面通过不同光照算法提供明暗。

(3)点光源:point

支持颜色color和亮度intensity,以及position决定的位置和range决定的照亮范围。

(4)聚光灯:spot

支持颜色color和亮度intensity,以及position决定的位置、rotation决定的方向、range决定的照亮范围,和inner-cone-angleouter-cone-angle决定的锥角。

3.<xr-mesh>标签,表示要在场景中添加的几何体,上一篇文章我们分别添加了4个内置的几何体。

这里我们只添加了两个集合体,一个 geometry为cube,表示这是一个正方体的盒子模型,另一个 geometry为plane,表示这个几何体是一个平面。

cube几何体中有一个属性cast-shadow,表示这个几何体要投射阴影

plane几何体中一个属性receive-shadow,表示这个平面体要接收投影。

4.<xr-camear>标签,表示场景中的摄像机,这个标签有一个target属性,这个属性值是场景中几何体的id,在这里表示要对准正反体。

5.运行模拟器应该会看到下面的效果

这里给大家推荐一个微信小程序 3D模型素材库,这个小程序中的模型都是针对小程序优化后的glb格式文件,体积小,加载快,非常适合小程序使用

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

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

相关文章

PG中的一例简单的update看表膨胀

PostgreSQL数据库的MVCC机制中,一个明显的特点是,在执行DELETE操作,它一般并不立即擦除要删的数据,通常只是做一个标记,留给VACUUM进程去做相应的清理,并且是有条件的清理。 而UPDATE操作,则更是一个DELETE操作和一个INSERT操作的组合。INSERT操作则通常会APPEND一条记…

操作系统系列学习——内存分区与分页

文章目录 前言内存分区与分页 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划学习操作系统并完成6.0S81&#xff0c;加油&#xff01; 本文总结自B站【哈工大】操作系统 李治军&#xff08;全32讲&#xff09; 老师课程讲的非常好&#xff0c;感谢 【哈工…

stm32开发环境搭建

软件驱动安装 安装Keil5 MDK 安装器件支持包 软件注册 安装STLINK驱动 安装USB转串口驱动 新建工程步骤 keil中创建工程,并选择对应的芯片型号 工程文件夹下新建Start文件夹,并添加以下文件: Libraries\CMSIS\CM3\DeviceSupport\ST\STM32F10x\startup\arm下的8个启动文件…

MATLAB机器学习工具箱——傻瓜式操作

一、使用回归学习器预测北京二手房房价 软件&#xff1a;MATLAB R2023 a 数据&#xff1a; 第一步&#xff1a;导入原始数据和待预测数据 第二步 &#xff1a;打开工具箱中的回归学习器导入学习数据 1.新建会话 2.寻找导入learning data 3.自动锁定前7列为自变量&#xff…

共射极放大电路理论计算

目录&#xff1a; 1、概述 2、理论计算 3、Multisim仿真验证 1&#xff09;静态工作点与放大倍数 2&#xff09;输入阻抗仿真 1、概述 如下图所示的共射极放大电路&#xff0c;本内容主要计算静态工作点电压、电压放大倍数与输入输出阻抗。 2、理论计算 列出方程如下&am…

AndroidStudio中一些实用插件

1.RainbowBrackets插件为圆括号、方括号和花括号内的代码添加了漂亮的彩虹色 2.CodeGlance类似于Sublime或Xcode&#xff0c;CodeGlance插件在编辑器中嵌入了代码迷你图。滚动条也有所增大。在CodeGlance预览文件的代码模式下&#xff0c;用户可以快速导航到目标处。 3.ADBWifi…

java数据结构与算法刷题-----LeetCode540. 有序数组中的单一元素

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 异或运算2. 全数组二分查找异或奇偶3. 偶数下标二分查找 1. 异…

前端如何判断元素是否到达可视区域

以图片显示为例&#xff1a; window.innerHeight 是浏览器可视区的高度&#xff1b;document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离&#xff1b;imgs.offsetTop 是元素顶部距离文档顶部的高度&#xff08;包括滚动条的距离&#xff0…

备战面试:Java基础二

continue、break 和 return 的区别是什么? 在循环结构中&#xff0c;当循环条件不满足或者循环次数达到要求时&#xff0c;循环会正常结束。但是&#xff0c;有时候可能需要在循环的过程中&#xff0c;当发生了某种条件之后 &#xff0c;提前终止循环&#xff0c;这就需要用到…

快速上手Spring Cloud 十一:微服务架构下的安全与权限管理

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

机器学习——聚类算法-层次聚类算法

机器学习——聚类算法-层次聚类算法 在机器学习中&#xff0c;聚类是一种将数据集划分为具有相似特征的组或簇的无监督学习方法。聚类算法有许多种&#xff0c;其中一种常用的算法是层次聚类算法。本文将介绍聚类问题、层次聚类算法的原理、算法流程以及用Python实现层次聚类算…

蓝桥杯练习题——博弈论

1.必胜态后继至少存在一个必败态 2.必败态后继均为必胜态 Nim游戏 思路 2 3&#xff0c;先手必赢&#xff0c;先拿 1&#xff0c;然后变成 2 2&#xff0c;不管后手怎么拿&#xff0c;先手同样操作&#xff0c;后手一定先遇到 0 0 a1 ^ a2 ^ a3 … ^ an 0&#xff0c;先…

【文献分享】myMUSCLE, a New Multiphysics, Multiscale Simulation Coupling Environment

题目&#xff1a;myMUSCLE, a New Multiphysics, Multiscale Simulation Coupling Environment 链接&#xff1a; https://doi.org/10.1080/00295639.2022.2148809 myMUSCLE&#xff0c;一种新的多物理场、多尺度仿真耦合环境 摘要 计算能力的提高使核界能够结合有关反应…

【保姆级讲解如何Chrome安装Vue-devtools的操作】

&#x1f308;个人主页:程序员不想敲代码啊&#x1f308; &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f3c6; &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提…

vue3 hooks之事件广播(支持跨标签页)

/**** 同源下的全局事件总线&#xff0c;支持跨标签页通信* 第一步&#xff1a;注册事件* 第二步&#xff1a;广播事件* 第三步&#xff1a;处理事件*/// source&#xff1a;消息发起源href&#xff0c;将在跨标签页通信时传入 interface callback {(data: any, source: any): …

github配置ssh

生成公钥 在电脑用户的目录下打开终端执行 ssh-keygen -t rsa: 执行完不要关 配置文件 看看用户的目录里 .ssh 目录&#xff1a; Host github.comHostname ssh.github.comPort 443配置公钥 复制 id_rsa.pub 文件里的内容 粘贴到 github上 连接密钥 回到刚才的终端…

sql语句的常用方法以及sql语句的通用方法

SQL语句常用方法及步骤 一、sql七步曲1.七步曲2.DVD数据库中的表的设计详情&#xff1a; 二、增三、删四、改五、查六、方法优化1--非查找七、方法优化2--查找总结 一、sql七步曲 1.七步曲 1.手动加载数据库驱动类 2.获得数据库连接对象 3.写sql语句 4.获得执行对象 5.执行命…

Leaflet 中创建一个二维地图

要在 Leaflet 中创建一个二维地图&#xff0c;需要以下步骤&#xff1a; 1. 引入 Leaflet 库 首先&#xff0c;你需要在 HTML 文件中引入 Leaflet 库的 CSS 和 JavaScript 文件。你可以从官方网站下载 Leaflet&#xff0c;或者通过 CDN 引入。 <!-- Leaflet CSS --> &…

【QQ版】QQ群短剧机器人源码 全网短剧机器人插件

内容目录 一、详细介绍二、效果展示2.效果图展示 三、学习资料下载 一、详细介绍 QQ版本可以兼容两个框架&#xff08;HTQQ&#xff0c;MYQQ这两个的vip版也可以使用) 支持私聊与群聊&#xff0c;命令是 搜剧影视关键词 如果无法搜索到影视资源&#xff0c;请使用下方命令&…

推特Twitter有直播功能吗?如何用Twitter直播?

现在各大直播平台已经成为社交媒体营销的一种重要渠道&#xff0c;它让品牌能够即时地与全球受众进行互动。据统计&#xff0c;直播市场正在迅速增长&#xff0c;预计到2028年将达到2230亿美元的规模。在这个不断扩张的市场中&#xff0c;许多社交媒体平台如YouTube、Facebook、…