<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>SkinnedMesh骨骼动画</title> <style> body { margin: 0;background: #f1f1f1 } canvas { width: 100%; height: 100% } #box{ width: 1600px; height: 900px; background: #f00; } #myvideo{ display: none; } </style> </head> <body> <div id="box"></div> <video id="myvideo" width="500" preload="metadata" controls> <source src="./img/ship.mp4" type="video/mp4"> </video> <script src="./js/three.js"></script> <script type="module"> import { GLTFLoader } from './three/examples/jsm/loaders/GLTFLoader.js'; // 移动旋转 import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js'; var renderer,scene,camera,light,loader,controls,raycaster; var width,height,gltfF,mixer; // 初始化渲染器 Renderer function initRenderer() { width = document.getElementById("box").clientWidth; height = document.getElementById("box").clientHeight; renderer = new THREE.WebGLRenderer({ antialias:true // canvas: document.getElementById('box') });/*生成渲染器对象（属性：抗锯齿效果为设置有效）*/ renderer.setSize(width,height); document.getElementById("box").appendChild(renderer.domElement); /*设置canvas背景色(clearColor)和背景色透明度（clearAlpha） */ renderer.setClearColor(0xFFFFFF, 1); //设置背景颜色 } // 初始化场景 Scene function initScene(){ scene = new THREE.Scene(); // // 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置 // var axisHelper = new THREE.AxisHelper(120); // scene.add(axisHelper); } // 初始化相机 Camera function initCamera() { // PerspectiveCamera 透视摄像机 四个参数：视野角度（fov）,长宽比（aspect ratio）、近切面（near）、远切面（far） camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); //定义camera的位置 相机角度 // (x,y,z)x:负数为向左、正数为向右，y：负数为向下、正数为向上，z：负数越大离得越远、正数越大离得越远（两者方向相反） camera.position.set(1, 3, 60); //这里的lookAt函数是将视角指定为看原点 camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add( camera ); // camera=new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10); // //将camera添加到scene中 // scene.add(camera); } // 初始化光源light function initLight() { // 平行光 // light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0); //平行光 // light.position.set(100, 100, 200); //设置光源位置 // scene.add(light); //将光源添加到场景 //点光源 var point = new THREE.PointLight(0xffffff); //设置点光源位置，改变光源的位置 point.position.set(400, 200, 300); scene.add(point); } // 骨骼动画 function initCube() { var loader = new GLTFLoader(); loader.load( 'SkinnedMesh/scene.gltf', function ( obj ) { //获取模型，并添加到场景 var model=obj.scene; // // 加载出来贴片图片（加载纹理） model.traverse( function ( child ) { if ( child.isMesh ) { child.material.emissive = child.material.color; child.material.emissiveMap = child.material.map ; } } ); scene.add(model); //将模型绑定到动画混合器里面 mixer = new THREE.AnimationMixer( model ); // 同时将这个外部模型的动画全部绑定到动画混合器里面 for (var i=0;i<obj.animations.length;i++){ mixer.clipAction(obj.animations[i]).play(); } }, undefined, function ( error ) { console.error( error,'--------y' ); }); } // 相机空间 function initcontrols() { controls = new OrbitControls( camera, renderer.domElement ); controls.target.set( 0, 0.5, 0 ); controls.update(); controls.enablePan = false; controls.enableDamping = true; } // 全部加载 function threeExcute() { //初始化渲染器 initRenderer(); //初始化场景 initScene(); //初始化照相机 initCamera(); //初始化光源 initLight(); //相机空间 initcontrols(); //骨骼动画 initCube(); } threeExcute() // 创建一个时钟对象Clock var clock = new THREE.Clock(); var animate = function () { requestAnimationFrame( animate ); controls.update(); renderer.render( scene, camera ); if (mixer) { //clock.getDelta()方法获得两帧的时间间隔 // 更新混合器相关的时间 mixer.update(clock.getDelta()); } }; animate(); </script> </body> </html>
动画骨骼gltf
https//files.cnblogs.com/files/enhengenhengNymph/SkinnedMesh密码12.3456.rar