欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp微信小程序使用xr加載模型的操作方法

 更新時(shí)間:2024年07月03日 10:52:31   作者:一只大菜鳥(niǎo)J  
這篇文章主要介紹了uniapp微信小程序使用xr加載模型的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

1.在根目錄與pages同級(jí)創(chuàng)建如下目錄結(jié)構(gòu)和文件:

// index.js
Component({
	properties: {
		modelPath: { // vue頁(yè)面?zhèn)鬟^(guò)來(lái)的模型
			type: String,
			value: ''
		}
	},
	data: {},
	methods: {}
})
{ // index.json
	"component": true,
	"renderer": "xr-frame",
	"usingComponents": {}
}
<!-- index.wxml -->
<!-- 加載靜態(tài)模型 -->
 <xr-scene render-system="alpha:true" bind:ready="handleReady">
  <xr-node>
    <xr-light type="ambient" color="1 1 1" intensity="2" />
    <xr-light type="spot" position="3 3 3" color="1 1 1" range="3" intensity="5" />
    <xr-assets>
		<!--  options="ignoreError:-1" -->
      <xr-asset-load type="gltf" asset-id="gltf-model" src="{{modelPath}}"/>
    </xr-assets>
    <xr-gltf scale="0.7 0.7 0.7" node-id="gltf-model" bind:gltf-loaded="handleGLTFLoaded" model="gltf-model"></xr-gltf>
  </xr-node>
  <xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="gltf-model" camera-orbit-control/>
 </xr-scene>

2.pages.json配置

{
				"path": "pages/resource/preview/preview",
				"style": {
					"navigationBarTitleText": "效果預(yù)覽",
					"enablePullDownRefresh": false,
					"navigationBarBackgroundColor": "#73ceda",
					"usingComponents": {
						"xr-start": "/wxcomponents/xr-start"
					},
					"disableScroll": true
				}
			}

3.manifest.json配置

"mp-weixin": {
		"appid": "自己的appid",
		"setting": {
			"urlCheck": false,
			"postcss": true,
			"es6": true,
			"minified": true,
			"ignoreDevUnusedFiles": false,
			"ignoreUploadUnusedFiles": false
		},
		"usingComponents": true,
		"lazyCodeLoading": "requiredComponents"
	},

4.使用preview.vue

<template>
	<view style="display: flex;flex-direction: column;">
		<xr-start :modelPath="modelPath" id="main-frame" disable-scroll :width="renderWidth" :height="renderHeight"
			:style="'width:'+width+'px;height:'+height+'px;'">
		</xr-start>
	</view>
</template>
<script>
	export default {
		onLoad(option) {
			this.modelPath = option.modelPath;
			this.width = uni.getWindowInfo().windowWidth
			this.height = uni.getWindowInfo().windowHeight
			const dpi = uni.getWindowInfo().pixelRatio
			this.renderWidth = this.width * dpi
			this.renderHeight = this.height * dpi
		},
		data() {
			return {
				width: 300,
				height: 300,
				renderWidth: 300,
				renderHeight: 300,
				modelPath: ''
			}
		},
		methods: {}
	}
</script>
<style>
</style>

不占主包空間(可以忽略)

到此這篇關(guān)于uniapp微信小程序使用xr加載模型的文章就介紹到這了,更多相關(guān)uniapp微信小程序使用xr內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證

    JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • TypeScript數(shù)組的定義與使用詳解

    TypeScript數(shù)組的定義與使用詳解

    數(shù)組對(duì)象是使用單獨(dú)的變量名來(lái)存儲(chǔ)一系列的值,數(shù)組非常常用,數(shù)組是具有連續(xù)存儲(chǔ)位置的相似類型元素的同質(zhì)集合。數(shù)組是用戶定義的數(shù)據(jù)類型。數(shù)組是一種數(shù)據(jù)結(jié)構(gòu),我們?cè)谄渲写鎯?chǔ)相似數(shù)據(jù)類型的元素
    2022-09-09
  • Canvas實(shí)現(xiàn)二娃翠花回家之路小游戲demo解析

    Canvas實(shí)現(xiàn)二娃翠花回家之路小游戲demo解析

    這篇文章主要為大家介紹了Canvas實(shí)現(xiàn)二娃翠花回家之路小游戲demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • Qt6基于Qml的文件對(duì)話框演示效果

    Qt6基于Qml的文件對(duì)話框演示效果

    這篇文章主要介紹了Qt6基于Qml的文件對(duì)話框演示,包括打開(kāi)單個(gè)文件配置和打開(kāi)多個(gè)文件配置及保存文件配置的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • 小程序?qū)崿F(xiàn)滑動(dòng)塊效果

    小程序?qū)崿F(xiàn)滑動(dòng)塊效果

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)滑動(dòng)塊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法

    JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法,可實(shí)現(xiàn)根據(jù)鼠標(biāo)事件動(dòng)態(tài)改變input與textarea樣式的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-08-08
  • 微信小程序-小說(shuō)閱讀小程序?qū)嵗╠emo)

    微信小程序-小說(shuō)閱讀小程序?qū)嵗╠emo)

    本篇文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-01-01
  • JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果

    JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例

    IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例

    下面小編就為大家?guī)?lái)一篇IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09

最新評(píng)論