threejs 微信小程序原生版本的使用 obj模型的加载

直接上代码,

<canvas class="webgl" type="webgl" id="gl" bindtouchstart="onTX" bindtouchend="onTX" bindtouchmove="onTX" style="width:100vw;height:90vh"></canvas>
const common_vendor = require("../../common/vendor.js");Page({onLoad() {const query = common_vendor.index.createSelectorQuery().in(this);query.select("#gl").boundingClientRect((x) => {this.win = x;}).exec();common_vendor.index.createSelectorQuery().select("#gl").node().exec((res) => {const canvas = this.canvas = res[0].node;this.platform = new common_vendor.WechatPlatform(canvas);common_vendor.PLATFORM.set(this.platform);const scene = this.scene = new common_vendor.Scene();scene.background = new common_vendor.Color(16777200);scene.add(new common_vendor.AmbientLight(16777215, 1));scene.add(new common_vendor.DirectionalLight(16777215, 1));const camera = this.camera = new common_vendor.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1e3);camera.position.set(0, 7, 15);const renderer = new common_vendor.WebGL1Renderer({ canvas, antialias: true, alpha: true });renderer.outputEncoding = common_vendor.sRGBEncoding;renderer.setSize(canvas.width, canvas.height);renderer.setPixelRatio(common_vendor.$window.devicePixelRatio);const controls = new common_vendor.OrbitControls(camera, canvas);controls.enableDamping = true;controls.dampingFactor = 0.25;controls.enableZoom = true;var textureLoader = new common_vendor.TextureLoader();var texture = textureLoader.load("https://files.ifok.cn/m2photo");texture.minFilter = common_vendor.LinearFilter;var bump = textureLoader.load("https://files.ifok.cn/security_sign/design_fabric_skin/fabric004.png");const loader = new common_vendor.OBJLoader();loader.load("https://files.ifok.cn/m2_obj/x.obj", (object) => {object.traverse((child) => {child.material = new common_vendor.MeshStandardMaterial({color: 11119017,side: common_vendor.DoubleSide,map: texture,bumpMap: bump,bumpScale: 2});});object.scale.set(0.1, 0.1, 0.1);object.position.set(0, -10, 0);scene.add(object);this.clo_object = object;}, () => {}, () => {});const axesHelper = new common_vendor.AxesHelper(10);scene.add(axesHelper);this.raycaster = new common_vendor.Raycaster();this.mouse = new common_vendor.Vector2();const render = () => {if (!this.disposing)this.frameId = common_vendor.$requestAnimationFrame(render);controls.update();renderer.render(scene, camera);};render();});},onTX(e) {this.platform.dispatchTouchEvent(e);}
})

我使用的是three-platformize,可以通过npm install的方式直接安装的,小程序原生的npm我还没有试过,加载进去后用THREE替换掉common_vendor即可,加载器那里需要导入OBJLoader,然后就可以直接用了

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

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

相关文章

Java中的网络安全与防护策略

Java中的网络安全与防护策略 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在当今信息化时代&#xff0c;网络安全问题日益突出&#xff0c;尤其对于Java开发者来说&#xff0c;保障应用程序和数据…

从0到1构建渠道运营体系:实战案例与策略指南

引言 在当今竞争激烈的市场环境中&#xff0c;有效的渠道运营是企业实现产品或服务快速触达目标用户、提升市场份额的关键。从零开始构建一个高效的渠道运营体系&#xff0c;不仅需要深思熟虑的策略规划&#xff0c;还需要灵活应变的实战操作。本文将结合实战案例&#xff0c;…

react native中使用@react-navigation/native进行自定义头部

react native中使用react-navigation/native进行自定义头部 效果示例图实例代码 效果示例图 实例代码 /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react/no-unstable-nested-components */ import React, { useLayoutEffect } from react; import…

七、Linux二进制安装Redis集群

目录 七、Linux二进制安装Redis集群1 安装Redis所需依赖2 单机安装Redis&#xff08;7.2.4&#xff09;2.1 下载Redis2.2 安装Redis 3 分布式部署模式&#xff08;Redis Cluster&#xff09;3.1 分布式部署模式的配置文件3.2创建集群 4 主从复制模式&#xff08;Redis Sentinel…

解决android native包webview,webview中的请求blocked by CORS policy

在stack overflow查&#xff0c;差不多查到的都是些webView.getSettings().setxxx&#xff0c;没用。在github上找别的类似的android native包webview运行pwa的项目&#xff0c;把它们的webView.getSettings().setxxx全搬过来&#xff0c;写了有一页多&#xff0c;一个有用的都…

鼠标自动点击器怎么用?鼠标连点器入门教程!

鼠标自动点击器是适用于Windows电脑的自动执行鼠标点击操作的工具&#xff0c;主要用于模拟鼠标点击操作&#xff0c;实现鼠标高速点击的操作。通过模拟鼠标点击&#xff0c;可以在用户设定的位置、频率和次数下自动执行点击动作。 鼠标自动点击器主要的应用场景&#xff1a; …

MySQL创建新用户并赋予指定数据库权限

创建账号时并赋予权限语法如下&#xff1a; grant all privileges on *.* to 用户名登录IP或者域名 identified by 登录密码 with grant option;all privileges: 表示授权用户全部权限&#xff0c;当然你也可以指定赋予具体权限&#xff0c;比如SELECT、UPDATE、CREATE、DROP等…

