javascript - Three.js：为什么没有和 OrbitControls 3d 模型不显示？; 是否可以进行自动模型尺寸调整

Question

我正在尝试用three.js（我是新手）做一个3d模型查看器，但我遇到了一些困难：

1. 模型显示正确，但我尝试使用 OrbitControls 进行启用（或不启用）鼠标控制的设置。问题是，如果我删除 line controls = new THREE.OrbitControls(camera, renderer.domElement)，模型将不再显示。为什么 ？我该如何解决？

2. 根据模型的大小，有时它会显示得非常小，或者太大而无法在屏幕上看到。我可以手动更改相机位置或对象比例来解决这个问题，但是有没有办法自动做到这一点？目标是让客户在那里导入自己的模型，所以我们不能让它们自己重新缩放。

非常感谢您的帮助，这是我的 main.js ：

let camera, scene, renderer, object, animations, mixer, action, pmremGenerator, controls
let mouseControls, ground, background

init();
animate();

function init() {

    // SCENE
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf0f0f0);

    // CLOCK
    clock = new THREE.Clock();

    // CAMERA
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);
    camera.position.set(-10, 0, 0);

    // LIGHT
    const light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

    // RENDERER
    const container = document.createElement('div');
    document.body.appendChild(container);
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1;
    renderer.outputEncoding = THREE.sRGBEncoding;
    container.appendChild(renderer.domElement);

    pmremGenerator = new THREE.PMREMGenerator(renderer);
    pmremGenerator.compileEquirectangularShader();

    // LOADER
    modelLoader('phone')

    // RESIZE
    window.addEventListener('resize', onWindowResize);

    // SETTINGS
    // GROUND
    ground = false

    // BACKGROUND
    background = true

    // CONTROLS
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    mouseControls = true
}

function render() {
    if (camera) {
        renderer.render(scene, camera);
    }
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

    render();
}

function modelLoader(folder) {
    const loader = new THREE.GLTFLoader()
    loader.load(folder + '/scene.gltf', function(gltf) {
        object = gltf.scene
        object.scale.set(0.4, 0.4, 0.4)
        object.position.set(0, 0, 0)
        object.rotation.set(0, 0, 0)
        scene.add(gltf.scene);
        render();

        // ANIMATION
        animations = gltf.animations
        if (animations) {
            setAnimations()
        }
    });
}

function setAnimations() {
    mixer = new THREE.AnimationMixer(object);
    animations.forEach((clip) => {
        action = mixer.clipAction(clip)
        action.setLoop(THREE.LoopPingPong, 9999)
        action.play()
    })
}

function setGround() {
    const geometry = new THREE.PlaneGeometry(500, 500);
    const material = new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false });

    const ground = new THREE.Mesh(geometry, material);
    ground.position.set(0, -5, 0);
    ground.rotation.x = -Math.PI / 2;
    ground.receiveShadow = true;
    scene.add(ground);

    const grid = new THREE.GridHelper(500, 100, 0x000000, 0x000000);
    grid.position.y = -5;
    grid.material.opacity = 0.2;
    grid.material.transparent = true;
    scene.add(grid);
}

function setBackground() {
    new THREE.RGBELoader().load('venice_sunset_1k.hdr', function(texture) {
        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
        scene.background = envMap;
        scene.environment = envMap;

        texture.dispose();
        pmremGenerator.dispose();

        render();
    })
}

function setMouseControls() {
    controls.addEventListener('change', render); // use if there is no animation loop
    controls.minDistance = 2;
    controls.maxDistance = 100;
    controls.target.set(0, 0, 0);
    controls.update();
}

// SETTINGS
if (ground == true) setGround()
if (background == true) setBackground()
if (mouseControls == true) setMouseControls()

标签： javascriptthree.js