我尝试了三个带有OBJ文件的js，但是它没有在屏幕上呈现，有人能帮我解决这个问题吗？有什么明显的东西我错过了吗？
另一方面，几何立方体渲染完美。
OBJ文件可在此处下载：https://free3d.com/pt/3d-model/tote-bag-womens-v1--846558.html
索引.js：
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import sacola from './sacola.obj';
const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const controls = new OrbitControls( camera, renderer.domElement );
const loader = new OBJLoader();
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor('#000', 0)
camera.position.set(0,0,8);
controls.enableDamping = true
document.body.appendChild( renderer.domElement );
// const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// const cube = new THREE.Mesh( geometry, material );
// scene.add( cube );
loader.load(sacola, (model) => {
model.position.set(0, 0, -53);
scene.add( model )
},
);
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
controls.update();
}
animate()索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apresentação 3D</title>
</head>
<body>
</body>
</html>webpack.配置文件.js：
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
assetModuleFilename: 'assets/[hash][ext][query]',
},
devServer: {
port: 3001,
open: true,
allowedHosts: 'all'
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif|obj)$/i,
type: 'asset/resource'
},
{
test: /\.obj$/,
loader: 'webpack-obj-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/public/index.html', inject: true })
],
}代码结构：
2条答案
按热度按时间vmdwslir1#
你必须添加一些灯光到你的场景中，否则资源将被渲染为黑色。尝试类似于：
另外，把你的相机移离原点。OBJ相当大，所以试试看：
ubby3x7f2#
更新：
问题是我的OBJ加载器在webpack里面，出于某种原因使用
所以我的代码不起作用。
删除它解决了我的问题