微信小程序threejs三维开发

news2025/3/16 3:44:27

微信小程序threejs开发

import * as THREE from 'three';

const {

performance,

  document,

  window,

  HTMLCanvasElement,

  requestAnimationFrame,

  cancelAnimationFrame,

core,

  Event,

  Event0

} = THREE .DHTML

import Stats from 'three/examples/jsm/libs/stats.module.js';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

import { OrbitControls0 } from 'three/examples/jsm/controls/OrbitControls0.js';

import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

var requestId

Page({

  onUnload() {

    cancelAnimationFrame(requestId, this.canvas)

    this.worker && this.worker.terminate()

if(this.canvas) this.canvas = null

    setTimeout(() => {

      if (this.renderer instanceof THREE.WebGLRenderer) {

        this.renderer.dispose()

        this.renderer.forceContextLoss()

        this.renderer.context = null

        this.renderer.domElement = null

        this.renderer = null

      }

    }, 10)

  },

  webgl_touch(e){

    const web_e = (window.platform=="devtools"?Event:Event0).fix(e)

    this.canvas.dispatchEvent(web_e)

  },

  onLoad() {

    document.createElementAsync("canvas", "webgl2",this).then(canvas => {

      this.canvas = canvas

      this.body_load(canvas).then()

    })

  },

  async body_load(canvas3d) {

    let mixer;

    const clock = new THREE.Clock();

    const container = document.getElementById('container');

    const stats = new Stats();

    container.appendChild(stats.dom);

    const renderer = new THREE.WebGLRenderer( { antialias: true } );

    renderer.setPixelRatio( window.devicePixelRatio );

    renderer.setSize( window.innerWidth, window.innerHeight );

    container.appendChild( renderer.domElement );

    const pmremGenerator = new THREE.PMREMGenerator( renderer );

    const scene = new THREE.Scene();

        var AmbientLight = new THREE.AmbientLight(0xffffff,1)

    scene.add(AmbientLight)

    ///

    /*

          var spotLight = new THREE.SpotLight(0xaaaaaa, 1) //聚光灯

        spotLight.position.set(0, 0, 10)

        spotLight.lookAt(scene.position)

        scene.add(spotLight)*/

    //   

/*

    var directionalLight = new THREE.DirectionalLight(0xaaaaaa, 1) //方向光

    directionalLight.position.set(0, 0, 10)

    directionalLight.lookAt(scene.position)

    scene.add(directionalLight)*/

    

    scene.background = new THREE.Color( 0xbfe3dd );

    scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ), 0.04 ).texture;


 

    const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);

    camera.position.set(5, 2, 8);

    const controls = new (window.platform=="devtools"?OrbitControls:OrbitControls0)(camera, renderer.domElement);

    controls.target.set(0, 0.5, 0);

    controls.update();

    controls.enablePan = true;

    controls.enableDamping = true;

    const dracoLoader = this.dracoLoader = new DRACOLoader();

    dracoLoader.setDecoderPath('jsm/libs/draco/gltf/');

    const loader = new GLTFLoader();

    loader.setDRACOLoader(dracoLoader);

    //loader.load('https://statics.jiuqianqu.com/btwc-file/20230222/1677055512471.glb', function (gltf) {

    loader.load('models/gltf/LittlestTokyo.glb', function (gltf) {

      //console.error("xxxxxxx",gltf)

      /*  gltf.scene.traverse(function (child) {

            if (child.isMesh) {

                child.frustumCulled = false;

                //模型阴影

                child.castShadow = true;

                //模型自发光

              child.material.emissive = child.material.color;

                child.material.emissiveMap = child.material.map;

            }

        })*/

      const model = gltf.scene;

      model.position.set(1, 1, 0);

      model.scale.set(0.01, 0.01, 0.01);

      scene.add(model);

      mixer = new THREE.AnimationMixer(model);

      mixer.clipAction(gltf.animations[0]).play();

      animate();

    },null, function (e) {

      console.error(e);

    });


 

    window.onresize = function () {

      camera.aspect = window.innerWidth / window.innerHeight;

      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);

    };


 

    function animate() {

      requestId = requestAnimationFrame(animate);

      const delta = clock.getDelta();

      mixer.update(delta);

      controls.update();

      // //stats.update();

      renderer.render(scene, camera);

    }

  }

})

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

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

