• 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方向移动就行了。。。就是建模要花点精力


    如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。)
    作者:newmiracle
    出处:https://www.cnblogs.com/newmiracle/

     
  • 相关阅读:
    Mysql数据查询
    Mysql数据类型
    desc和show
    Mysql权限管理
    深入理解inode和硬链接和软连接和挂载点
    Linux用户和组
    VIM文本编辑器
    Linux文件操作
    MySQL基础
    八大排序
  • 原文地址:https://www.cnblogs.com/newmiracle/p/14413582.html
Copyright © 2020-2023  润新知