threejs Z轴一镜到底 

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="generator" content="Three.js Editor">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
                font-family: sans-serif;
                font-size: 11px;
                background-color: #000;
                margin: 0px;
            }
            canvas {
                display: block;
            }
        </style>
    <script src="/moban/js/alloytouch.js"></script>
</head>

<body ontouchstart="">
    <script type="module">
        import * as THREE from './js/three.module.js';
            import { APP } from './js/app.js';
         
            window.THREE = THREE; // Used by APP Scripts.

            var loader = new THREE.FileLoader();
            loader.load( 'app.json', function ( text ) {

                var player = new APP.Player();
                player.load( JSON.parse( text ) );
                player.setSize( window.innerWidth, window.innerHeight );
                player.renderer.setAnimationLoop( animate );
                var object = player.scene.getObjectByProperty( 'uuid', '6C336C16-71D6-4C62-821B-BA95011E2DF6' );
               var cz=player.camera.position.z;
               function animate() {
                  
                   player.renderer.render( player.scene, player.camera );
                 
        

                 }

    
            var alloyTouch=new AlloyTouch({
    touch:'body',
    vertical:true,
    maxSpeed:0.8,
      spring: false, 
    max:0,
    min:-2570,
    bindSelf:false,
    initialValue:0,
    change:function(value){
          if(value>=0){
          player.camera.position.z=cz
          }else{
                player.camera.position.z=cz-Math.abs(value)/100;
          }
        
    }
  })
        
        

    

                console.log(player.scene);
                console.log(player.camera);

                document.body.appendChild( player.dom );

                window.addEventListener( 'resize', function () {

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

                } );

            } );

        </script>
</body>

</html>

就比较简单 摄像机Z方向移动就行了。。。就是建模要花点精力

posted @ 2021-02-18 21:37  newmiracle宇宙  阅读(206)  评论(0)  编辑  收藏  举报