javascript - OBJLoader 和 OrbitControls 中的 "THREE.OBJLoader is not a constructor"和 "Unexpected token {"-6ren

javascript - OBJLoader 和 OrbitControls 中的 "THREE.OBJLoader is not a constructor"和 "Unexpected token {"

转载作者：行者123 更新时间：2023-12-01 00:49:24

32

4

我正在尝试将 OBJ 3D 模型显示为线框，可以使用 Three.js 通过 OrbitControls 移动该线框。我是 Three.js 的新手，所以如果我遗漏了一些“明显”的东西，我深表歉意。

我已经能够使用 OrbitControls 将立方体显示为线框。在不同的设置中，我能够将 OBJ 3D 模型显示为线框。因此，该问题与 3D 模型无关。

当我尝试将两种方法混合在一起时，就会出现问题。

我尝试通过两种方式解决这个问题:

我尝试将 OBJLoader 插入多维数据集环境中。 (最有希望)
我尝试将 OrbitControls 添加到工作但不可移动的线框 OBJ 环境中。 (根本没用)

大多数其他答案都集中在脚本的顺序上:是的，我尝试移动 two.min.js、OrbitControls.js、 OBJLoader.js 和我的主要工作 model.js 以各种可能的方式区分有序和无序。

这是我的代码:

<head>
    <style media="screen"> html, body { margin: 0; } #model_container { background-color: #333333; margin: 50px; } </style>
    <title>OBJ Wireframe</title>
    <script defer src="script/three/build/three.min.js"></script>
    <script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
    <script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>
    <script defer src="script/model.js"></script>
</head>
<body>
    <div id="model_container"></div>
</body>

const globalWidth = window.innerWidth - 100;
const globalHeight = window.innerHeight - 100;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, globalWidth / globalHeight, 0.1, 1000);
camera.position.x = 300;
camera.position.y = -6;
camera.position.z = 1;

const renderer = new THREE.WebGLRenderer({
   antialias: true,
   alpha: true
});
renderer.setClearColor( 0xffffff, 0);
renderer.setSize(globalWidth, globalHeight);

const canvas = document.getElementById("model_container");
canvas.appendChild( renderer.domElement );

const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);

const loader = new THREE.OBJLoader();
loader.load("assets/castle.obj", function(object) {
   const geometry = object.children[0].geometry;
   THREE.GeometryUtils.center(geometry);
   const material = new THREE.MeshLambertMaterial({});
   const mesh = new THREE.Mesh(geometry, material);
   mesh.material.wireframe = true;
   scene.add(mesh);
})

const controls = new THREE.OrbitControls(camera);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed   = 0.1;
controls.target.set(0, 0, 0);

var animate = function () {
   requestAnimationFrame(animate);
   controls.update();
   renderer.render(scene, camera);
};
animate();

以下是我经过 3 天的搜索和尝试后仍无法修复的错误:

