uniapp小程序展示3D模型

这篇具有很好参考价值的文章主要介绍了uniapp小程序展示3D模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序展示3D模型-使用three.js 进行渲染

在开发的期间查阅了大量的资料、案例,大多都是无稽之谈…经过摸索…终于开发出来了适合本项目的3D模型案例
为了帮助有需要的同学 少走弯路 特地记录了一下哦

在开发期间 也找到了 较好的微信端3d模型渲染 有需要的可以留言

效果如图所示:(进行了配置,这里也加了手势滑动,自动旋转 3d的类型是obj格式)

uniapp小程序展示3D模型文章来源地址https://www.toymoban.com/news/detail-504676.html

配置项目需要的依赖

安装依赖
npm i

npm i dhtml-weixin
npm i three-weixin

小程序开发工具顶部菜单->工具->构建npm (如果有效果也可以不构建)

html

<template>
	<view class="three_3d">
		<canvas disable-scroll="true" @touchcancel="webgl_touch" @touchend="webgl_touch" @touchmove="webgl_touch"
			@touchstart="webgl_touch" id="canvas_webgl" canvas-id="canvas_webgl" type="webgl"
			style="width:750rpx;height:800rpx;"></canvas>
	</view>
</template>

项目依赖

	import {
		document,
		window,
		requestAnimationFrame,
		cancelAnimationFrame,
		Event
	} from 'dhtml-weixin';
	import * as THREE from 'three-weixin';
	// import Stats from '../../jsm/libs/stats.module.js';
	// import {
	// 	GUI
	// } from '../../jsm/libs/lil-gui.module.min.js';
	import {
		OrbitControls
	} from '../../jsm/controls/OrbitControls.js';
	import {
		OBJLoader
	} from '../../jsm/loaders/OBJLoader.js';

	var renderer;
	

js

<script>
	export default {
		name: "threeA",
		data() {
			return {
				// renderer: null


			};
		},
		methods: {
			beforeDestroy() {
				getApp().worker && getApp().worker.terminate()

				cancelAnimationFrame()
				if (this.renderer) {
					this.renderer.dispose()
					this.renderer.forceContextLoss()
					this.renderer.context = null
					this.renderer.domElement = null
					this.renderer = null
				}
			},

			webgl_touch(e) {
				const web_e = Event.fix(e)
				document.dispatchEvent(web_e)
				window.dispatchEvent(web_e)
				this.renderer && this.renderer.dispatchEvent(web_e)
			},
		},
		async onLoad() {
			getApp().canvas = await document.createElementAsync("canvas", "webgl");
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
		},

		async mounted() {
			// 模型加载需要时间  添加提示 3秒钟后关闭提示正好数据加载出来
			uni.showLoading({
				title: '加载中',
				duration: 3000
			});

			var that = this;
			getApp().canvas = await document.createElementAsync("canvas", "webgl", this);
			let container;

			let camera, scene, renderer, stats;

			let mouseX = 0,
				mouseY = 0;

			let windowHalfX = window.innerWidth / 2;
			let windowHalfY = window.innerHeight / 2;

			let object;

			init();
			animate();


			function init() {

				container = document.createElement('div');
				document.body.appendChild(container);

				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000);
				camera.position.z = 250;

				// scene

				scene = new THREE.Scene();

				const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
				scene.add(ambientLight);

				const pointLight = new THREE.PointLight(0xffffff, 0.8);
				camera.add(pointLight);
				scene.add(camera);

				// manager

				function loadModel() {

					object.traverse(function(child) {

						//	if ( child.isMesh ) child.material.map = texture;

					});

					object.position.y = -50;
					scene.add(object);

				}

				const manager = new THREE.LoadingManager(loadModel);

				// texture

				const textureLoader = new THREE.TextureLoader(manager);
				//	const texture = textureLoader.load( 'http://localhost:8080/examples/textures/uv_grid_opengl.jpg' );

				// model

				function onProgress(xhr) {

					if (xhr.lengthComputable) {

						const percentComplete = xhr.loaded / xhr.total * 100;
						console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');

					}

				}

				function onError() {}

				const loader = new OBJLoader(manager);
				loader.load('http://youkejingpin.oss-cn-beijing.aliyuncs.com/Digital/static/pic/product/toukui.obj',
					function(obj) {

						object = obj;

					}, onProgress, onError);

				//原始事件
				// renderer = that.renderer = new THREE.WebGLRenderer();
				// renderer.setPixelRatio(window.devicePixelRatio);
				// renderer.setSize(window.innerWidth, window.innerHeight);
				// container.appendChild(renderer.domElement);

				// document.addEventListener('mousemove', onDocumentMouseMove);
				// window.addEventListener('resize', onWindowResize);
				// 鼠标点击事件
				renderer = that.renderer = new THREE.WebGLRenderer({
					antialias: true
				});
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.outputEncoding = THREE.sRGBEncoding;
				renderer.shadowMap.enabled = true;
				container.appendChild(renderer.domElement);

				//控制模型触动事件
				camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 2000);
				camera.position.set(160, 40, 160);

				const controls = new OrbitControls(camera, renderer.domElement);
				controls.enablePan = false;
				controls.enableZoom = true;
				controls.target.set(0, 1, 0);
				controls.update();

				// stats = new Stats();
				// container.appendChild(stats.dom);
				window.addEventListener('resize', onWindowResize);


			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

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

			}

			function onDocumentMouseMove(event) {

				mouseX = (event.clientX - windowHalfX) / 2;
				mouseY = (event.clientY - windowHalfY) / 2;

			}

			//

			function animate() {

				requestAnimationFrame(animate);
				render();

			}

			function render() {

				//camera.position.x += ( mouseX - camera.position.x ) * .05;
				// mera.position.y += ( - mouseY - camera.position.y ) * .05;
				// mera.lookAt( scene.position );
				renderer.render(scene, camera);

				//	console.error(new Date().getTime())
				if (object) {
					object.rotation.set(0, object.rotation.y + 0.007, 0)
				}


			}

		}
	}
</script>

整体代码可直接使用(js+html)

<!-- 模型地址线上地址
http://youkejingpin.oss-cn-beijing.aliyuncs.com/Digital/static/pic/product/toukui.obj
 -->
<template>
	<view class="three_3d">
		<canvas disable-scroll="true" @touchcancel="webgl_touch" @touchend="webgl_touch" @touchmove="webgl_touch"
			@touchstart="webgl_touch" id="canvas_webgl" canvas-id="canvas_webgl" type="webgl"
			style="width:750rpx;height:800rpx;"></canvas>
	</view>
</template>
<script>
	import {
		document,
		window,
		requestAnimationFrame,
		cancelAnimationFrame,
		Event
	} from 'dhtml-weixin';
	import * as THREE from 'three-weixin';
	import {
		OrbitControls
	} from '../../jsm/controls/OrbitControls.js';
	import {
		OBJLoader
	} from '../../jsm/loaders/OBJLoader.js';

	var renderer;
	
	export default {
		name: "threeA",
		data() {
			return {
				// renderer: null


			};
		},
		methods: {
			beforeDestroy() {
				getApp().worker && getApp().worker.terminate()

				cancelAnimationFrame()
				if (this.renderer) {
					this.renderer.dispose()
					this.renderer.forceContextLoss()
					this.renderer.context = null
					this.renderer.domElement = null
					this.renderer = null
				}
			},

			webgl_touch(e) {
				const web_e = Event.fix(e)
				document.dispatchEvent(web_e)
				window.dispatchEvent(web_e)
				this.renderer && this.renderer.dispatchEvent(web_e)
			},
		},
		async onLoad() {
			getApp().canvas = await document.createElementAsync("canvas", "webgl");
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
		},

		async mounted() {
			// 模型加载需要时间  添加提示 3秒钟后关闭提示正好数据加载出来
			uni.showLoading({
				title: '加载中',
				duration: 3000
			});

			var that = this;
			getApp().canvas = await document.createElementAsync("canvas", "webgl", this);
			let container;

			let camera, scene, renderer, stats;

			let mouseX = 0,
				mouseY = 0;

			let windowHalfX = window.innerWidth / 2;
			let windowHalfY = window.innerHeight / 2;

			let object;

			init();
			animate();


			function init() {

				container = document.createElement('div');
				document.body.appendChild(container);

				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000);
				camera.position.z = 250;

				// scene

				scene = new THREE.Scene();

				const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
				scene.add(ambientLight);

				const pointLight = new THREE.PointLight(0xffffff, 0.8);
				camera.add(pointLight);
				scene.add(camera);

				// manager

				function loadModel() {

					object.traverse(function(child) {

						//	if ( child.isMesh ) child.material.map = texture;

					});

					object.position.y = -50;
					scene.add(object);

				}

				const manager = new THREE.LoadingManager(loadModel);

				// texture

				const textureLoader = new THREE.TextureLoader(manager);
				//	const texture = textureLoader.load( 'http://localhost:8080/examples/textures/uv_grid_opengl.jpg' );

				// model

				function onProgress(xhr) {

					if (xhr.lengthComputable) {

						const percentComplete = xhr.loaded / xhr.total * 100;
						console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');

					}

				}

				function onError() {}

				const loader = new OBJLoader(manager);
				loader.load('http://youkejingpin.oss-cn-beijing.aliyuncs.com/Digital/static/pic/product/toukui.obj',
					function(obj) {

						object = obj;

					}, onProgress, onError);

				//原始事件
				// renderer = that.renderer = new THREE.WebGLRenderer();
				// renderer.setPixelRatio(window.devicePixelRatio);
				// renderer.setSize(window.innerWidth, window.innerHeight);
				// container.appendChild(renderer.domElement);

				// document.addEventListener('mousemove', onDocumentMouseMove);
				// window.addEventListener('resize', onWindowResize);
				// 鼠标点击事件
				renderer = that.renderer = new THREE.WebGLRenderer({
					antialias: true
				});
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.outputEncoding = THREE.sRGBEncoding;
				renderer.shadowMap.enabled = true;
				container.appendChild(renderer.domElement);

				//控制模型触动事件
				camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 2000);
				camera.position.set(160, 40, 160);

				const controls = new OrbitControls(camera, renderer.domElement);
				controls.enablePan = false;
				controls.enableZoom = true;
				controls.target.set(0, 1, 0);
				controls.update();

				// stats = new Stats();
				// container.appendChild(stats.dom);
				window.addEventListener('resize', onWindowResize);


			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

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

			}

			function onDocumentMouseMove(event) {

				mouseX = (event.clientX - windowHalfX) / 2;
				mouseY = (event.clientY - windowHalfY) / 2;

			}
			function animate() {

				requestAnimationFrame(animate);
				render();

			}

			function render() {
				//camera.position.x += ( mouseX - camera.position.x ) * .05;
				// mera.position.y += ( - mouseY - camera.position.y ) * .05;
				// mera.lookAt( scene.position );
				renderer.render(scene, camera);

				//	console.error(new Date().getTime())
				if (object) {
					object.rotation.set(0, object.rotation.y + 0.007, 0)
				}


			}

		}
	}
</script>

<style lang="scss">
	.three_3d {
		width: 750rpx;
		height: 800rpx;
	}
</style>

完整项目地址gitee:https://gitee.com/sun-icon/uniapp3D

到了这里,关于uniapp小程序展示3D模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 神经网络的可视化:使用3D可视化和交互式界面来展示模型

    作者:禅与计算机程序设计艺术 作为人工智能领域的从业者,我们常常需要与其他技术人员或者领域内的专家进行交流。在这个过程中,一个关键的问题是如何让复杂的神经网络模型变得易于理解和分析。今天,我们将探讨如何使用3D可视化和交互式界面来展示神经网络模型

    2024年02月14日
    浏览(48)
  • uniapp vue3中使用threejs渲染3D模型

    前言: 因为公司需求, 需要在App中内嵌一个3D模型. 在市场上看了一下情况, 大部分都是vue2的, 并没有vue3的版本...现在vue3也不是个新东西了. 后期模型会放入App内. 下面写法并不支持App(已解决在App中渲染, 关注我可见), 支持h5 template: js: 上面写法并不优雅, 只是临时作为一个demo可

    2024年02月12日
    浏览(37)
  • uniapp 使用 uni-data-picker级联选择器,自定义展示,uni小程序

    先看效果是不是你要的效果 页面组件 接口数据 接口数据以及处理方式 选中后的数据处理,拿到选中的值

    2024年02月05日
    浏览(54)
  • Vue 3D Model 3D模型解析展示

    安装 | Vue 3D Model   npm 安装: yarn 安装: pnpm 安装:   FBX格式: GLTF 格式:  JSON格式: OBJ 格式:  PLY 格式:  STL格式: DAE格式:

    2024年02月06日
    浏览(43)
  • Three.js--》实现3d踢球模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理加载模型 使用Cannon-es实现物理世界 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用

    2024年02月11日
    浏览(49)
  • Three.js--》实现3d字体模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理 加载字体模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建工具搭建vue项

    2024年02月07日
    浏览(71)
  • Three.js--》实现3d地球模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载地球模型 实现光柱效果 添加月球模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借

    2024年02月08日
    浏览(64)
  • Three.js--》实现3d地月模型展示

    目录 项目搭建 初始化three.js基础代码 创建月球模型 添加地球模型 添加模型标签 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目,借用vite构建

    2024年02月07日
    浏览(64)
  • Three.js--》实现3d官网模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载飞船模型 实现滚轮滑动切换3D场景 设置星光流动特效 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建

    2024年02月06日
    浏览(59)
  • Unity 3D模型展示之webGL平台展现

    在之前的项目基础上我们已经打包后在PC端进行展示了。这篇文章主要介绍在切换到webGL上时效果展示不出来需要进行调整,特此记录一下。 1.平台切换 选择WebGL平台切换,没有的可以进行安装,安装之后关闭IDE重新启动。选择WebGL切换,参数参照以下设置即可。 2.构建WebGL项

    2024年02月01日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包