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,一经查实,立即删除!

相关文章

从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…

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

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

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;促进这些领域的科研与技术…

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

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

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

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

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;视频技术作为一网统管场景中的关…

与Flat Ads相约ChinaJoy 2024,共探全球化增长

在当今全球数字化浪潮的推动下,游戏产业作为文化与技术融合的先锋,正以前所未有的速度跨越国界,开启全球化发展的新篇章。随着第二十一届ChinaJoy的临近,全球的目光再次聚焦于上海新国际博览中心,这里即将成为数字娱乐与科技创新碰撞与交融的璀璨舞台。 而在这场盛会上,Flat A…

安装Nginx以及简单使用 —— windows系统

一、背景 Nginx是一个很强大的高性能Web和反向代理服务&#xff0c;也是一种轻量级的Web服务器&#xff0c;可以作为独立的服务器部署网站&#xff0c;应用非常广泛&#xff0c;特别是现在前后端分离的情况下。而在开发过程中&#xff0c;我们常常需要在window系统下使用Nginx作…

光耦合器的未来概述

光耦合器也称为光隔离器&#xff0c;长期以来一直是电子系统中必不可少的组件&#xff0c;其中输入和输出电路之间的隔离至关重要。从工业自动化到消费电子产品&#xff0c;它们在电气隔离输入和输出侧的同时传输信号的能力使它们变得不可或缺。随着技术的不断发展&#xff0c;…

docker也能提权??内网学习第6天 rsync未授权访问覆盖 sudo(cve-2021-3156)漏洞提权 polkit漏洞利用

现在我们来说说liunx提权的操作&#xff1a;前面我们说了环境变量&#xff0c;定时任务来进行提权的操作 rsync未授权访问覆盖 我们先来说说什么是rsync rsync是数据备份工具&#xff0c;默认是开启的873端口 我们在进行远程连接的时候&#xff0c;如果它没有让我们输入账号…

震惊!张宇25版高数18讲发布,656页惹争议!

这个张宇老师在微博已经解释过了&#xff01; 我觉得张宇老师本意是好的&#xff0c;在考研数学教学创新这方面&#xff0c;他真的有自己的思考。 他为什么要这么做&#xff1f; 其实作为一个考研高数老师&#xff0c;他完全可以像其他老师一样&#xff0c;什么都不做&#x…