OrbitControls.js:9:未捕获的语法错误:意外的 token {
OBJLoader.js:5:未捕获的语法错误:意外的标记{
未捕获类型错误:THREE.OBJLoader 不是 model.js:23 处的构造函数

这些错误似乎根源于 THREE.js 文件本身，我觉得这很奇怪。我没有任何想法和文档需要浏览。

我正在使用 MAMP 运行此程序，但也尝试上传到服务器以查看问题是否与本地文件或类似内容有关。

最佳答案

<script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>

您似乎从错误的路径加载文件。 jsm 目录中的文件是通过 ES6 导入语法导入的 ES6 模块。尝试包含 js 目录中的文件:

<script defer src="script/three/examples/js/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/js/loaders/OBJLoader.js"></script>

三.js R106

关于javascript - OBJLoader 和 OrbitControls 中的 "THREE.OBJLoader is not a constructor"和 "Unexpected token {"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57106202/

32

4

0

文章推荐： json - 在 Angular 中将 JSON 导出为 CSV

文章推荐： scala - DSL 的隐式参数 "chaining"

文章推荐： Python 将列 reshape 为多列 - 交替行

文章推荐： hash - 是否可以将 NetMTLMv2 哈希转换为 NTLM 哈希？

constructor - Mock Constructor with constructor-args Object... object
我想在我的单元测试中模拟一个遗留对象。这是构造函数: public Class LegacyClass{ public LegacyClass(Object... obj) {
javascript - Object.constructor===Object.constructor.constructor//为什么？
此处说明https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function函数对象实例的构造函数属性“指定创建对
constructor - Perl6 : Constructors in subclases
有没有办法从子类中的构造函数分配在父类(super class)中声明的实例变量？我已经习惯使用 BUILD() 作为构造函数，但我想知道这是否是个好主意。 IE: use v6; clas
constructor - "constructors"是否有标准的惯用 Go？
鉴于以下情况: type AStruct struct { m_Map map[int]bool } 在这种情况下，AStruct的实例在AStruct.m_Map初始化之前不能使用: m_M
java - Gson序列化名: "Implicit super constructor Object() is undefined for default constructor. Must define an explicit constructor"
我是 Android 新手，我正在尝试学习如何使用 Gson 解析 API 调用。我已经阅读了一些内容，我正在尝试遵循这个示例:http://www.javacodegeeks.com/2011/01
javascript - this.constructor.prototype.constructor.apply在js中是什么意思
我正在阅读 this文章，我不知道下面这行是做什么的。即使我删除了这一行，我也看不出有什么不同。 this.constructor.prototype.constructor.apply(this,A
java - 使用 Jackson 进行 JSON 反序列化 : No suitable constructor found for type - providing default constructor or annotate constructor is imposible
这个问题已经有答案了: JsonMappingException: No suitable constructor found for type [simple type, class ]: can
flutter 错误 : The constructor being called isn't a const constructor
我正在处理我的第一个 Flutter 项目，我正在构建一个登录页面，我创建了一个变量来存储一个 TextFormFieldController，但我收到了上面的错误，因为我删除了构造函数。当我返回这个
constructor - 无法编译内部构造函数调用原因 :Primary constructor call expected
假设我们有以下主要和次要构造函数: open class Animal(val name:String){ internal constructor(message:InputStream): t
C++ Copy Constructor 不调用 Base Constructor
为什么默认复制构造函数不调用 monster 的基构造函数，但是当我在 troll 中包含一个用户定义的复制构造函数时，它会调用父级(即: 怪物) 构造函数？我认为它的工作原理如下:创建基础对象，然
C++:constructor() 和 constructor(void) 的区别
这个问题在这里已经有了答案: Is there a difference between foo(void) and foo() in C++ or C? (4 个答案) 关闭 8 年前。我注意到
constructor - t4mvc : Cannot inherit a controller class which has no default constructor?
我将 T4MVC 与 MVC2 一起使用。我有以下构建 block : 一个简单的实体接口(interface)，它定义了每个 POCO 实体必须有一个 long Id属性(property): p
java错误: constructor call must be the first statement in a constructor
以下代码返回一个错误: “构造函数调用必须是构造函数中的第一个语句。” 我不明白。我的代码中的构造函数是第一条语句。我究竟做错了什么？ public class labelsAndIcons exte
constructor - Kotlin 语法糖 : make var all private in constructor
我是 kotlin 的新手，对它包含的所有有用的语法糖和功能感到惊讶。但是每当我声明一个构造函数时，我都必须独立地将我的所有字段设为私有(private)。 class Result(private
c++ - 为什么在删除 `copy constructor`后仍使用 `move constructor`？
作为主题，相关代码为: #include class ABC { public: ABC() { std::cout<< "default con
constructor - 如何解决 Haxe 中的 'Duplicate Constructor' 错误？
在 Haxe 中，我创建了一个名为的类。我的类喜欢: class MyClass { var score: String; public function new (score:
javascript - 类型错误 : UserSchema is not a constructor (Schema is not a constructor MongoDB)
不确定为什么会这样，尝试删除所有 new 实例，从 const ect 切换到 let。可以运行站点，但是当我通过 html 表单运行发布请求时，在“const user = new UserSche
javascript - 构造函数属性 : __proto__. constructor vs prototype.constructor
我是 Javascript 的新手，我正在尝试深入挖掘并理解继承、构造函数和原型(prototype)链。所以，我创建了一个构造函数， var a = function(){this.integer=
javascript - someFunction.Prototype.constructor 与 someFunction.constructor
我知道 JavaScript 中的函数有双重生命，第一个是函数(作为创建实例的第一类事物)，第二个是普通对象。但是我很惊讶地看到下面控制台的输出。 function A() { consol
javascript - 1.constructor 和 (1).constructor 的区别
这个问题在这里已经有了答案: Why can't I access a property of an integer with a single dot? (5 个答案) 关闭 5 年前。为什么

首页

博学

6Ren·AI

商城

javascript - OBJLoader 和 OrbitControls 中的 "THREE.OBJLoader is not a constructor"和 "Unexpected token {"