three.js想把“犀牛”固定在原来位置,旋转不跑

发布于 2022-09-06 04:43:44 字数 2925 浏览 14 评论 0

我怎么才能把“犀牛”固定在原来位置,旋转不跑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js第二个例子</title>
    <script src="three.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="OBJLoader.js"></script>


</head>
<body>
<script>

    //场景元素
    var scene=new THREE.Scene();

    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {

        console.log( item, loaded, total );

    };

    var textureLoader = new THREE.TextureLoader( manager );
    var texture = textureLoader.load('xiniu/JS177_col.jpg' );

    // model

    var onProgress = function ( xhr ) {
        if ( xhr.lengthComputable ) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round(percentComplete, 2) + '% downloaded' );
        }
    };

    var onError = function ( xhr ) {
    };

    var loader = new THREE.OBJLoader( manager );
    loader.load('xiniu/xiniu03.obj', function ( object ) {
        object.scale.set(3,3,3);//缩放

        object.traverse( function ( child ) {

            if ( child instanceof THREE.Mesh ) {

                child.material.map = texture;

            }

        } );

        object.position.y = 50;
        scene.add( object );

    }, onProgress, onError );

    //加入环境光
    scene.add(new THREE.AmbientLight(0x404040));
    // 平行光
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
    directionalLight.position.set( 0, 1, 0 );
    scene.add( directionalLight );
    //相机对象
    var camera=new THREE.PerspectiveCamera(45,800/600,1,1000);//透视相机
    //相机位置
    camera.position.set(200,450,150);
    //朝向场景的中心
    camera.lookAt(scene.position);
    //创建渲染器
    var renderer = new THREE.WebGLRenderer();
    //渲染器尺寸
    renderer.setSize(800,600);
    //加入
    document.body.appendChild(renderer.domElement);
    //事件处理
    function render() {
        //渲染
        renderer.render(scene,camera);
    }
    render();

    //创建相机控制
    var controls = new THREE.OrbitControls(camera);

    //事件监听
    controls.addEventListener('change',render);
    //相机与模型最小距离,模型看上去大
    controls.minDistance = 300;
    //相机与模型最大距离,模型看上去小
    controls.maxDistance = 800;
    //      controls = new THREE.Vector3(0,0,0);
    //动画函数处理渲染
    function  animate() {
        requestAnimationFrame(animate);//每一帧都执行一次进行渲染
        render();
    }
    animate();
</script>
</body>
</html>

clipboard.png

鼠标旋转后。。。跑了 不在原来位置上了 我怎么修改代码

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

幼儿园老大 2022-09-13 04:43:44
controls.target = new THREE.Vector3(0,70,0);
controls.needsUpdate=true;
话少情深 2022-09-13 04:43:44

你应该粘一下整个demo的code啊

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文