Javascript 将相机/轨道控制装置聚焦在物体的中心

我正在尝试使用three.js库制作一个非常简单的3D模型查看器。我唯一的目标是让摄影机控制轴点成为对象的中心，并使对象在画布上居中以开始

这里有很多类似的讨论，我尝试过这些建议，以及来自Three.js网站的各种例子，但我不知道我做错了什么。它并不遥远，但它似乎以世界空间的0,0,0为中心

我读到轨道控制覆盖了相机，所以我乱弄了

Controls.target.set

，但它说网格变量未定义，尽管在全局中声明

如何在画布视口中将模型居中并使其中心成为旋转点

<div class="container">

    <canvas id="artifactCanvas"></canvas>

</div>

<script src="{{ asset('/js/three.min.js') }}"></script>
<script src="{{ asset('/js/OrbitControls.js') }}"></script>
<script src="{{ asset('/js/STLLoader.js') }}"></script>

<script>

    var scene, renderer, camera, mesh;

    var material = new THREE.MeshPhongMaterial( { color: 0xffaf00, specular: 0x111111, shininess: 200 } );

    init();
    animate();

    function init() {

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

        // renderer
        renderer = new THREE.WebGLRenderer( { canvas: artifactCanvas, antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize(600, 400);

        // lights
        var light = new THREE.DirectionalLight( 0xffffff, 2 );
        light.position.set( 1, 1, 1 );
        scene.add( light );

        // camera
        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.set( 100, 0, 0 );

        // Geometry
        var loader = new THREE.STLLoader();

        loader.load("{{ asset('/stls/test.stl') }}", function ( geometry ) {

            mesh = new THREE.Mesh( geometry, material );
            mesh.position.set( 0, 0, 0);
            mesh.rotation.set( - Math.PI / 2, 0, 0 );
            mesh.scale.set( 1, 1, 1 );

            scene.add( mesh );
        });

        // controls
        controls = new THREE.OrbitControls( camera, renderer.domElement );

        // Cannot read property 'center' of undefined
        //controls.target.set( mesh.center() );
    }

    function animate() {

            renderer.render( scene, camera );
            requestAnimationFrame( animate );

    }

</script>

var场景、渲染器、摄影机、网格；
var material=新的三点网格材质（{颜色：0xffaf00，镜面反射：0x111111，光泽度：200}）；
init（）；
制作动画（）；
函数init（）{
//场面
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xc5e5fc）；
//渲染器
renderer=new THREE.WebGLRenderer（{canvas:artifactCanvas，antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
渲染器。设置大小（600400）；
//灯光
var灯=新的三方向灯（0xffffff，2）；
光。位置。设置（1，1，1）；
场景。添加（灯光）；
//摄像机
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置设置（100,0,0）；
//几何学
var loader=new THREE.STLLoader（）；
load（“{asset（'/stls/test.stl'）}}”，函数（几何体）{
网格=新的三个网格（几何体、材质）；
网格位置设置（0,0,0）；
mesh.rotation.set（-Math.PI/2,0,0）；
网格。比例。设置（1，1，1）；
场景。添加（网格）；
});
//控制
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
//无法读取未定义的属性“center”
//controls.target.set（mesh.center（））；
}
函数animate（）{
渲染器。渲染（场景、摄影机）；
请求动画帧（动画）；
}

看看这个。@prisoner849太棒了。。。早些时候，我试图查看那里的几次讨论，但网站似乎已关闭。这正是我想做的，谢谢！你想回答吗？