微信小程序加载3D模型

技术栈：Three.js

插件：ThreeX

要求：模型格式GLB 需要挂载在服务器或者是个链接都可以

文件目录：

jsm是本地依赖包

代码：

wxml

  <canvas id="canvas_webgl" type="webgl" disable-scroll="true" bindtouchstart="webgl_touch" bindtouchmove="webgl_touch" bindtouchend="webgl_touch" bindtouchcancel="webgl_touch" style="width: 100%; height: 500rpx;"></canvas>

// webgl_nodes/webgl_nodes_loader_gltf_sheen.js
import {document,window,requestAnimationFrame,cancelAnimationFrame,Event,core
} from 'dhtml-weixin';
import * as THREE from '../../three/Three.js';import {NodeMaterial,color,uv,mix,mul,checker,float
} from '../jsm/nodes/Nodes.js';import {nodeFrame
} from '../jsm/renderers/webgl/nodes/WebGLNodes.js';import {OrbitControls
} from '../jsm/controls/OrbitControls.js';
import {GLTFLoader
} from '../jsm/loaders/GLTFLoader.js';
import {RoomEnvironment
} from '../jsm/environments/RoomEnvironment.js';
import {GUI
} from '../jsm/libs/lil-gui.module.min.js';
// TODO: 找对应的位置
// var result = "";
var requestId
Page({/*** 页面的初始数据*/data: {},// Three.jsonUnload() {cancelAnimationFrame(requestId, this.canvas)this.worker && this.worker.terminate()setTimeout(() => {if (this.renderer instanceof THREE.WebGLRenderer) {this.renderer.dispose()this.renderer.forceContextLoss()this.renderer.context = nullthis.renderer.domElement = nullthis.renderer = null}}, 0)},webgl_touch(e) {const web_e = Event.fix(e)//window.dispatchEvent(web_e)//document.dispatchEvent(web_e)this.canvas.dispatchEvent(web_e)},async onLoad() {const canvas3d = this.canvas = await document.createElementAsync("canvas", "webgl")var that = thislet camera, scene, renderer, controls;init();animate();function init() {const container = document.createElement('div');document.body.appendChild(container);camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20);camera.position.set(1, 0.4, 0);scene = new THREE.Scene();// 添加坐标轴const axesHelper = new THREE.AxesHelper(5);scene.add(axesHelper);// modelnew GLTFLoader().load('https://obs.51jianmo.com/jmyd/user/20230421/1b70dea5-52ec-42f0-bb9d-276cdb609227.glb', function (gltf) {gltf.scene.scale.set(0.5, 1, 0.5);gltf.scene.position.set(0, 0, 0);scene.add(gltf.scene);const object = gltf.scene.getObjectByName('SheenChair_fabric');// Convert to NodeMaterialconst material = NodeMaterial.fromMaterial(object.material);const checkerNode = checker(mul(uv(), 5));material.sheenNode = mix(color(0x00ffff), color(0xffff00), checkerNode);material.sheenRoughnessNode = checkerNode;object.material = material;});renderer = that.renderer = new THREE.WebGLRenderer({canvas: canvas3d,antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.toneMapping = THREE.ACESFilmicToneMapping;renderer.toneMappingExposure = 1;renderer.outputEncoding = THREE.sRGBEncoding;container.appendChild(renderer.domElement);const environment = new RoomEnvironment();const pmremGenerator = new THREE.PMREMGenerator(renderer);scene.background = new THREE.Color("#a9988c");scene.environment = pmremGenerator.fromScene(environment).texture;controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.minDistance = 1;controls.maxDistance = 10;controls.target.set(0, 0.35, 0);controls.update();window.addEventListener('resize', onWindowResize);}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}//function animate() {requestId = requestAnimationFrame(animate);nodeFrame.update();controls.update(); // required if damping enabledrender();}function render() {renderer.render(scene, camera);}}
})

演示效果：

微信小程序加载3D模型相关推荐

php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
【Threejs 微信小程序】小程序加载外部模型后对模型进行平移旋转操作
一.效果展示需要实现的功能,对已经加载进小程序里的模型进行沿着xyz轴方向去旋转和平移. 如下图的效果: 点击底部的按钮,对模型进行平移和旋转操作. 二.方法描述关于平移和旋转的方法比如沿着 Y ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序加载百度地图
1:申请百度地图服务的ak,(个人感觉浏览器和小程序类型没区别,甚至浏览器比小程序更好) 2:配置地图服务,微信小程序开发平台,设置开发设置 3:小程序里添加地图服务的js文件bmap-wx.min. ...
有效解决微信小程序加载视频[渲染层网络层错误] Failed to load media
问题1,小程序的视频一般都是放在网络上的,没谁能把视频放本地把,所以在小程序视频插件在加载视频的时候,就会出现如下错误:[渲染层网络层错误] Failed to load media wxml加载视频 ...
微信小程序加载中动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
微信小程序加载 HTML 标签
肯定有小伙伴遇到过这个问题:加载的数据是一堆HTML 标签这就尴尬了,因为小程序没有提供 webview 来加载这些 HTML.但是不用慌,小程序不提供我们可以自己造个新轮子,自己造不出新轮子咱们找到 ...

微信小程序加载3D模型

微信小程序加载3D模型相关推荐

最新文章

热门文章

微信小程序 加载3D模型

微信小程序 加载3D模型相关推荐

最新文章

热门文章

微信小程序加载3D模型

微信小程序加载3D模型相关推荐