-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
121 lines (97 loc) · 3.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<!-- (c) 2019 pixiv Inc. - https://github.com/pixiv/three-vrm/blob/master/LICENSE -->
<html>
<head>
<meta charset="utf-8" />
<title>three-vrm example</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="./three-vrm.min.js"></script>
<script>
// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
// camera
const camera = new THREE.PerspectiveCamera( 30.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 1.0, 5.0 );
// camera controls
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;
controls.target.set( 0.0, 1.0, 0.0 );
controls.update();
// scene
const scene = new THREE.Scene();
// light
const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1.0, 1.0, 1.0 ).normalize();
scene.add( light );
// gltf and vrm
const loader = new THREE.GLTFLoader();
loader.crossOrigin = 'anonymous';
loader.load(
// URL of the VRM you want to load
'./models/masawada.vrm',
// called when the resource is loaded
( gltf ) => {
// generate VRM instance from gltf
THREE.VRM.from( gltf ).then( ( vrm ) => {
vrm.humanoid.setPose({
[ THREE.VRMSchema.HumanoidBoneName.LeftShoulder ]: {
rotation: new THREE.Quaternion().setFromEuler( new THREE.Euler( 0.0, 0.0, 0.3 ) ).toArray()
},
[ THREE.VRMSchema.HumanoidBoneName.RightShoulder ]: {
rotation: new THREE.Quaternion().setFromEuler( new THREE.Euler( 0.0, 0.0, -0.3 ) ).toArray()
},
[ THREE.VRMSchema.HumanoidBoneName.LeftUpperArm ]: {
rotation: new THREE.Quaternion().setFromEuler( new THREE.Euler( 0.0, 0.0, 1.1 ) ).toArray()
},
[ THREE.VRMSchema.HumanoidBoneName.RightUpperArm ]: {
rotation: new THREE.Quaternion().setFromEuler( new THREE.Euler( 0.0, 0.0, -1.1 ) ).toArray()
},
[ THREE.VRMSchema.HumanoidBoneName.LeftLowerArm ]: {
rotation: new THREE.Quaternion().setFromEuler( new THREE.Euler( 0.0, 0.0, 0.1 ) ).toArray()
},
[ THREE.VRMSchema.HumanoidBoneName.RightLowerArm ]: {
rotation: new THREE.Quaternion().setFromEuler( new THREE.Euler( 0.0, 0.0, -0.1 ) ).toArray()
},
} );
console.log( vrm );
scene.add( vrm.scene );
vrm.humanoid.getBoneNode( THREE.VRMSchema.HumanoidBoneName.Hips ).rotation.y = Math.PI;
} );
},
// called while loading is progressing
( progress ) => console.log( 'Loading model...', 100.0 * ( progress.loaded / progress.total ), '%' ),
// called when loading has errors
( error ) => console.error( error )
);
// helpers
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>