Question

我无法通过three.js水平旋转3d男人对象模型。

我的主要困惑是我不知道是否应该控制摄像机角度或物体角度来实现这一目标，根据我的研究，似乎有不同的方法来实现我所需要的，但我不是确保哪种方法可以与我到目前为止实现的方法兼容。

<script src="js/three.js"></script>
        <script src="js/OBJLoader.js"></script>
        <script src="js/OrbitControls.js"></script>
        <script>

            var scene, camera, renderer , controls, ambientLight, pointLight, textureLoader, map, material, loader;
            var WIDTH  = window.innerWidth;
            var HEIGHT = window.innerHeight;
            var SPEED = 0.01;

            function init() {
                scene = new THREE.Scene();
                initChris();
                initCamera();
                initRenderer();
                    initControl();
                document.body.appendChild(renderer.domElement);
            }

            function initCamera() {
                camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 8000);
                    ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
                    pointLight = new THREE.PointLight( 0xffffff, 0.8 );

                camera.position.set(0, 0, 4000);
                    camera.add( pointLight );
                    scene.add( camera );
                    scene.add( ambientLight );
                camera.lookAt(scene.position);
            }

            function initRenderer() {
                renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
                renderer.setSize(WIDTH, HEIGHT);
                    renderer.setClearColor( 0x000000, 0 );
            }

            function initControl(){

                    controls = new THREE.OrbitControls( camera );
                    controls.enableZoom  = false;
                    controls.minPolarAngle = Math.PI * 0.5;
                    controls.maxPolarAngle = Math.PI * 0.5;
                    controls.update();
            }

            function initChris() {
                textureLoader = new THREE.TextureLoader();
                map = textureLoader.load('img/CHRIS.BMP');
                material = new THREE.MeshPhongMaterial({map: map});
                loader = new THREE.OBJLoader();
                loader.load( 'obj/CHRIS.OBJ', function ( object ) {
                  object.traverse( function ( node ) {
                    if ( node.isMesh ){
                            node.material = material;
                        }
                  });
                  scene.add( object );
                });
            }

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

            init();
            render();

        </script>

我也不知道3d人模型是否存在问题，因为我尝试使用不同的模型，并且每个模型给我不同的旋转角度。例如，我当前正在使用的模型以鸟瞰图显示我的3d男人模型，并且旋转枢轴发生在他的脚上，而如果我更改从three.js示例中获取的3d男人模型，则可以看到正视图中的3d人模型和旋转枢轴居中，这就是我正在尝试使用的3d人模型实现的目标。

非常感谢您的帮助或建议。

如何使用three.js

0 个答案: