PKQJKK index.html 猫 - js do it Model 03
PKQJITTindex.jsvar _mouseX = 0 , _mouseY = 0; var _mouseXOnMouseDownx = 0 , _mouseXOnMouseDowny = 0; var _targetRotationOnMouseDownx = 0 , _targetRotationOnMouseDowny = 0; var _targetRotationX = 0 , _targetRotationY = 0; var _renderer , _scene , _camera , _models = [] , _controls , _loader , _mesh = null , _mixers = [] , _skins=[] , _prevTime; var _mx = 0.5 , _my = 0.5 , _mouseDown = false , _clock = new THREE.Clock(); var _windowHalfX , _windowHalfY; var _AABB = null; var _jsons = [ 'http://hankuro.sakura.ne.jp/Model_102/Model278_102Body.json', 'http://hankuro.sakura.ne.jp/Model_102/Model278_102Head.json', 'http://hankuro.sakura.ne.jp/Model_102/Model278_102HeadPoint.json' ]; $(function(){ _windowHalfX = window.innerWidth / 2; _windowHalfY = window.innerHeight / 2; init(); animate(); }) function init(){ _scene = new THREE.Scene(); _camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.5, 3000000); _camera.position.set(0, 10, 50); _camera.lookAt({x:0, y:0, z:0 }); var light1 = new THREE.DirectionalLight( 0xffffbb, 0.5 ); light1.position.set( 1, 1, 1 ).normalize(); _scene.add( light1 ); var light2 = new THREE.DirectionalLight( 0xffffbb, 0.5 ); light2.position.set( -1, -1, 1 ).normalize(); _scene.add( light2 ); _scene.add( new THREE.AmbientLight( 0xAAAAAA ) ); _loader = new THREE.JSONLoader(); _jsons.forEach(function(json){ jsonLoad(json) }); _renderer = new THREE.WebGLRenderer({antialias: true , alpha: true}); _renderer.setPixelRatio( window.devicePixelRatio ); _renderer.setSize( window.innerWidth, window.innerHeight ); _renderer.setClearColor( 0x555555 , 0 ); $('#main').append(_renderer.domElement); _controls = new THREE.TrackballControls(_camera, _renderer.domElement); // _controls.noZoom = true; _controls.noPan = true; _controls.rotateSpeed = 5.0; _controls.zoomSpeed = 2.2; _controls.panSpeed = 1; _controls.dynamicDampingFactor = 0.3; $(document).bind('mousemove',function(e){ if(_mesh == null) return; _mouseX = e.clientX - _windowHalfX ; _mouseY = e.clientY - _windowHalfY ; _targetRotationY = _mouseX * 0.0015; _targetRotationX = _mouseY * 0.0015; }); } function jsonLoad(json){ var mesh ; var model = 0; model = json.indexOf('Model278_102Body.json') != -1 ? 0 : model; model = json.indexOf('Model278_102Head.json') != -1 ? 1 : model; model = json.indexOf('Model278_102HeadPoint.json') != -1 ? 2 : model; switch (model) { case 0: _loader.load(json, function ( geometry , materials ) { materials.forEach( function ( material ) { material.skinning = true; } ); mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials)); _scene.add( mesh ); var skin = new THREE.AnimationMixer( mesh ); var clipAction = skin.clipAction(geometry.animations[0]).play(); _skins.push(skin); mesh.scale.set(5,5,5); mesh.position.set(0,-8,0); } ); break; case 1: _loader.load(json, function ( geometry , materials ) { geometry.computeVertexNormals(); geometry.computeMorphNormals(); materials.forEach(function(m){ m.morphTargets = true; }); mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); _scene.add( mesh ); _mesh = mesh; var mixer = new THREE.AnimationMixer( mesh ); var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 ); mixer.clipAction( clip ).setDuration( 1 ).play(); _mixers.push(mixer); mesh.scale.set(5,5,5); } ); break; case 2: _loader.load(json, function ( geometry , materials ) { _AABB = new AABB(); geometry.vertices.forEach(function(v){ _AABB.add(v); }) console.log(_AABB.getCenter()); } ); break; } } function animate(){ requestAnimationFrame( animate ); _controls.update(); var delta = 0.2 * _clock.getDelta(); if(_skins.length != 0) _skins.forEach(function(e,i){ e.update(delta); }); var time = Date.now(); _mixers.forEach(function(e){ e.update( ( time - _prevTime ) * 0.001 ); } ) if(_mixers.length != 0){ if(_AABB != null){ _mesh.position.copy(_AABB.getCenter().multiplyScalar(1.9*5)); _mesh.position.y -= 8.0; _mesh.position.x += 0.15; _mesh.rotation.y += ( _targetRotationY - _mesh.rotation.y ) * 1; _mesh.rotation.x += ( _targetRotationX - _mesh.rotation.x ) * 1; } } _prevTime = time; _renderer.render( _scene, _camera ); } function AABB(){ this.min = new THREE.Vector3(0,0,0); this.max = new THREE.Vector3(0,0,0); } AABB.prototype.add = function(v){ if(v.x < this.min.x) this.min.x = v.x; if(v.x > this.max.x) this.max.y = v.x; if(v.y < this.min.y) this.min.y = v.y; if(v.y > this.max.y) this.max.y = v.y; if(v.z < this.min.z) this.min.z = v.z; if(v.z > this.max.x) this.max.z = v.z; } AABB.prototype.getCenter = function(){ var x = (this.min.x + this.max.x) * 0.5; var y = (this.min.y + this.max.y) * 0.5; var z = (this.min.z + this.max.z) * 0.5; return new THREE.Vector3(x,y,z); } PKQJƫmm style.css* { margin: 0; padding: 0; border: 0; } body { background: #ffd; font: 30px sans-serif; }PKQJKK index.htmlPKQJITTsindex.jsPKQJƫmm style.cssPK