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