如何在 Threejs 中导入自定义模型？

Question

我见过很多关于同一问题的问题，但我尝试过的所有答案都不适合我。 我想使用以下代码在 Threejs 中导入我的 3D 模型：

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<!-- <script src="js/3d.js"></script> -->
<script>
    
    /**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

//Material
const material = new THREE.MeshToonMaterial({ color: '#ffeded'})

/**
 * Object Meshes
 */


const mesh1 = new THREE.Mesh(
    new THREE.TorusGeometry(1, 0.4, 16, 60),
    material
)
const mesh2 = new THREE.Mesh(
    new THREE.ConeGeometry(1, 2, 32),
    material
)
const mesh3 = new THREE.Mesh(
    new THREE.TorusKnotGeometry(0.8, 0.35, 100, 16),
    material
)

scene.add(mesh1,mesh2, mesh3)

function loadGLTF() {
    let gbLoader = new THREE.GLTFLoader();

    gbLoader.load('GB.gltf', (gltf) => {
        // gbMesh.scale.set(0.1, 0.1, 0.1);
        scene.add(gltf.scene);
    });
}



/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

// Position

const objectsDistance = 4

mesh1.position.y = - objectsDistance * 0
mesh2.position.y = - objectsDistance * 1
mesh3.position.y = - objectsDistance * 2


const sectionMeshes = [ mesh1, mesh2, mesh3 ]

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(35, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 100
scene.add(camera)

/**
 * Lights
 */
 const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
 directionalLight.position.set(1, 1, 0)
 scene.add(directionalLight)

 /**
 * Scroll
 */
let scrollY = window.scrollY

window.addEventListener('scroll', () =>
{
    scrollY = window.scrollY
})

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Animate camera
    camera.position.y = - scrollY / sizes.height * objectsDistance

    // Animate meshes
    for(const mesh of sectionMeshes)
    {
        mesh.rotation.x = elapsedTime * 0.1
        mesh.rotation.y = elapsedTime * 0.12
    }

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

</script>

<script>
 AOS.init({
     once: true,
 });
</script>

其他一切都运行良好，但我的模型不会显示在我的屏幕上。

导航器中代码的结果

我正在使用 MAMP 服务器来执行我的代码，并且我将我的 .gltf 文件与我的 js 文件放在同一目录中。

有人有解决办法吗？

Answer 1

您的加载代码位于 loadGLTF() 函数内部...但看起来您从未调用该函数..

要么在某处调用 loadGLTF 函数，也许就在调用 tick() 之前，要么将加载代码移到 loadGLTF 函数之外。

Answer 2

您已经定义了 loadGLTF() 函数，但没有在任何地方调用它。您可以尝试在 tick() 函数之前调用它：

loadGLTF()
const tick = () =>
{

您可以从 以下示例可帮助您开始使用加载 头盔.gltf。