美文网首页WebGLThree.js我爱编程
33three.js用骨骼蒙皮创建动画

33three.js用骨骼蒙皮创建动画

作者: 狂暴机甲 | 来源:发表于2018-06-11 17:04 被阅读39次
用骨骼蒙皮创建动画.jpg
Three.js提供了带有蒙皮的网格对象THREE.SkinnedMesh。需要注意的是将材质的skinning属性设置为true,否则骨头不会运动的。
在练习书上的案例的时候遇到一些问题。
  1. tween.js问题,版本不对总是报错。网上下载的版本也搞错了一次。压缩版的好像有版本号,正常版的没有。
  2. SkinnedMesh由于习惯直接写成了Mesh,模型可以正常加载,但是 mesh.skeleton属性没有,所以没有动画,而且会报错。一直以为是加载顺序的问题。

mesh = new THREE.SkinnedMesh(geometry,material);

skinnedmesh.gif
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>骨骼蒙皮创建动画</title>
    <script type="text/javascript" src="../js/three.js"></script>
    <script type="text/javascript" src="../js/Detector.js"></script>
    <script type="text/javascript" src="Tween.js"></script>
    <script type="text/javascript" src="../js/controls/OrbitControls.js"></script>
    <style type="text/css">
        body{margin: 0;overflow: hidden}
    </style>
</head>
<body>
<div id="webgl-output"></div>
<script type="text/javascript">
    //if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var scene,camera,renderer,light,controls;
        var clock = new THREE.Clock();
        var mesh,tween,skeletonHelper;

        // 加载模型
        function iniLoad() {
            var loader = new THREE.JSONLoader();
            loader.load('models/hand-1.js',function (geometry) {
                var material = new THREE.MeshLambertMaterial({color:'#e3db5a',skinning:true});
                mesh = new THREE.SkinnedMesh(geometry,material);
                mesh.scale.set(5,5,5);
                skeletonHelper = new THREE.SkeletonHelper( mesh );
                skeletonHelper.visible = true;
                scene.add( skeletonHelper );
                mesh.position.y = 5;
                mesh.castShadow =true;
                scene.add(mesh);
                tween.start();
            });
        }

        function initween() {
            tween = new TWEEN.Tween({pos: -1});
            tween.to({pos: 0}, 3000);
            tween.easing(TWEEN.Easing.Cubic.InOut).yoyo(true).repeat(Infinity);
            tween.onUpdate(function () {
                var pos = this.pos;
                // 旋转手指
                mesh.skeleton.bones[5].rotation.set(0, 0, pos);
                mesh.skeleton.bones[6].rotation.set(0, 0, pos);
                mesh.skeleton.bones[10].rotation.set(0, 0, pos);
                mesh.skeleton.bones[11].rotation.set(0, 0, pos);
                mesh.skeleton.bones[15].rotation.set(0, 0, pos);
                mesh.skeleton.bones[16].rotation.set(0, 0, pos);
                mesh.skeleton.bones[20].rotation.set(0, 0, pos);
                mesh.skeleton.bones[21].rotation.set(0, 0, pos);
                // 旋转手腕
               // mesh.skeleton.bones[1].rotation.set(pos, 0, 0);
            });
        }

        //场景
        function iniScene() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
            renderer = new THREE.WebGLRenderer({antialias: true});
            camera.position.set(-10,20,20);
            camera.lookAt(scene.position);
            renderer.setClearColor(0x333333);
            renderer.shadowMap.enabled = true;

            renderer.setSize(window.innerWidth,window.innerHeight);
            scene.add(new THREE.AxesHelper(4));
            document.getElementById('webgl-output').appendChild(renderer.domElement);
        }
        //灯光
        function iniLight() {
            light = new THREE.AmbientLight(0x333333);
            scene.add(light);

            light = new THREE.SpotLight(0x888888);
            light.position.set(0,40,30);
            light.castShadow = true;
            light.shadow.mapSize.height = 4096;
            light.shadow.mapSize.width = 4096;
            scene.add(light);

            light = new THREE.HemisphereLight( 0xffffff,0x444444,0.6 );
            light.position.set( 0, 200, 0 );
            scene.add( light );
        }
        //地面 和 辅助网格
        function iniPlane() {
            var planeGeo = new THREE.PlaneGeometry(40,40);
            var planeMat = new THREE.MeshPhongMaterial( { color: 0x999999} );
            var plane = new THREE.Mesh(planeGeo,planeMat);
            plane.receiveShadow = true;
            plane.position.y = -0.01;
            plane.rotation.x = -0.5*Math.PI;
            scene.add(plane);

            var grid = new THREE.GridHelper( 40, 20, 0x000000, 0x000000 );
            grid.material.transparent = true;
            grid.material.opacity = 0.3;
            scene.add( grid );
        }
        //立方体
        function cubeDr(a,x,y,z) {
            var cubeGeo = new THREE.BoxGeometry(a,a,a);
            var cubeMat = new THREE.MeshPhongMaterial({
                color:0xfff000*Math.random()
            });
            var cube = new THREE.Mesh(cubeGeo,cubeMat);
            cube.position.set(x,y,z);
            cube.castShadow = true;
            scene.add(cube);
            return cube;
        }
        //相机轨道控制器
        function orbitControls() {
            controls = new THREE.OrbitControls(camera,renderer.domElement);
            //自转
            controls.autoRotate = true;
            controls.autoRotateSpeed = 0.02;
            //阻尼 阻尼系数
            controls.enableDamping = true;
            controls.dampingFactor = 0.4;
            //缩放
            controls.enableZoom = true;
            controls.minDistance = 5;
            controls.maxDistance = 100;
            //右键拖拽
            controls.enablePan = true;
        }
        //改变窗口大小
        function windowResize() {
            window.addEventListener( 'resize', onWindowResize, false );
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        }
        //渲染动画
        function render() {
            requestAnimationFrame(render);
            TWEEN.update();
            renderer.render(scene,camera);
            controls.update(clock.getDelta());
        }

        function drawScene() {
            iniScene();
            iniLight();
            orbitControls();
            windowResize();
            iniPlane();
            cubeDr(2,1,1,1);
            initween();
            iniLoad();
            render();
        }
        drawScene();


