我正在尝试加载一个对象(.obj)文件以与three.js一起使用并做出反应(使用react-three-renderer),但得到的代码如下所示:
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 * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);
class MyClass extends React.Component {
...
render() {
...
const objLoader = new THREE.OBJLoader();
}
}
但是,我继续得到:"导出'OBJLoader'(导入为'THREE')在'三'中找不到任何有想法的人？
我早些时候在这里问过这个问题：Uncaught TypeError: THREE.MTLLoader is not a constructor
我通过更改三个 mtl-loader 文件让它工作的地方。但由于我稍后将我的工作上传到 github，我必须在不更改这些文件的情况下创建一个解决方案。
因此，我尝试使用经典示例中使用的加载器加载 obj 和 mtl 文件：https : //github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html
但我仍然收到错误“未捕获的类型错误：THREE.MTLLoader 不是构造函数”
我有点不确定如何加载这些加载器，但现在我的代码如下所示：
import * as THREE from 'three'
import {OBJLoader} from 'three'
import {MTLLoader} from 'three'
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("http://blabla.obj.mtl", function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("http://blabla.obj", function(object) {
object.scale.x = scale;
object.scale.y = scale;
object.scale.z = scale;
scene.add(object)
});
});
在我插入的 src 文件夹中的three.js文件中的位置：
export { OBJLoader } from './loaders/OBJLoader.js'
export { MTLLoader} from …我正在尝试操作（例如更改位置、缩放、旋转）在 Three.js 中使用 OBJLoader 加载的对象。虽然这很容易做到一次，但当我想要时，例如在动画循环期间或初始加载回调之外的任何地方，我无法弄清楚如何执行此操作。
这是我的代码：
function loadObj( path, name )
{
var obj;
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( path );
mtlLoader.load( name+".mtl", function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( path );
objLoader.load( name+".obj", function( object ) {
obj = object;
obj.position.x = 20;
scene.add( obj );
});
});
return obj;
}
var myObj = loadObj( "assets/", "test" );
myObj.position.y = 20;
这里需要注意的关键点是：
Cannot read property 'position' of undefined. …我正在尝试将 OBJ 3D 模型显示为可以使用 Three.js 通过 OrbitControls 移动的线框。我是three.js的新手，所以如果我遗漏了一些“明显”的东西，我深表歉意。
我已经能够使用 OrbitControls 将立方体显示为线框。在不同的设置中，我能够将 OBJ 3D 模型显示为线框。因此，该问题与 3D 模型无关。
当我尝试将两种方法混合在一起时，就会出现问题。
我试图通过两种方式解决这个问题：
大多数其他的答案集中脚本的顺序：是的，我曾尝试向移动three.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 …我想禁用 console.log 之类的THREE.WebGLRenderer: Context Lost，
OBJLoader: 1.8330078125ms等等。你有什么建议吗？
完全菜鸟，需要帮助。
系统：Win 10。浏览器Chrome。框架：Nuxt，默认配置
我通过 npm （通过 gitbash）使用npm install three --save. 它在 package.json 依赖项中为"three": "^0.116.1",。我在 ~/assets/ 中保存了一个 scene.json 文件，该文件是使用Three.js 编辑器> 导出场景生成的。
无论有或没有，我都会收到错误“无法在模块外部使用导入语句”type="module"
这是我正在使用的 Vue 组件：（它仅呈现给客户端。）
<template>
<div id="Three">
<div id="threeContainer"></div>
</div>
</template>
<script type="module">
import * as Three from 'three'
import OBJLoader from 'three/examples/jsm/loaders/OBJLoader.js'
export default {
name: 'Three',
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null
}
},
mounted() {
this.init()
},
methods: {
init() {
const container …以下是使用 ObjLoader 处理 3D 对象的工作示例。有谁可以教我如何向这个 3D 对象添加着色器材质吗？
大多数教程都类似于使用标准的 Three.geometry，然后将几何体和着色器添加到场景中。但是，如果我想将自定义着色器材质添加到 3D 对象，而不是标准 Three.js 几何体，我应该怎么做？
<!DOCTYPE html>
<html lang="en">
<head>
<title>OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #fff;
color: #fff;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script>
var clock = new THREE.Clock();
var delta = clock.getDelta(); // seconds.
var rotateAngle = Math.PI / 2 * delta; // pi/2 radians (90 degrees) per second
var container, …我正在尝试导入要加载THREE.OBJLoader().load()函数的本地 .obj ，我知道它可以工作，因为当我传递非本地 URL（例如“ http://downloadOBJfromHere.com ”）时，它会完美加载它，这是我的主要问题就是这样，每次我加载它时，它都必须下载 obj 并且需要很长时间。
我正在使用 React 进行服务器端渲染。
import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
import obj from '../../../assets/obj/scene.obj';
在ComponentDidMount()：
const loader = new THREE.OBJLoader();
loader.load( obj,
object => {
scene.add(object);
},
xhr => {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
error => {
console.log("Error! ", error);
}
);
当我这样做时，我在 Chrome 控制台中收到错误消息：
Unexpected line: '<!doctype html><html lang="en" data-reactroot="" data-reactid="1" data-react-checksum="1415239080"><head data-reactid="2"><meta …