MindAR JS报错：MINDAR.IMAGE.MindARThree不是构造函数求解决

错误原因 #

你同时引入了MindAR的Three.js核心库和MindAR的AFRAME集成库，这两个库在全局命名空间产生冲突，导致MINDAR.IMAGE.MindARThree构造函数无法被正确识别。此外，你的代码使用纯Three.js风格的MindAR API，但页面中混入了AFRAME相关依赖——这是两种完全独立的开发模式，不能混用。

修复方案 #

根据你的需求选择其中一种模式：

方案1：使用纯Three.js模式（保留你的main.js逻辑） #

修改index.html，移除AFRAME和MindAR-AFRAME的脚本引用，只保留Three.js版本的MindAR核心库：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AR Research</title>
    <!-- 仅保留Three.js版本的MindAR核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image.prod.js"></script>
    <script src="./main.js" type="module"></script>
    <style>
        html, body {
            position: relative;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
</body>
</html>

main.js代码无需修改，保持原样即可运行。

方案2：改用AFRAME模式（匹配Udemy教程风格） #

如果你的教程是基于AFRAME的，直接用AFRAME的标签式语法实现，无需main.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AR Research</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image-aframe.prod.js"></script>
    <style>
        html, body {
            position: relative;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <a-scene mindar-image="imageTargetSrc: ./groot.mind;" renderer="logarithmicDepthBuffer: true;" vr-mode-ui="enabled: false">
        <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
        <!-- 绑定到第一个标记锚点，添加蓝色半透明平面 -->
        <a-anchor mindar-image-target="targetIndex: 0">
            <a-plane color="#0000ff" opacity="0.5" width="1" height="1"></a-plane>
        </a-anchor>
    </a-scene>
</body>
</html>

关键提示 #

MindAR提供两种开发方式：纯Three.js原生API、AFRAME集成标签。两种方式的依赖库和实现逻辑完全独立，不能同时引入两种库，否则会导致全局对象冲突，出现类似你遇到的构造函数未定义错误。

内容的提问来源于stack exchange，提问作者Wai Yan Hein