我目前正在运行 QML(Qt 声明性语言)中的应用程序,运行版本为 5.15。 在应用程序中,我使用 QtLocation 和 mapboxgl 插件来显示使用 MapBox 图层和样式的地图。
我想要展示的是QML地图中的3D对象,因此我可以使用MapBox的功能、路由等
我尝试在以下代码中使用 Qt Quick 3D:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import QtPositioning 5.15
import QtLocation 5.15
import QtQuick.Layouts 1.3
import QtQuick3D 1.15
ApplicationWindow {
color: "white"
visibility: Window.FullScreen
visible: true
id: window
width: Screen.width
height: Screen.height
Map {
id: map
anchors.fill: parent
center: QtPositioning.coordinate(32.208574, 35.055456)
zoomLevel: 16
tilt: 40
bearing: 260
plugin: Plugin {
id: myPlugin
name: "mapboxgl"
PluginParameter {
name: "mapbox.access_token"
value: "TOKEN"
}
PluginParameter {
name: "mapboxgl.mapping.additional_style_urls";
value: "mapbox://styles/mapbox/outdoors-v12"
}
}
MapQuickItem {
id: mapItem
coordinate: QtPositioning.coordinate(32.208574, 35.055456) // Replace with your coordinates
sourceItem: Model {
id: model3D
source: "FinalBaseMesh.obj" // Replace with the path to your 3D model file
}
}
}
}
但是我收到一条错误消息:“无法将“Model”类型的对象分配给“QQuickItem*”类型的属性,因为前者既不与后者相同,也不是它的子类。”
我还尝试使用以下导入语句导入 Three.js:
import "https://unpkg.com/[email protected]/build/three.min.js" as Three
并且出现类型错误,很可能是由于兼容性问题。 我曾尝试按照 https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/
上的 MapBox 教程进行操作此外,我还尝试使用现已弃用的 QtCanvas3D (以手机工作为例并尝试将其迁移到地图)以及 Qt 的 git 中的示例代码 我将 main.qml 更改为以下内容:
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the QtCanvas3D module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.15
import QtQuick.Window 2.15
import QtLocation 5.15
import QtPositioning 5.15
Window {
property int initialWidth: 800
property int initialHeight: 600
id: mainView
width: initialWidth
height: initialHeight
visible: true
title: "Interactive Mobile Phone Demo"
color: "black"
//! [0]
Item {
id: textureSource
layer.enabled: true
layer.smooth: true
layer.textureMirroring: ShaderEffectSource.NoMirroring
//! [0]
anchors.centerIn: parent
// The dimensions of the texture source item determine the actual OpenGL texture dimensions.
// We want a fairly large texture, so that even the smallest text we use renders nicely.
width: 512
height: 1024
// Hide texture source behind the canvas normally, so you can't interact with it.
// It would also be possible to set visible property to false instead, but if the item
// is hidden, some things don't update correctly. For example, the Flickable doesn't update
// its content if it is not visible.
z: -2
// Specify transform to make the visual representation of the item match the size and
// orientation of the ui presented in Canvas. If the window initial dimensions,
// textureSource dimensions, or phone mesh dimensions or position are changed,
// scaling needs to be adjusted accordingly.
//! [2]
transform: [
Scale {
origin.y: textureSource.height / 2
origin.x: textureSource.width / 2
yScale: 0.5 * mainView.height / mainView.initialHeight
xScale: 0.5 * mainView.height / mainView.initialHeight
}
]
opacity: 0.0
//! [2]
// CellphoneApp implements the UI of the phone
CellphoneApp {
id: cellphoneApp
anchors.fill: parent
backgroundColor: "black"
textColor: "white"
onLocked: canvas3d.state = "running"
}
}
// CellphoneCanvas displays the rotating phone and the color selector
CellphoneCanvas {
id: canvas3d
anchors.fill:parent
textureSource: textureSource
onRotationStopped: {
cellphoneApp.resetLockTimer()
// Bring the UI to the foreground so that it can be interacted with
textureSource.z = 1
}
onRotationStarted: {
// Hide the texture source behind canvas to ensure UI cannot be
// interacted while the phone is rotating.
textureSource.z = -1
}
}
Map {
width: 200
height: 200
center: QtPositioning.coordinate(0,0)
plugin: Plugin {
id: myPlugin
name: "mapboxgl"
PluginParameter {
name: "mapbox.access_token"
value: "TOKEN"
}
PluginParameter {
name: "mapboxgl.mapping.additional_style_urls";
value: "mapbox://styles/mapbox/outdoors-v12"
}
}
MapQuickItem {
// Set the map item properties
coordinate: QtPositioning.coordinate(0,0)
//anchorPoint.x: dot.width * 0.5
//anchorPoint.y: dot.height
// Use the Canvas3D for rendering
sourceItem: canvas3d
}
}
ColorSelector {
anchors.right: parent.right
anchors.top: parent.top
width: parent.width / 16
onSelectedColorChanged: canvas3d.caseColor = selectedColor
}
// FPS display, initially hidden, clicking will show it
FpsDisplay {
anchors.left: parent.left
anchors.top: parent.top
width: 32
height: 64
//fps: canvas3d.fps
}
}
有没有人成功过?
我尝试使用两种可能的解决方案 - QtQuick3D 和 Three.js 在 QML 地图中显示 3D 对象,但是无法在应用程序中看到模型。
您有权访问的mapboxgl插件不支持3d模型。这意味着您只能通过 QtQuick Scenegraph 使用 mapboxgl Map {} 元素顶部的附加 Map{}(层)“自行”渲染模型。但是,由于 QtLocation 没有为您提供任何方法来执行此操作,因此您必须子类化 QDeclarativeGeoMapItemBase 并自己进行渲染。 我已经看到这样做了,但据我所知,github 上没有示例。