相关文章

大数据-spark3.5安装部署之standalone模式

真实工作中还是要将应用提交到集群中去执行,Standalone模式就是使用Spark自身节点运行的集群模式,体现了经典的master-slave模式。集群共三台机器,具体如下 u22server4spark: master worker u22server4spark2: worke…

技术视界|构建理想仿真平台,加速机器人智能化落地

在近期的 OpenLoong 线下技术分享会 上,松应科技联合创始人张小波进行了精彩的演讲,深入探讨了仿真技术在机器人智能化发展中的关键作用。他结合行业趋势,剖析了现有仿真平台的挑战,并描绘了未来理想仿真系统的设计理念与实现路径…

AutoGen多角色、多用户、多智能体对话系统

2023-03-11-AutoGen 使用【autoGenchainlitdeepSeek】实现【多角色、多用户、多智能体对话系统】 1-核心思路 01)技术要点:autoGenchainlitdeepSeek02)什么是autoGen->autogen是微软旗下的多智能体的框架03)什么是chainlit-&g…

SQL99 多表查询

内连接: select name, depart_name, city from employee e join department d on e.depart_id d.depart_id join location l on d.locat_id l.locat_id; 外连接 注:本图取自博客园大佬"anliux"的博客,原帖链接:【学…

sql靶场5-6关(报错注入)保姆级教程

