Three.jsでBoneをあつかう

カテゴリーから探す

年別から見る

2016/07/06

Three.jsでBoneをあつかう

3Dでアニメーションを実装する場合に、
オブジェクトに骨組み（Bone）を予め設定しておいて、
その骨組みを動かすことで、オブジェクトをアニメーションさせる、
ボーンアニメーションという仕組みがあります。

Three.jsには、このボーンアニメーションの仕組も準備されています。

↓作ってみたもの(Three.js公式のDEMOを基にしています)
DEMO

方法

ボーンの設定は、おおよそ以下の様な流れで行います。

オブジェクトを設置する
ボーン(関節)を設置する
ボーンからスケルトン(ボーンを合わせたもの)を作成する
オブジェクトとスケルトンをbindする

記事の最後にコードの全文を載せています。こちらは、Three.jsの公式DEMOを基に、一部書き換えたものです。

ポイントは、以下の箇所です。


    function createBones ( sizing ) {

        bones = [];

        var prevBone = new THREE.Bone();
        bones.push( prevBone );
        prevBone.position.y = - sizing.halfHeight;

        for ( var i = 0; i < sizing.segmentCount; i ++ ) {

            var bone = new THREE.Bone();
            bone.position.y = sizing.segmentHeight;
            bones.push( bone );
            prevBone.add( bone );
            prevBone = bone;

        }

        return bones;

    };

function createBones ( sizing ) {

bones = [];

var prevBone = new THREE.Bone();

bones.push( prevBone );

prevBone.position.y = - sizing.halfHeight;

for ( var i = 0; i < sizing.segmentCount; i ++ ) {

var bone = new THREE.Bone();

bone.position.y = sizing.segmentHeight;

bones.push( bone );

prevBone.add( bone );

prevBone = bone;

}

return bones;

};


        //オブジェクトをシーンに追加
        var mesh = new THREE.SkinnedMesh( geometry,	material );
        //スケルトンをシーンに追加
        var skeleton = new THREE.Skeleton( bones );

        //ボーンの１つ目をシーンに追加
        mesh.add( bones[ 0 ] );
        //オブジェクトにスケルトンをbind
        mesh.bind( skeleton );

        //ボーンを可視化
        skeletonHelper = new THREE.SkeletonHelper( mesh );
        skeletonHelper.material.linewidth = 2;
        scene.add( skeletonHelper );

//オブジェクトをシーンに追加

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

//スケルトンをシーンに追加

var skeleton = new THREE.Skeleton( bones );

//ボーンの１つ目をシーンに追加

mesh.add( bones[ 0 ] );

//オブジェクトにスケルトンをbind

mesh.bind( skeleton );

//ボーンを可視化

skeletonHelper = new THREE.SkeletonHelper( mesh );

skeletonHelper.material.linewidth = 2;

scene.add( skeletonHelper );

THREE.Bone()で骨格の一部を作成し、
それを基にスケルトン(ボーン全体)を作成します。

更にそれを.bind()によって、オブジェクトに設置します。

あとは、


mesh.skeleton.bones[n].rotation.z = 1

1	mesh.skeleton.bones[n].rotation.z = 1

と言った形式で、ボーンを変形・移動させることで、オブジェクトを変形・移動させることができるようになります。


"use strict";

