THREE.JS 加载 3D 模型但它没有显示在我的 vue 组件中答案

【问题标题】：THREE.JS load the 3D model but it is not showed in my vue componetTHREE.JS 加载 3D 模型但它没有显示在我的 vue 组件中
【发布时间】：2022-01-16 02:18:58
【问题描述】：

我是使用 THREE.js 的新手，我一直在尝试将 .glb 模型显示到我的组件中。

<template>
  <section id="hero"></section>
</template>

<script>
import * as THREE from "three";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
//import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { onMounted } from '@vue/runtime-core';

export default {
    setup(){
        let scene = new THREE.Scene();
        let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight,0.1,10);
        let renderer = new THREE.WebGLRenderer();
        let light = new THREE.AmbientLight( 0x404040 );
        let loader = new GLTFLoader();

        const init = ()=>{
            renderer.setSize(window.innerWidth, window.innerHeight);
            loader.load(
                process.env.BASE_URL+'GLB/Elephant.glb',
                function (glb ) {
                    console.log(glb);
                    scene.add(glb.scene);
                    light.position.set(2,2,5);
                    scene.add(light);
                },
                function (xhr) {
                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                },
                function (error) {
                    console.error( error );
                }
            );
            const container = document.getElementById('hero');
            container.appendChild(renderer.domElement);
            camera.position.set(0,1,2)
        };
        
        const animate = () => {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        };
        onMounted(()=>{
           init();
           animate();
        })

    }
       

}
</script>

<style>
#hero {
  width: 100%;
  height: 100vh;
  background-color: white;
}
</style>

我知道我的 .glb 文件已加载，因为它显示在控制台中。但是当我将它添加到我的场景中时，屏幕上没有任何内容，我也尝试使用文档中的示例，我可以从示例中显示多维数据集，但是当自定义模型不起作用时，我没有控制台有任何错误。

【问题讨论】：

你能分享控制台输出吗？

标签： vue.js three.js

【解决方案1】：

也许你的相机位置不好。如果你不设置相机看的地方，相机会默认看(0, 0, 0)，如果你的模型不在视线范围内，你就看不到它。你可以添加一个控制器来改变你的视角。

`setup(){
    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight,0.1,10);
    let renderer = new THREE.WebGLRenderer();
    let light = new THREE.AmbientLight( 0x404040 );
    let loader = new GLTFLoader();

    const init = ()=>{
        renderer.setSize(window.innerWidth, window.innerHeight);
        loader.load(
            process.env.BASE_URL+'GLB/Elephant.glb',
            function (glb ) {
                console.log(glb);
                scene.add(glb.scene);
                light.position.set(2,2,5);
                scene.add(light);
            },
            function (xhr) {
                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
            },
            function (error) {
                console.error( error );
            }
        );
        const controls = new OrbitControls(camera, renderer.domElement)
        const container = document.getElementById('hero');
        container.appendChild(renderer.domElement);
        camera.position.set(0,1,2)
    };
    
    const animate = () => {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
        controls.update();
    };
    onMounted(()=>{
       init();
       animate();
    })

}`

如果这不起作用，您应该考虑模型的尺寸是否太大/太小。你可以使用

const box = new THREE.Box3().setFromObject(glb.scene);
console.log(box)

检查它的大小，并使用glb.scene.scale.set()设置它的比例。

【讨论】：