目录 sql靶场5-6关(报错注入)保姆级教程 1.第五关 1.步骤一(闭合) 2.步骤二(列数) 3.报错注入深解 4.报错注入格式 5.步骤三(数据库表名) 6.常用函数 7.步骤四(表…

矩阵分析-浅要理解(深度学习方向)

梯度分析与最优化 在深度学习的任务中,我们所期望的是训练一个神经网络,使得预测结果与真实标签之间的误差最小化,这可以近似看作是一个提供梯度下降等优化找到全局最优解的凸优化问题。 奇异值分解 在信息工程领域,对数据处理的…

校园安全用电怎么保障?防触电装置来帮您

引言 随着教育设施的不断升级和校园用电需求的日益增长,校园电力系统的安全性和可靠性成为了学校管理的重要课题。三相智能安全配电装置作为一种电力管理设备,其在校园中的应用不仅能够提高电力系统的安全性,还能有效保障师生的用电安全&am…

第十五届蓝桥杯大学B组(握手问题、小球反弹、好数)

一、握手问题 思路1&#xff1a; 1)先让所有人相互握手 第一个人49次 第二个人48次 第五十个人0次 共计01249 2)减去7个没握手的 016 #include<stdio.h> int main() {int a 50*49/2 - 7*6/2;printf("%d\n",a);return 0; } 运行结果&#xf…

【教学类-43-26】20240312 数独4宫格的所有可能(图片版 576套样式,空1格-空8格,每套65534张*576小图=3千万张小图)

背景需求&#xff1a; 之前做了三宫格所有可能图片 510小图*12套6120图&#xff0c;所以3分钟就生成了 【教学类-43-25】20240311 数独3宫格的所有可能&#xff08;图片版 12套样式&#xff0c;空1格-空8格&#xff0c;每套510张&#xff0c;共6120小图&#xff09;-CSDN博客…

如何手动使用下载并且运行 QwQ-32B-GGUF

首先使用安装 pip install ModelScope 使用 ModelScope 下载对应的模型 modelScope download --model Qwen/QwQ-32B-GGUF qwq-32b-q4_k_m.gguf 第二步开始下载 ollama git clone https://githubfast.com/ggerganov/llama.cpp # githubfast.com 可以加速下载 切换到目录&am…

Spring Boot对接twilio发送邮件信息

要在Spring Boot应用程序中对接Twilio发送邮件信息&#xff0c;您可以使用Twilio的SendGrid API。以下是一个简单的步骤指南&#xff0c;帮助您完成这一过程&#xff1a; 1. 创建Twilio账户并获取API密钥 注册一个Twilio账户&#xff08;如果您还没有的话&#xff09;。在Twi…

约束优化技术:KKT条件的完整推导与应用

前言 本文隶属于专栏《机器学习数学通关指南》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见《机器学习数学通关指南》 ima 知识库 知识库广场搜索&#…

对比文章相似度的余弦相似度算法的原理

近期不是项目遇到对比代码的相似度&#xff0c;来判断代码是否存在抄袭嘛。通过研究采用了余弦相似度来对比。既然接触的一个新的东西&#xff0c;怎么也得研究下吧。 一、什么是余弦相似度 利用余弦相似度对比文章相似度的原理&#xff0c;主要基于向量空间模型&#xff0c;通…

DeepSeek结合Mermaid绘图(流程图、时序图、类图、状态图、甘特图、饼图)转载

思维速览&#xff1a; 本文将详细介绍如何利用DeepSeek结合Mermaid语法绘制各类专业图表&#xff0c;帮助你提高工作效率和文档质量。 ▍DeepSeek入门使用请看&#xff1a;deepseek保姆级入门教程&#xff08;网页端使用 本地客户端部署 使用技巧&#xff09; DeepSeek官网…

玩转云服务器——阿里云操作系统控制台体验测评

在云服务器日益普及的背景下&#xff0c;运维人员对操作系统管理工具的要求不断提高。我们需要一款既能直观展示系统状态&#xff0c;又能智能诊断问题&#xff0c;提供专业指导的控制台。阿里云操作系统管理平台正是基于API、SDK、CLI等多种管理方式&#xff0c;致力于提升操作…

Linux 安装 Oh My Zsh

1. 简介 Zsh&#xff08;Z Shell&#xff09;是一款功能强大的 Shell&#xff0c;相比 Bash 提供了更强的 自动补全、命令高亮、插件支持 等功能。而 Oh My Zsh 是一个 Zsh 的增强管理工具&#xff0c;让你可以轻松安装插件和主题&#xff0c;极大提高开发效率。 本教程将详细…

方差,协方差及协方差矩阵的计算

1.方差 方差是用来衡量一组数据的离散程度&#xff0c;数序表达式如下: σ 2 1 N ∑ i 1 N ( x i − μ ) 2 \sigma^2\frac1N\sum_{i1}^N(x_i-\mu)^2 σ2N1​i1∑N​(xi​−μ)2 σ 2 σ^2 σ2表示样本的总体方差&#xff0c; N N N 表示样本总数&#xff0c; x i x _i xi​…

DeepSeek-R1思路训练多模态大模型-Vision-R1开源及实现方法思路

刚开始琢磨使用DeepSeek-R1风格训练多模态R1模型&#xff0c;就看到这个工作&#xff0c;本文一起看看&#xff0c;供参考。 先提出问题&#xff0c;仅靠 RL 是否足以激励 MLLM 的推理能力&#xff1f; 结论&#xff1a;不能&#xff0c;因为如果 RL 能有效激励推理能力&#…

Unity 创建签名证书、获取签名证书信息,证书指纹

目录 一&#xff1a;创建签名证书 二&#xff1a;自动填写密码 ​编辑 三&#xff1a;获取签名证书的信息 后言 &#x1f451;&#x1f451;&#x1f451; 一&#xff1a;创建签名证书 首先确保Unity是安卓打包&#xff0c;然后按图操作 会打开下图页面 选择你要创建到的…

在AIStudio飞桨星河社区一键部署DeepSeek-r1:70b模型

随着DeepSeek的火热&#xff0c;市面上出现大量的第三方的API服务区&#xff0c;但是对于对安全、隐私、控制有一定需求的用户&#xff0c;还是会希望能够自主部署DeepSeek 。 实践下来&#xff0c;用自己的机器部署是一条解决之道&#xff0c;但是推理起来&#xff0c;cpu和内…