有没有人能给我解释一下如何在vue组件中正确地导入和使用 three.js库?
经过多次搜索,我发现大多数人使用下面这行代码来导入vue组件中的three.js,但是我认为它已经过时了(对于旧版本的three.js document 或旧版本的vue中使用的,使用usef)。
import * as THREE from './js/three.js';
不幸的是,这似乎对我不起作用,因为在之后编译我的vue项目时,我得到了以下警告。(请注意,项目实际上没有正确编译,当我浏览到它时,我得到一个空文件)。
我尝试了许多其他常见的方法来导入three.js,但都不起作用!
我
我目前正在使用three.js和vue.js开发一个应用程序。
当我单击3D模型时,将触发一个函数,其中模型的单击部分的名称设置在变量" name“中,然后应该由vue.js呈现。
在pageload上,呈现本例中“inital”的inital值。但是,当我单击模型时,变量"name“将得到更新,而不是vue.js中的数据变量”属性“。
如何使这个示例具有反应性?
JavaScript部件:
var name = "HELLO". //defined as global variable
[...]
// Handling of click event i
我正在尝试将gltf加载到vue中project.Here是我的代码
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
let scene,camera,renderer;
function init(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THRE
我曾尝试导入一个包含three.js代码的js文件,它在一个“普通”html文件中运行良好。现在,我尝试从外部js文件中导出/导入代码,并从安装中调用它,但它只是显示为Vue warn: Error in mounted hook:"ReferenceError: THREE is not defined“。 这是我的代码: ? 对我来说,这看起来像是一个引用错误,类似于Java中缺少的包,但是为什么在外部js文件中使用' package‘时会发生这种情况,我该如何修复这个错误?
这是我第一次使用three.js,我试图用三个js、vue和laravel来显示一个简单的3d模型。3D文件位于/public/files/Tree1.3ds中。如何使用三个js在vue组件中呈现文件。我从三个js官方文档中复制了代码,并且运行良好,但如果我直接将文件路径更改为scene.add(),则无法工作。谢谢。
Vue
<script>
import * as THREE from 'three';
let camera, scene, renderer;
let geometry, material, mesh;
export default {
我想使用我的Vue应用程序中的GLTFLoader将.glTF文件加载到three.js中。但是,当我尝试使用GLTFLoader加载.gltf文件时,仍然在控制台中收到此错误: Unexpected token < in JSON at position 0 我已经在Vue.js组件中实例化了Three.js和GLTFLoader。 经过一些研究,我可以看出这是因为对glTF资产的HTTP请求返回了一个HTML站点。我已经检查了网络响应,'modeltest.gltf‘内容类型是'text/html’。 Content-Type: text/html; charset
我已经创建了一个Vue Cli应用程序,我正在尝试使用Three.js在其中呈现3D对象。
当我试图加载一个图像来使用它作为纹理时,问题就会发生。
let scene = new Three.Scene();
const spaceTexture = new Three.TextureLoader().load(
"@/assets/images/space-background.jpg"
);
scene.background = spaceTexture;
在我突然想到这不是一个导入或图像问题的地方,我通常可以将它添加到DOM中:
<template>
我试图在vue js应用程序中使用ArcballControls.js控件。该类具有使用箭头语法的函数,控件中的其他每个类都不使用箭头语法。这是我唯一能理解的其他文件之间的区别。下面是由三个js提供的ArcballControls.js
下面是来自three.js的整个jsm/控件
当我试图在我的应用程序中使用这个控件时,我得到了这个错误。
error in ./node_modules/three/examples/jsm/controls/ArcballControls.js
Module parse failed: Unexpected token (238:16)
You m
我正在使用Nuxt.js创建一个完整的静态着陆页面,我还使用Three.js在页面中呈现一个3d全球,在开发模式和本地生产模式下,所有操作都是正确的,但是当我尝试使用纱线生成部署到netlify以创建一个完整的静态站点时,它显示了以下错误:
function (exports, require, module, __filename, __dirname) { import { SyntaxError: Cannot use import statement outside a module at new Script (vm.js:88:7) at createScript (vm.j
我在openlayers地图顶部的单独画布上使用three.js。我同步地图视图和three.js相机(直接向下看地图)的方式如下所示:
// calculate how far away the camera needs to be, to
// see this part of the map
function distanceFromExtentAndFOV(h, vFOV) {
return h / (2 * Math.tan(vFOV / 2));
}
// keep three.js camera in sync with visible part of openlaye
我试图制作一个简单的应用程序,在node.js上呈现一个带有node.js的多维数据集,为此,我尝试了,它基本上封装了three.js,创建了一个模拟浏览器窗口,并公开了三个变量,以便您可以使用它。
问题是,我一直得到"TypeError:无法读取未定义的属性'x‘“,因此我将其缩小到以下代码:
var THREE = require('three.js');
firstVec = new THREE.Vector3(2,2,2);
secondVec = new THREE.Vector3(1,1,1);
clonedVec = firstVec.clon