如何将 Three.js 导入我的 Nuxt 项目

2024-03-12

我想将 THREE.js 中的示例文件夹中的模块(例如 OBJLoader)导入到我的 Nuxt 项目中。

我可以导入三个主文件夹,但是在尝试导入示例文件夹中的模块时会发生错误。

尝试了官方文档中的这些步骤。

https://trijs.org/docs/index.html#manual/en/introduction/Import-via-modules https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules

我在下面收到错误

语法错误 意外的标记 {

<template>
</template>
<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
export default{
}
</script>

这是我的 github 存储库https://github.com/ksuhara/ Threejs-test https://github.com/ksuhara/threejs-test


我终于找到了问题所在。

嗯,这与 nuxt 构建系统有关。当使用第三方库时,您应该将它们添加到nuxt.config.js bild->transpile数组,因此它可以作为 Babel 的依赖项包含在内。

transpile: [ "three" ]

Ref: https://nuxtjs.org/api/configuration-build#transpile https://nuxtjs.org/api/configuration-build#transpile

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Three.js 导入我的 Nuxt 项目 的相关文章

  • Web 扩展中共享 vuex 状态(死对象问题)

    我正在尝试在网络扩展中使用共享的 vue js 状态 状态存储在后台脚本的 DOM 中并呈现在弹出页面中 第一次尝试 我的第一次尝试是使用一个没有 vuex 的简单商店 背景 js var store count 0 popup js br
  • Laravel Echo 不监听推送事件

    尝试使用 laravel 和 vuejs 创建一种聊天应用程序 发送消息后 我会从 laravel 触发事件 该事件会使用正确的事件类反映在推送器调试控制台上 但根本不会调用来自 vuejs 的监听回调 created window Ech
  • 如何修复套接字 io 中的 400 错误错误请求?

    我有一个前端应用程序 VUE JS 我有一个后端 Nest JS Vue JS 应用程序使用 vue socket io extended 库通过 websockets 从后端获取数据 当 Vue JS 应用程序启动时 我在浏览器中看到错误
  • 如何在Vue中提交表单,重定向到新路由并传递参数?

    我正在使用 Nuxt 和 Vue 我正在尝试提交表单 将用户重定向到包含提交的参数的新路由 发送 API 请求以获取一些数据 然后渲染该数据 我通过简单地将表单操作设置为新路径并手动将所有 URL 参数添加到 API 请求来实现此目的 首先
  • Vue 3:使用渲染函数将所有项目包装在一个自定义组件中

    我正在尝试建立自己的sortable成分 我想将项目列表传递到它的默认插槽 然后 可排序组件应该用自定义包装所有传递的项目v draggable成分
  • 可以用vue-chartjs打印图表吗?

    我正在使用 vue chartjs 在网络应用程序上渲染图表 我知道如果您使用原始版本 您可以打印图表library https canvasjs com docs charts methods chart print 但是我不知道如何使用
  • Vue.js 更改 {{ }} 标签

    我想改变 something by 在 Vue js 中 我怎样才能实现这一点 这可能吗 我在 AngularJS 中寻找的等效项 var app angular module app function interpolateProvide
  • 如何在 vuex nuxt 中获取嵌套 getter

    i have store index js像这样 new Vuex Store modules nav namespaced true modules message namespaced true state count 0 conver
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • Morph 目标为 Three.js

    我正在尝试开始使用变形目标和 Three js 然而 关于这个主题的文档似乎并不多 当我查看源代码时 morphTargetInfluences 似乎是有魔力 这是如何运作的 我该如何使用这个 值为1就是全力吗 如何区分同一模型上的不同变形
  • React-Three-Fiber:JSON 中位置 3 出现意外标记 c 错误

    我正在尝试使用 React Three Fiber 加载 glb 文件 但出现以下错误 Error Unexpected token c in JSON at position 3 我不确定我做错了什么 看来此问题最常见的解决方案是将 gl
  • 如何将 ThreeJS 与 PhoneGap 一起使用?

    这个探索是非常自我描述的 我已经用一个简单的 3D 立方体进行了测试 它在浏览器中运行良好 但只在模拟器中显示空白页面 有人说 Threejs 不能与 PhoneGap 一起使用 但也有人说他们使用过并且工作正常 在 Android 中 您
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 如何清除 THREE.JS 场景

    我正在尝试找到清除场景中所有对象而不破坏场景本身的方法 我知道命名对象是一种方法 然后当我们想要删除该对象时 我们只需通过它的名称 获取 它即可 但是 我想找到一种快速方法来清除场景中的所有对象 无论它们的名称如何 有简单的方法吗 谢谢 你
  • Vue.js 中计算属性和普通数据的区别

    我观察到 当一个正常的财产来自data 和从它派生的计算属性通过事件传递 前者保持其反应性 而后者失去它 我为其设置了以下测试用例 也作为 JSFiddle https jsfiddle net christophfriedrich b27
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 如何在pm2下运行nuxt?

    我有 2 个 nuxt 项目需要在服务器上运行 每当我在本地运行该应用程序时 它似乎都在使用 npm run dev 但在服务器上 这需要在子进程下运行 所以我使用 pm2 来实现 但是每当我开始使用 pm2 运行相同的 npm 脚本时 该

随机推荐

  • 为什么 JavaScript 比较运算符在数学上不一致?

    很久以前 在数学课上我被告知 a b 当且仅当a Javascript 似乎不这么认为 gt new Date 400 lt new Date 400 true gt new Date 400 gt new Date 400 true gt
  • PHP:CURL 库:获取curl_exec 的状态

    我正在 PHP 中使用 cURL 编写一个函数 将远程 xml 文件获取到本地文件夹中 一切正常 但我有一个问题 fileIn curl init http some remote host com file xml fileOut fop
  • C# 8.0 支持 IAsyncEnumerable 吗?

    真的很难找到任何相关信息IAsyncEnumerable 除了 C 8 0 新增功能 文章中的一些提及之外 尝试在启用了 netstandard 2 0 和 C 8 的 Visual Studio 2019 中使用它 它确实识别了该类 但我
  • Reactjs process.env.PUBLIC_URL 不起作用

    在反应中 我使用下面的代码来加载配置 json 但是如果我添加 则会出现错误 console log process env PUBLIC URL 当我删除它时 它起作用了 Error is ReferenceError 进程未定义 con
  • 使用 Spring @Controller 构造型保持方法可见性的最佳实践

    我当前工作使用的项目privateMVC 控制器方法的访问修饰符 Controller public class HelloWorldController RequestMapping helloWorld private ModelAnd
  • Azure AD Powershell:提取用户的上次登录时间

    我正在尝试提取用户在 Active Directory 上的上次登录时间 我找到了这个脚本 它应该可以解决问题 Install Module AzureADPreview Import Module AzureADPreview Cred
  • 是否可以使用 JclDebug 从引发异常的方法中获取参数值?

    我使用函数 JclGetExceptStackList 来记录引发的异常的调用堆栈 我希望 如果可能的话 也记录引发异常的方法中的参数值 我不知道是否可以使用 JclDebug 来做到这一点 或者是否存在任何其他方法来做到这一点 谁能帮我
  • 矩形之间的最佳负空间算法?

    给定较大矩形 R 内的矩形 r 是否存在最佳快速算法来确定填充 的矩形的最小数量 负空间 https i stack imgur com rnboe png r 之间 例如 假设紫色矩形内有这三个蓝色矩形 我如何快速确定下面绿色的矩形列表
  • 如何在序列化activerecord后访问列值

    我有一个像这样的简单模型 class User lt ActiveRecord Base serialize preferences end 我想从mysql访问原始值 而不是序列化之前的值 是否可以 我知道我可以使用 ActiveReco
  • dafny 建模整数溢出

    Can Dafny 模型整数溢出 当达夫尼证明以下事实时 我感到很惊讶 method overflow c int if c gt 0 assert c 1 gt 0 我缺少什么 方式intDafny 中的意思是 数学整数 所以不存在溢出
  • 如何更改 Facebook Font Awesome 图标的颜色?

    我想更改 Font Awesome Facebook 图标的颜色 如果我这样做background color body font size 5em background 555 fa facebook square color blue
  • 如何将段落显示为水平列表?

    我希望我的网站有一个 关于 部分 其中一个 col 1 部分位于其他部分之上 在该部分下面 有 3 栏描述了我生活的 3 个方面 我尝试了 inline block 但无法使其工作 但我真的希望这种方法能够成功 因为它的灵活性 html s
  • 无论我如何尝试,System.Web.Http 引用默认为 4.0 版本

    我在我的项目中使用 BreezeApi NuGet 包 它位于 Visual Studio 2013 中 我收到这个错误 错误 41 程序集 Breeze WebApi2 Version 1 4 0 0 Culture neutral Pu
  • 我应该使用文件描述符或流来读取/写入套接字

    设置套接字后 更好的做法是在套接字描述符上使用 read 2 和 write 2 调用 还是使用 fdopen 3 将流与套接字描述符关联 然后使用 stdio 3 函数 int sfd socket PF INET SOCK STREAM
  • javascript/jquery 中的触控板点击事件

    有什么方法可以处理 mac 触控板的点击吗 我需要处理触控板上的 点击 和 点击 尤其是在 Mac 上 I tried event special tap setup function data namespaces var elem th
  • Sharepoint 服务器上托管的 ASP.NET Web 应用程序出现 Sharepoint 2007 NTLM 问题

    我在 Sharepoint 2007 机器上托管一个 ASP NET Web 应用程序 该应用程序对 Sharepoint 进行 Web 服务调用以检索文档位置 特别是 GetListItems 方法 该服务通过传递具有适当权限的有效 Sh
  • IntelliJ IDEA 12——查看调用堆栈

    我是 IntelliJ IDE 的新手 通常使用 Visual Studio 我想查看特定断点处的当前调用堆栈 我找到了有关构建调用层次结构的信息 但这不是我要找的 任何有关如何查看当前调用堆栈的信息将不胜感激 The call stack
  • R arules :从规则中提取 lhs 项

    我想从 arules 生成的规则中提取 lhs 项目 例如 a b c gt d 我希望能够提取a b c并将其放入字符向量中 以便我可以根据这些项目进行迭代和进一步处理 目前 我可以考虑解析这组规则 将其转换为数据帧 然后使用字符操作 正
  • PHP 和 SOAP。换信封

    有很多关于 PHP 和 SOAP 的问题 但我没有找到关于我的情况的答案 所以 我使用 PHP SoapClient 和 WSDL 对象发送这个
  • 如何将 Three.js 导入我的 Nuxt 项目

    我想将 THREE js 中的示例文件夹中的模块 例如 OBJLoader 导入到我的 Nuxt 项目中 我可以导入三个主文件夹 但是在尝试导入示例文件夹中的模块时会发生错误 尝试了官方文档中的这些步骤 https trijs org do