我使用的是react js样板(create-react-app)和导入的three.js。我正在尝试为一个特定的项目使用TrackballControls，但它不起作用。它会抛出类似“尝试导入错误：'TrackballControls‘不是从'three’(导入为‘THREE’)导出”这样的错误。现在我知道它在examples文件夹中，如果我从论坛上理解正确的话，它不是正式的导出。有人能帮我解决这个问题吗?如何在react组件中导入TrackballControls？我们将非常感谢您的帮助！
import React, { useState, useEffect } from
浏览 44提问于2019-10-30得票数 3
回答已采纳
3回答
我正在尝试加载一个对象(.obj)文件，以便与three.js一起使用，并使用react -三重呈现器，但得到一个My代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import React3 from 'react-three-renderer';
import TrackballControls from './TrackballControls';
import * as THREE from 'three';
import
浏览 8提问于2017-07-19得票数 7
回答已采纳
1回答
我一直在努力从导入示例模块，在我的项目中使用了next.js (服务器端反应框架)和一个自定义的快速服务器。我的服务器代码看起来像这样-
const express = require('express');
const next = require('next');
const favicon = require('serve-favicon');
var path = require('path');
let fs = require('fs')
const dev = process.env.NODE_E
浏览 4提问于2019-11-02得票数 5
回答已采纳
由于某些原因，当构造一个TrackballControls对象时，我一直收到一个错误，该对象说"THREE.TrackballControls不是构造函数“。
下面是一个很小的例子：
<!doctype html>
<html>
<head>
<title>Trackball Controls</title>
</head>
<body>
<script src = "three.js"></script>
<scirpt src =
浏览 3提问于2017-05-11得票数 1
回答已采纳
1回答
Three.js装载机
、、、
我从threejs.org获得了包文件threejs.org，我试着这样使用：
<script type="text/javascript" src="./build/three.js"></script>
<script type="text/javascript" src="./src/loaders/JSONLoader.js"></script>
<script src="./examples/js/controls/TrackballControls.js
浏览 2提问于2016-08-27得票数 1
回答已采纳
2回答
我想在我的three.js全景播放器中添加夹点缩放。
我环顾了一下四周，似乎TrackBallControls.js可能会有这个内置的？
我尝试过实现它，但是我得到了一个
“未捕获的TypeError:未定义的不是函数”
在……上面
var controls = new THREE.TrackballControls( camera );
现在，由于这个系统，我必须使用Three.js动态加载所有Sid.js脚本，这是否是它似乎找不到THREE.TrackballControls的原因呢？
这是否是三倍于移动设备的按压和放大的正确解决方案？
浏览 3提问于2014-08-19得票数 1
回答已采纳
three.js r.71号
我使用jquery应用了一个简单的滑块，该滑块通过"z“轴旋转一个对象。
不幸的是，移动滑块也是移动相机的现场。
我正在使用TrackballControls。
controls = new THREE.TrackballControls( camera );
问题：如何在使用滑块时“关闭”移动相机？
浏览 2提问于2015-07-02得票数 0
回答已采纳
我正在和three.js一起研究angular2。
这是我的angular cli的配置。
在package.json中：
"three": "^0.81.2",
"three-stl-loader": "^1.0.4",
在angular.cli.json中：
"../node_modules/three/build/three.min.js",
"../node_modules/three/examples/js/Detector.js",
"../node_mo
浏览 2提问于2017-01-17得票数 2
1回答
大纲我们试图将一个大型React.js项目分成几个节点包，这些包可以单独维护。我们正在尝试提取所有复杂的three.js框架代码，并将其集中到一个“预览者”包中。
Problem我们有一个特例，需要在组件中使用ref关键字一次。我知道这是一种糟糕的做法:(我们在想，是否有办法消除或压制下面的警告：
浏览 0提问于2017-08-04得票数 0
回答已采纳
1回答
在Three.js中，有各种各样的控件，比如TrackballControls，可以让用户控制相机。这是很棒的，但我希望用户能够旋转场景的一部分(例如，分子)，而不旋转场景的其余部分(例如，不同的分子，或者光源)。
对如何做到这一点有什么建议吗？
我想知道，如果我向TrackballControls()构造函数提供了一个不同的对象，而不是相机.它会旋转那个物体吗？？似乎不太可能..。
浏览 3提问于2011-11-18得票数 1
回答已采纳
我正在使用JSONLoader使用Three.js加载JSON模型。我也在使用TrackballControls.js进行基本的交互。如果我移动(平移)对象，旋转效果会有所不同。如何在移动后更改模型中心的旋转(平移)？
提前谢谢。
浏览 6提问于2016-09-16得票数 1
我一直在使用Physijs与旧版本的three.js，它工作得很好，但当我下载了最新版本的三put，它不工作，甚至只是在现场放置一个平面网格
它带来了这个错误Uncaught TypeError: Class constructor Scene cannot be invoked without 'new' line:391 of:file:///storage /emulated/0/threejs /learning-threejs/libs/physi .js
我不明白为什么这是我的密码
<html>
<head>
<title>
浏览 10提问于2021-12-04得票数 0
1回答
我正在创建一个web应用程序使用角，它集成了Autodesk锻造查看器javscript库。
伪造viewer.js库包含在伪造viewer.js本身中，这是THREE.js发布r71的自定义版本。
正因为如此，我在我的应用程序中看到了一些意想不到的结果：
THREE.Object3D.add: object not an instance of THREE.Object3D
从一些研究来看，这是因为THREE.js被两次加载到我的应用程序中。我尝试过将three.js从node_modules中卸载，但这会导致构建错误：
Error: ENOENT: no such file or dire
浏览 3提问于2019-12-11得票数 1
回答已采纳
1回答
我通过Webpack在Vue中使用Three.js，并试图在npm 的示例文件夹中使用TrackballControl.js。我一直在阅读如何最好地去做它，并发现了解决方案上的Github。
因此配置了我的代码，并将其解释为创建了一个名为three.js的文件。使用以下代码：
import * as THREE from 'three'
global.THREE = THREE;
require('three/examples/js/controls/TrackballControls');
module.exports = global.THRE
浏览 0提问于2018-06-10得票数 1
在Three.js中，我希望相机指向3D空间中的某个点。
为此，我尝试使用camera.lookAt函数，如下所示：
camera.lookAt(new THREE.Vector3(-100,-100,0));
然而，我发现这个调用没有任何效果。它什么也做不了。我试着改变矢量中的数字，当它应该改变时，我总是在屏幕上得到相同的外观。
我现在才发现，如果我删除代码中的THREE.TrackballControls，camera.lookAt()就会正常工作。我使用THREE.TrackballControls的方式有问题吗？这是我初始化它们的方式：
controls = new THREE
浏览 0提问于2012-04-26得票数 35
回答已采纳
1回答
我试图用应用程序在div中显示一个three.js场景。然而，它抛出了一个未定义的三个。
试过
npm安装--保存三个
进口*从“三”中进口三
但似乎不起作用，它总是抛出三个没有定义的-undef。请看一看我的回购。
更新：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.6",
浏览 1提问于2017-11-21得票数 1
我发现使用A框架和three.js的项目将触发以下错误：
Uncaught : THREE.CSS3DObject不是构造函数
我使用这个示例来测试：
这是源代码：
当我将A帧脚本添加到这个示例中时，它会触发相同的错误。
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script
浏览 0提问于2018-07-05得票数 2
回答已采纳
我想将three.js脚本TrackballControls应用于移动对象，以保留在物体在场景中移动时缩放和旋转相机的能力。例如，我希望能够让相机“跟随”一个移动的行星，而用户保留了缩放和旋转行星的能力。下面是一个基本的“小提琴”：
(由于某种原因，鼠标控制实际上不工作在jsfiddle上，但在我的机器上却起作用)。
我希望能够把相机附加到红色的球体上，这样它就能和它一起移动，但是不会失去缩放和旋转的能力。我可以通过在render()函数中添加这样的行来让摄像机很容易地跟踪球体：
mouseControls.target = new THREE.Vector3(object.position
浏览 2提问于2014-07-20得票数 4
回答已采纳
我开始使用three.js，并想知道是否有一个简单的插件来添加trackball功能，这样我就可以看到我在代码中所做的更改是如何影响这个简单对象的“底层”的。
我试着跟着：
但是我得到了很多EventDispatcher错误。
我的意思是我已经：
添加"TrackballControls.js“
添加"Detector.js“
添加了以下代码：
如果(！Detector.webgl ) Detector.addGetWebGLMessage()；var controls =新THREE.TrackballControls(摄像机)；controls.rotateS
浏览 3提问于2013-04-01得票数 0
回答已采纳
我正在尝试使用Three.js在react-native中创建3D模型，因此我必须使用纹理图像，但TextureLoader()函数使用'document‘和'canvas’对象创建逻辑，这不能在React-Native中使用。
那么，如何使用three.js在react-native中使用图像作为纹理呢？
浏览 1提问于2018-04-02得票数 2
2回答
三个js的多个脚本标记
、、、
我第一次尝试使用three.js和一般的html和js。我正在处理示例代码，我发现即使我从我的Main.js文件中的脚本标记导入了这个脚本文件，它也不能工作，除非我取消注释当前注释掉的脚本标记。为什么是这种情况？我是否可以在没有第一个脚本标记的情况下在我的Main.js文件中运行它？
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<title>My first three.js app
浏览 6提问于2022-05-01得票数 -1
我试图在一个非常简单的dat.gui ( three.js，r73)场景中使用renderer.domElement，但在将"renderer.domElement“添加到trackballControls初始化之后，遇到了旋转和pan无法工作的问题。变焦效果如预期。
如果没有renderer.domElement，我将获得一个工作的旋转、缩放、pan功能，但是单击dat.gui接口滑块时会出现“闩锁”，这是很烦人的，而且没有功能。这里描述的问题是：。
在这里查看了更多信息，但没有看到很好的分辨率：
也发现了这个问题。定义容器元素(又名renderer.domElement )不起作用
浏览 3提问于2015-10-25得票数 3
回答已采纳
2回答
您好，我正在尝试在我的机器上本地运行一些three.js示例。我知道安全方面有一些问题，所以我需要设置一个本地服务器。因此，我使用python运行本地服务器。将显示背景图像和文本，但不会发生动画。
我检查了控制台，并得到错误三未定义。我已经下载了three.js并将该文件夹放到了我的项目目录中--你对这里发生的事情有什么想法吗？
从three.js (示例)页面访问时，动画在浏览器中工作。我的脚本src与我在three.js-master目录中使用命令行时pwd命令的输出相同，如下所示：
<script src="/home/iiiiiii/Desktop/test/buil
浏览 1提问于2017-04-17得票数 0
描述
我正在尝试在我的项目中使用来自THREE.js的THREE.js。当我试图导入OrbitControls对象时，我在Google控制台中得到以下错误消息。
请求的模块'./three.js‘不提供名为“EventDispatcher”的导出。
当我手动检查three.js (r119)时，我可以看到它确实在第50631行导出了EventDispatcher。
问题：考虑到这些信息，为什么我会收到前面提到的错误消息，以及如何解决这个问题？
HTML
<!DOCTYPE html>
<html lang="en">
<body>
浏览 4提问于2020-08-05得票数 0
回答已采纳
PropTypes封装在React源代码中的React对象中，所以这个语句是如何工作的-
从“react”导入{PropTypes}；
浏览 1提问于2016-08-25得票数 3
回答已采纳
2回答
我有一个简单的WebGL代码，它显示一个3D图形。它工作良好，但我想为宽度设置一个与100%不同的值；也就是说，我想把webGL动画放在一个小盒子里。
在下面的代码中，我尝试将WebGL放入一个带有CSS“高度”和“宽度”的500 of框中，但它不起作用:动画仍然占用100%的宽度：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - trackball controls</title>
<meta
浏览 3提问于2015-08-01得票数 0
我认为，对于这样的项目，react的痛苦要比棱角小，而且您仍然可以将“简单”的javascript混入到项目中。因此，我在index.html中的react项目中有这样的脚本标记:我尝试将集成到我的react组件中。
<script src='libs/three/example/vendor/three.js/build/three.js'></script>
<!-- jsartookit -->
<script src="libs/three/vendor/jsartoolkit5/build/artoolkit.min.
浏览 12提问于2021-05-21得票数 2
我对javascript环境很陌生(我有C++物理模拟和游戏引擎方面的背景)。随着HTML5和WebGL的兴起，我想尝试使用javascript制作一些游戏/3D编辑器。
问题是，更大的项目，如与3D引擎的游戏开始变得非常混乱。而不是构建系统(makefile，cmake)，我只有这样的index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - trackball controls</title>
浏览 0提问于2018-06-12得票数 -1
我编写了一个小的Three.js动画，我把它放在我的HTML页面中：
<div id="mainWindow" class="popup_block">
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src=&#
浏览 4提问于2017-08-22得票数 0
回答已采纳
我正在尝试使用React服务器端呈现来使这个工作。我的主要问题是这些行(47和280) (从示例中)：
<script src="js/postprocessing/OutlinePass.js"></script>
outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );
composer.addPass( outlinePass );
因为我不知道如
浏览 0提问于2018-01-19得票数 0
回答已采纳
6回答
我很难理解webpack是如何在一个包中包含依赖关系的。
我建立了一个最低限度的演示使用webpack，类型记录和三ish，很好的工作。
第一个问题是，我不明白如何在bundle.js中包含三个is。我觉得这样做很棒！我只是不明白它是怎么包括在内的。
第二个问题发生在我试图添加另一个包()时。我还为它添加了typings，包括：
typings install --save --global dt~three-trackballcontrols
它编译了ok，但是当在浏览器中加载时，会出现以下错误：
THREE.TrackballControls is not a constructor
我明
浏览 0提问于2016-06-07得票数 1
回答已采纳
如果我有以下情况：
<script type="module" src="one.js"></script>
<script type="module" src="two.js"></script>
<script type="module" src="three.js"></script>
我说得对吗?你不能百分之百地确信three.js会在 one.js和two.js之后被执行
但是，如果我有：
<scri
浏览 5提问于2021-09-05得票数 4
回答已采纳
//zoom and scaleFactor are both constants
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.OrthographicCamera(
window.innerWidth / - (zoom / scaleFactor),
window.innerWidth / (zo
浏览 2提问于2018-08-27得票数 0
回答已采纳
谁能告诉我如何将three.js代码与react-three-fiber结合起来？我看到标签在这种情况下很有用，但还是不明白是怎么回事。
浏览 11提问于2021-02-19得票数 0
回答已采纳
我很难理解为什么我的程序会因为这个错误而崩溃：
Uncaught :未能解析模块说明符"three/examples/jsm/loaders/GLTFLoader.js“。相对引用必须以"/“、"./”或“./”开头。
我正在尝试使我的html文件与我创建的serial.js文件进行通信。html只是在项目文件夹中，但是serial.js文件存储在我为项目所拥有的js文件夹中(需要导入从three.js网站下载的一些对象加载器模板)。
这就是我到目前为止在我的html代码中尝试过的：
<html>
<head>
<title>
浏览 13提问于2022-03-21得票数 2
Trackball在我的three.js程序以及onMouseClick和onMouseUp事件侦听器中运行得很好。我使用以下线路启用Trackball：-
controls = new THREE.TrackballControls( scene01camera02 , DOM_container);
但是onMouseDown事件侦听器无法工作。
如果我禁用trackball (通过注释掉上面所示的代码行)并禁用任何其他相关代码，那么onMouseDown可以正常工作。
有什么方法同时使用onMouseDown和Trackball控制吗？
原因是，当鼠标向下的事件发生时，我可以在屏幕上检测
浏览 9提问于2013-09-15得票数 2
回答已采纳
1回答
我在很多文件中都看到过这种语法：
import React, {Component} from react;
我知道命名导出和默认导出是如何分开工作的，但我不确定React在导出代码时如何处理这个问题。
例如，默认的React导出是否是一个对象，其中包含作为命名导出函数的组件？这就是为什么您可以使用React.Component点表示法？
浏览 6提问于2019-11-26得票数 0
1回答
因此，我发现了很多关于如何在Threejs本身中可用的默认对象上使用鼠标拾取的教程，但是是否可以在导入的模型(如.obj文件)上使用鼠标拾取，并在用户单击模型的确切位置显示一个球？如果是这样的话，有人能给我一个教程或至少一个例子的源代码，以便我可以使用它。我更喜欢一个教程，因为这是一个更好的学习方法。;)
编辑:所以我让鼠标采摘为模型工作！但是现在我想在用户点击模型的位置显示一个小点。我试着用这个演示的方式来做：，但是不能让它工作，谁知道为什么？见下面的代码
// once everything is loaded, we run our Three.js stuff.
var clock =
浏览 3提问于2014-09-04得票数 1
回答已采纳
我一直在研究React，并试图从概念上理解我在每个React.js文件import React from "react"的顶部看到的导入语句实际上在做什么。我一直在阅读React ，但不确定我是否正确地理解了这个概念。
导入语句import React from "react"是否意味着将整个react库导入到.js文件中，并将整个react库存储在我命名为"React“的新对象中？
或者" react“对象是一个已经在react库中定义的对象，我正在使用import语句将"React”对象从react库中提取出来，以使用
浏览 3提问于2022-02-14得票数 0
我正在尝试在一个三人组的场景中有一些相机控制。
我看了一下，它看起来完全是用这些行来处理的：
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
这些代码行使用来
浏览 0提问于2013-11-12得票数 14
回答已采纳
在我的react组件中，这个导入做错了什么？我正在尝试在我的React应用程序中使用以下npm包：
我假设这个包可以从React应用程序中使用。有什么理由不是这样的吗？如果没有，那么我应该如何评估npm包是否可以在React应用程序中使用？npmjs页面显示了如下使用的包：
const RenderPDF = require('chrome-headless-render-pdf');
RenderPDF.generateSinglePdf('http://google.com', 'outputPdf.pdf');
我想我应该能够简单地将包导
浏览 0提问于2020-02-08得票数 4
随着THREE.js的更新，我在使用GLTFLoader时遇到了问题。它总是给我上面提到的错误。
在单独的js文件中导入
test.js
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="test.js
浏览 0提问于2020-04-03得票数 1
2回答
我在blender中开发了一个3D灯模型，并使用three.js将其加载到web上。
这个模型非常基础，但对我来说重要的是，我希望有人能给我一个想法，如何在three.js中产生一种从灯内部发出的光的错觉，因为你可以找到很多如何从远处照亮物体的例子，但从物体(特别是模型)的一侧发射光如何，就像这个灯的场景一样。
请理解，我并不是懒惰，只是three.js文档太有限了，我还找不到针对我需要的示例或解释。
这是我到目前为止用来加载模型的代码：
<!DOCTYPE html>
<html>
<head>
<title>example 1: load m
浏览 1提问于2013-06-24得票数 4
我在three.js中实现了一个模型查看器，并将其覆盖为两个场景。使用TrackballControls控制主场景中的对象。叠加场景中的对象使用不受任何控制类控制的单独摄影机进行投影。我这样做是为了允许主场景中的对象缩放、旋转和平移，并允许覆盖场景中的对象模拟旋转(通过重新绘制对象，因为应显示平行于xy轴的平面以外的任何内容)。我像这样连续渲染这两个场景：
this.renderer.render(this.scene, this.camera);
this.renderer.clear(false, true, false);
this.renderer.render(this.overl
浏览 4提问于2014-02-08得票数 0
1回答
目前我正在做一个THREE.js项目，我在缩放时遇到了问题object.It是基于渲染的中心位置进行缩放，同时使用轨迹球控制，但我想基于光标位置进行缩放。我尝试使用controls.noZoom=true禁用轨迹球控制下的缩放，并在mousewheel.It下编写了一个代码，正如我所期望的那样，它只是放大而不是缩小。
mousewheel = function (event) {
event.preventDefault();
event.stopPropagation();
var factor = 15;
var mX = (
浏览 17提问于2016-08-30得票数 3
回答已采纳
我正在学习电子，创建一个简单的基于three.js的三维可视化系统。
我偶然发现了一个问题:我所遵循的指南()复制了项目目录中的three.js库，并将其包含在带有脚本标记的主HTML中。
来自Python背景，这让我觉得非常烦人，因为：
我需要手动复制到每一个需要three.js的项目中；
如果我想使用不同版本的库，我必须再次复制它。
是否有一种不需要我直接在three.js文件中键入路径的导入的替代方法？还是有一个很好的理由，为什么进口是这样做？我试图寻找一个类似的答案，但找不到任何答案，也许我不知道确切地寻找什么。
浏览 1提问于2021-04-08得票数 0
3回答
因此，我一直在尝试在我的Range2应用程序中实现THREE.js。我还没能成功地将库导入到Rang2中。有一些项目的源代码已经过时了，它们要么是角2 (beta)，要么是角js。现在，如果有一个运行THREE.js的空白项目，我会欣喜若狂，从此我就可以开始我的指令了。
如果有人知道如何将THREE.js添加到Range2项目中的任何好例子或提示，我将不胜感激。
浏览 3提问于2016-10-25得票数 7
1回答
如何呈现three.js项目？
、、、、
我遵循 three.js初学者教程，并且我被困在第2部分，因为我的网页上没有呈现任何内容。我读/看了其他教程，但每次都面临同样的问题。
我用npm三保存命令安装了three.js，代码如下所示。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
浏览 3提问于2022-03-28得票数 1
1回答
我在想，如果我从另一个文件导入一个函数，我是否也导入了该函数文件中导入的所有文件？例如：
auth.js
import React from 'react';
import { AsyncStorage, View, Text, ScrollView, ... } from 'react-native';
import ModuleA from './modules/ModuleA';
import ModuleB from './modules/ModuleB';
import Module99 from './modu
浏览 0提问于2018-11-03得票数 2
回答已采纳
1回答
我在three.js中的trackballControls遇到了问题。我想手动旋转和定位相机。下面是测试函数。
function rotateTest(){
console.log(camera.rotation) // THREE.Euler {_x: 0, _y: 0.7853981462831776, _z: 0, _order: "XYZ", onChangeCallback: function…}
camera.rotateZ(1);
console.log(camera.rotation) // THREE.Euler {_x: 7.850
浏览 1提问于2014-11-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