</script>
</body>
</html>

相关文章

  • 33three.js用骨骼蒙皮创建动画

    tween.js问题,版本不对总是报错。网上下载的版本也搞错了一次。压缩版的好像有版本号,正常版的没有。 Skin...

  • cocos2d源码分析(十三):Sprite3D之骨骼

    3D动画的骨骼与蒙皮原理,可参看《游戏引擎架构》11章中骨骼和蒙皮的相关章节。本文结合cocos2d源码分析骨骼与...

  • cocos2d源码分析(十四):Sprite3D之蒙皮

    3D动画的骨骼与蒙皮原理,可参看《游戏引擎架构》11章中骨骼和蒙皮的相关章节。本文结合cocos2d源码分析骨骼与...

  • GPU蒙皮动画

    GpuInstancingAnimation 使用GPU顶点动画替代蒙皮骨骼动画 效果 上万个模型同时播放动画,批...

  • Maya动画骨骼控制模型的点

    Bind Skin蒙皮 使骨骼控制模型(的点) 小技巧:在蒙皮阶段就完美地设置好手肘、膝盖的蒙皮权重。用绑定方法用...

  • 骨骼蒙皮

    不管模型是分开还是一个整体,骨骼蒙皮都不影响 先选中模型,再选择修改器的蒙皮:一个模型一个蒙皮修改器 在蒙皮修改器...

  • 反向动力学(Inverse kinematics) 学习笔记

    1 背景 1.1 骨骼动画 将动画分为两个部分:用于绘制外观的蒙皮,以及用于控制动作的骨架(摘自维基百科)。这些骨...

  • 2020-03-11关于blender2.82自带rigify骨

    基础流程 骨骼创建 生成rig骨骼 确保变形骨骼以外的骨骼都不参与形变 骨骼绑定 调试动作 烘培骨骼动画到骨骼的关...

  • Maya动画骨骼创建

    绑定 软件AdvancedSkeleton(高级骨架) CG小霸王上有汉化版 清除模型的构建历史后,导入骨骼模板文...

  • 数字人C4D角色动画研究之十六:网格变形器

    【前言】 问题:有一个用骨骼绑定好的低模,现在想把模型更改为高模,不用重新设置骨骼和蒙皮,能否实现?MAYA有这样...

网友评论

    本文标题:33three.js用骨骼蒙皮创建动画

    本文链接:https://www.haomeiwen.com/subject/dbpheftx.html