(function () {

    var gui, scene, camera, renderer, orbit, ambientLight, lights, mesh, bones, skeletonHelper;

    var state = {

        animateBones : false

    };

    function initScene () {

        var wrapperElm = document.getElementById("canvas-frame");
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 80, wrapperElm.clientWidth / wrapperElm.clientHeight, 0.1, 200 );
        camera.position.z = 50;
        camera.position.y = 10;

        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( wrapperElm.clientWidth, wrapperElm.clientHeight );
        wrapperElm.appendChild( renderer.domElement );

        //環境光の設置
        ambientLight = new THREE.AmbientLight( 0x000000 );
        scene.add( ambientLight );

        //点光源の設置
        lights = [];
        lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 0 ].position.set( 0, 200, 0 );
        lights[ 1 ].position.set( 100, 200, 100 );
        lights[ 2 ].position.set( - 100, - 200, - 100 );
        scene.add( lights[ 0 ] );
        scene.add( lights[ 1 ] );
        scene.add( lights[ 2 ] );

        //windowのリサイズに対応
        window.addEventListener( 'resize', function () {

            camera.aspect = wrapperElm.clientWidth / wrapperElm.clientHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( wrapperElm.clientWidth,  wrapperElm.clientHeight );

        }, false );

        //要素をクリックしたときに、アニメーションの設定をToggle
        wrapperElm.addEventListener( 'click', function() {
            if(state.animateBones)
                state.animateBones = false;
            else {
                state.animateBones = true;
            }
        } );

        initBones();

    }

    function createGeometry ( sizing ) {

        var geometry = new THREE.CylinderGeometry(
            5,                       // radiusTop
            5,                       // radiusBottom
            sizing.height,           // height
            8,                       // radiusSegments
            sizing.segmentCount * 3, // heightSegments
            true                     // openEnded
        );

        for ( var i = 0; i < geometry.vertices.length; i ++ ) {

            var vertex = geometry.vertices[ i ];
            var y = ( vertex.y + sizing.halfHeight );

            var skinIndex = Math.floor( y / sizing.segmentHeight );
            var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;

            geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
            geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );

        }

        return geometry;

    };

    function createBones ( sizing ) {

        bones = [];

        var prevBone = new THREE.Bone();
        bones.push( prevBone );
        prevBone.position.y = - sizing.halfHeight;

        for ( var i = 0; i < sizing.segmentCount; i ++ ) {

            var bone = new THREE.Bone();
            bone.position.y = sizing.segmentHeight;
            bones.push( bone );
            prevBone.add( bone );
            prevBone = bone;

        }

        return bones;

    };

    function createMesh ( geometry, bones ) {

        var material = new THREE.MeshPhongMaterial( {
            skinning : true,
            color: 0x156289,
            emissive: 0x072534,
            side: THREE.DoubleSide,
            shading: THREE.FlatShading
        } );

        var mesh = new THREE.SkinnedMesh( geometry,	material );
        var skeleton = new THREE.Skeleton( bones );

        mesh.add( bones[ 0 ] );

        mesh.bind( skeleton );

        //ボーンを可視化
        skeletonHelper = new THREE.SkeletonHelper( mesh );
        skeletonHelper.material.linewidth = 2;
        scene.add( skeletonHelper );

        return mesh;

    };

    function initBones () {

        var segmentHeight = 8;
        var segmentCount = 4;
        var height = segmentHeight * segmentCount;
        var halfHeight = height * 0.5;

        var sizing = {
            segmentHeight : segmentHeight,
            segmentCount : segmentCount,
            height : height,
            halfHeight : halfHeight
        };

        var geometry = createGeometry( sizing );
        var bones = createBones( sizing );
        mesh = createMesh( geometry, bones );

        mesh.scale.multiplyScalar( 1.25 );
        scene.add( mesh );

    };

    function render () {

        requestAnimationFrame( render );

        var time = Date.now() * 0.001;

        var bone = mesh;


        //Wiggle the bones
        if ( state.animateBones ) {

            for ( var i = 0; i < mesh.skeleton.bones.length; i ++ ) {

                mesh.skeleton.bones[ i ].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;

            }

        }

        skeletonHelper.update();

        renderer.render( scene, camera );

    };

    initScene();
    mesh.skeleton.bones[2].rotation.z = 1; //boneの3つ目を回転させておく
    render();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

"use strict";

(function () {

var gui, scene, camera, renderer, orbit, ambientLight, lights, mesh, bones, skeletonHelper;

var state = {

animateBones : false

};

function initScene () {

var wrapperElm = document.getElementById("canvas-frame");

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 80, wrapperElm.clientWidth / wrapperElm.clientHeight, 0.1, 200 );

camera.position.z = 50;

camera.position.y = 10;

renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( wrapperElm.clientWidth, wrapperElm.clientHeight );

wrapperElm.appendChild( renderer.domElement );

//環境光の設置

ambientLight = new THREE.AmbientLight( 0x000000 );

scene.add( ambientLight );

//点光源の設置

lights = [];

lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );

lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );

lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

lights[ 0 ].position.set( 0, 200, 0 );

lights[ 1 ].position.set( 100, 200, 100 );

lights[ 2 ].position.set( - 100, - 200, - 100 );

scene.add( lights[ 0 ] );

scene.add( lights[ 1 ] );

scene.add( lights[ 2 ] );

//windowのリサイズに対応

window.addEventListener( 'resize', function () {

camera.aspect = wrapperElm.clientWidth / wrapperElm.clientHeight;

camera.updateProjectionMatrix();

renderer.setSize( wrapperElm.clientWidth, wrapperElm.clientHeight );

}, false );

//要素をクリックしたときに、アニメーションの設定をToggle

wrapperElm.addEventListener( 'click', function() {

if(state.animateBones)

state.animateBones = false;

else {

state.animateBones = true;

}

} );

initBones();

}

function createGeometry ( sizing ) {

var geometry = new THREE.CylinderGeometry(

5, // radiusTop

5, // radiusBottom

sizing.height, // height

8, // radiusSegments

sizing.segmentCount * 3, // heightSegments

true // openEnded

);

for ( var i = 0; i < geometry.vertices.length; i ++ ) {

var vertex = geometry.vertices[ i ];

var y = ( vertex.y + sizing.halfHeight );

var skinIndex = Math.floor( y / sizing.segmentHeight );

var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;

geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );

geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );

}

return geometry;

};

function createBones ( sizing ) {

bones = [];

var prevBone = new THREE.Bone();

bones.push( prevBone );

prevBone.position.y = - sizing.halfHeight;

for ( var i = 0; i < sizing.segmentCount; i ++ ) {

var bone = new THREE.Bone();

bone.position.y = sizing.segmentHeight;

bones.push( bone );

prevBone.add( bone );

prevBone = bone;

}

return bones;

};

function createMesh ( geometry, bones ) {

var material = new THREE.MeshPhongMaterial( {

skinning : true,

color: 0x156289,

emissive: 0x072534,

side: THREE.DoubleSide,

shading: THREE.FlatShading

} );

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

var skeleton = new THREE.Skeleton( bones );

mesh.add( bones[ 0 ] );

mesh.bind( skeleton );

//ボーンを可視化

skeletonHelper = new THREE.SkeletonHelper( mesh );

skeletonHelper.material.linewidth = 2;

scene.add( skeletonHelper );

return mesh;

};

function initBones () {

var segmentHeight = 8;

var segmentCount = 4;

var height = segmentHeight * segmentCount;

var halfHeight = height * 0.5;

var sizing = {

segmentHeight : segmentHeight,

segmentCount : segmentCount,

height : height,

halfHeight : halfHeight

};

var geometry = createGeometry( sizing );

var bones = createBones( sizing );

mesh = createMesh( geometry, bones );

mesh.scale.multiplyScalar( 1.25 );

scene.add( mesh );

};

function render () {

requestAnimationFrame( render );

var time = Date.now() * 0.001;

var bone = mesh;

//Wiggle the bones

if ( state.animateBones ) {

for ( var i = 0; i < mesh.skeleton.bones.length; i ++ ) {

mesh.skeleton.bones[ i ].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;

}

skeletonHelper.update();

renderer.render( scene, camera );

};

initScene();

mesh.skeleton.bones[2].rotation.z = 1; //boneの3つ目を回転させておく

render();

Author Profile

NINOMIYA

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

2024/12/06

UXに大事なアフォーダンス(Affordances)・シグニファイア(Signifires)・フィードバック(Feedback) とそれぞれの改善について

2024/11/20

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

2024/10/25

Gulpを使ったプロジェクトの基本設定とSass導入手順

2024/10/11

Difyを用いたチャットボットを作成してみた

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

Three.jsでBoneをあつかう

方法

合わせて読みたい

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/12/06

2024/11/20

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/12/06

2024/11/20

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02