Wing FTP Server

文章目录 1.Wing FTP Server简介1.1主要特点1.2使用教程 2.高级用法2.1Lua脚本,案例1 1.Wing FTP Server简介 Wing FTP Server&#xff0c;是一个专业的跨平台FTP服务器端&#xff0c;它拥有不错的速度、可靠性和一个友好的配置界面。它除了能提供FTP的基本服务功能以外&#…

当心!不要在SpringBoot中再犯这样严重的错误

1. 简介 在Spring Boot中&#xff0c;Configuration注解用于声明配置类&#xff0c;以定义和注册Bean对象。这些Bean对象可以是普通的业务组件&#xff0c;也可以是特殊的处理器&#xff0c;如BeanPostProcessor或BeanFactoryPostProcessor&#xff0c;用于在Spring容器中对其…

比 PIP 快 100 倍的安装工具

uv 是一个由 Rust 开发的 pip 工具&#xff0c;比 pip 快 100 倍&#xff0c;难以置信&#xff0c;不过真的是快太多了。 安装 在 Mac 上直接通过 brew install uv 安装即可。 venv 创建运行环境&#xff0c;默认当前目录下 .venv uv venv 依赖安装 uv pip install -r re…

AGI|Transformer自注意力机制超全扫盲攻略,建议收藏!

一、前言 2017年&#xff0c;谷歌团队推出一篇神经网络的论文&#xff0c;首次提出将“自注意力”机制引入深度学习中&#xff0c;这一机制可以根据输入数据各部分重要性的不同而分配不同的权重。当ChatGPT震惊世人时&#xff0c;Transformer也随之进入大众视野。一夜之间&…

第三届图像处理、目标检测与跟踪国际学术会议(IPODT 2024,8月9-11)

第三届图像处理、目标检测与跟踪国际学术会议&#xff08;IPODT 2024&#xff09;将于2024年8月9-11日在中国南京召开。 本次会议旨在为全球的研究人员、工程师、学者和业界专家提供一个展示和讨论图像处理、目标检测与跟踪最新进展的平台&#xff0c;促进这些领域的科研与技术…

c++11新特性-5-final与override

文章目录 final1.修饰函数2.修饰类 override final C 中增加了 final 关键字来 限制某个类不能被继承&#xff0c;或者某个虚函数不能被重写&#xff0c;和 Jave 的 fina 关键字的功能是类似的。 如果使用 final 修饰函数&#xff0c;只能修饰虚函数&#xff0c;并且要把final…

VPSA制氧设备在不同行业的应用解析

VPSA制氧设备以其独特的吸附原理&#xff0c;能够在穿透大气压的条件下&#xff0c;通过专用的分子筛选择性吸附空气中的氮气、二氧化碳和水等杂质&#xff0c;从而制得纯度较高的氧气。本文将探讨VPSA制氧设备在不同行业中的应用及其重要性。 一、钢铁行业 在钢铁行业中&#…

【自组织竞争网络】自组织竞争网络进行分类的一个小案例

【自组织竞争网络】自组织竞争网络进行分类的一个小案例 注&#xff1a;本文仅作为自己的学习记录以备以后复习查阅 一 概述 自组织神经网络可以通过对客观事件的重复分析学习该事件的内在规律&#xff0c;并对具有类似/共同特征的新事物进行分类&#xff0c;它的基本思想类似…

linux初始化一个文件系统

在 Linux 系统中&#xff0c;初始化一个文件系统包括创建分区、格式化分区以及挂载分区。以下是初始化一个文件系统的详细步骤&#xff1a; 1. 创建分区&#xff1a; 使用 fdisk 或 parted 工具来创建新的分区。例如&#xff0c;使用 fdisk 工具&#xff1a; bash sudo fdi…

vue3中pinia使用持久化管理

安装插件 npm install pinia pinia-plugin-persistpinia进行注册 创建index.ts import { createPinia } from pinia; //对外暴露大仓库 export default createPinia(); 在mian.ts //引入pinpa import { createApp } from vue //引入根组件 import App from ./App.vue const…

渲染农场渲染真的很贵吗?如何正确使用云渲染农场?

作为渲染行业主流的技术服务“渲染农场"&#xff0c;一直都是备受大家关注&#xff0c;渲染农场最核心的在于充足的计算机算力&#xff0c;结合3D软件支持多台机器渲染的特点&#xff0c;租用渲染农场的机器帮助你快速的解决你的渲染项目。 虽然说渲染农场需要支付一定的…

vue3 滚动条滑动到元素位置时,元素加载

水个文 效果 要实现的思路就是&#xff0c;使用IntersectionObserver 检测元素是否在视口中显示&#xff0c;然后在通过css来进行动画载入。 1.监控元素是否视口中显示 const observer new IntersectionObserver((entries) > {entries.forEach((entry) > {if (entry.i…

视频技术助力智慧城市一网统管:视频资源整合与智能化管理

随着信息技术的飞速发展&#xff0c;智慧城市已成为现代城市发展的重要方向。在智慧城市建设中&#xff0c;一网统管作为城市管理的重要策略&#xff0c;通过整合各类信息资源&#xff0c;实现资源的优化配置和问题的快速响应。其中&#xff0c;视频技术作为一网统管场景中的关…