uniapp中使用threejs加载几何体

我的建议是使用这个库

https://github.com/deepkolos/three-platformize

为什么?我试了uniapp推荐的和threejs-miniprogram这个小程序官方库,都加载不出来我的obj模型。所有我推荐不要用obj模型最好,挺多都支持GLTF模型的,但是我不能改。

安装,使用pnpm比较快

复制代码
pnpm install three-platformize

以下是完整代码

复制代码
<template>
	<view class="content">
		<canvas type="webgl" id="webgl" style="width: 100vw; height: 100vh;" @touchstart="touchStart"
			@touchmove="touchMove" @touchend="touchEnd" />
	</view>
</template>

<script>
	import {
		WechatPlatform
	} from 'three-platformize/src/WechatPlatform';
	import * as THREE from 'three-platformize';
	//轨道控制器
	import {
		OrbitControls
	} from 'three-platformize/examples/jsm/controls/OrbitControls'
	export default {
		data() {
			return {
				platform: ''
			};
		},
		mounted() {
			uni.createSelectorQuery()
				.in(this)
				.select('#webgl')
				.fields({
					node: true
				})
				.exec(res => {
					console.log('res', res[0].node);
					const canvas = res[0].node;
					console.log('canvas', canvas);
					const platform = new WechatPlatform(canvas); // webgl canvas
					console.log('1111', platform);
					platform.enableDeviceOrientation('game'); // 开启DeviceOrientation
					THREE.PLATFORM.set(platform);
					this.platform = platform;
					var scene = new THREE.Scene();
					var camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
					camera.position.set(0, 0, 10);
					scene.add(camera);
					const geometry = new THREE.BoxGeometry(1, 1, 1);
					const materials = new THREE.MeshBasicMaterial();
					const cube = new THREE.Mesh(geometry, materials);
					scene.add(cube);
					const light = new THREE.AmbientLight(0xffffff);
					scene.add(light);
					//注意,这里必须要添加一个{ canvas: canvas },不然会报createElementNS错误
					const renderer = new THREE.WebGLRenderer({
						canvas: canvas
					});
					renderer.setSize(canvas.width, canvas.height);
					const controls = new OrbitControls(camera, renderer.domElement);

					function animate() {
						//这里不再是requestAnimationFrame而是canvas.requestAnimationFrame
						canvas.requestAnimationFrame(animate);
						renderer.render(scene, camera);
					}
					animate();
				});


		},
		methods: {
			touchStart(e) {
				this.platform.dispatchTouchEvent(e);
			},
			touchMove(e) {
				this.platform.dispatchTouchEvent(e);
			},
			touchEnd(e) {
				this.platform.dispatchTouchEvent(e);
			}
		}
	}
</script>


<style>

</style>
相关推荐
AI多Agent协作实战派2 小时前
AI多Agent协作系统实战(二十八):顶栏统一战争——从1个页面异常到31个页面全量对齐
数据库·人工智能·uni-app
00后程序员张2 小时前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone
2501_9160088919 小时前
iOS IPA文件反编译与打包操作方法,拆包分析防护和加固打包
android·macos·ios·小程序·uni-app·cocoa·iphone
name好难取诶1 天前
通过对云基座和离线基座的对比,帮助开发者理解如何在不同场景下选择合适的打包方案。 什么是“基座” 在 UniApp 中,基座(也称“ ...
开发语言·uni-app·php
2501_915921431 天前
iOS手游安全反外挂解决方案:基于Xcode的加固混淆特色详解
android·安全·ios·小程序·uni-app·iphone·xcode
2501_916007471 天前
iOS App分发教程 App Store、TestFlight 与 Ad Hoc 的配置与上传方法
android·ios·小程序·https·uni-app·iphone·webview
qq_316837751 天前
uniapp 打包APP 使用 Galacean Effects 的特效
uni-app
古韵2 天前
你的 uni-app 分页,一个 hook 搞定竞态和加载
javascript·vue.js·uni-app
游戏开发爱好者82 天前
iOS应用加固方案全解析:源码加固与IPA在线加固对比
android·macos·ios·小程序·uni-app·cocoa·iphone
满栀5852 天前
uni-app 小程序开发实战:从路由踩坑、数据对接到 UI 优化的全方位复盘
ui·uni-app·notepad++