static/hat.glb

Reviewed

This is a binary file and will not be displayed.

+82 -5

src/lib/Creature.svelte

Reviewed

··· 29 29 let faceTexture: THREE.CanvasTexture; 30 30 let furTexture: THREE.CanvasTexture; 31 31 32 32 - const { canvas } = useThrelte(); 32 32 + const { canvas, scene } = useThrelte(); 33 33 34 34 let { 35 35 scale = [1, 1, 1], ··· 142 142 velocity: 0.4 143 143 }); 144 144 wiggleBones.push(wiggleBone); 145 145 + 146 146 + mesh.add(wiggleBone.targetHelper); 145 147 } 146 148 }); 147 149 } ··· 179 181 180 182 creature = obj; 181 183 182 182 - mesh.material = new THREE.MeshStandardMaterial({ map: faceTexture }); 184 184 + mesh.material = new THREE.MeshStandardMaterial({ map: faceTexture, wireframe: false }); 183 185 184 186 let fur = createFur(mesh); 185 187 obj.add(...fur); 186 188 187 189 createWiggleBones(mesh); 188 190 }); 191 191 + 192 192 + loader.load('/tiny-creature/hat.glb', async ({ scene: obj }) => { 193 193 + obj.scale.set(0.25, 0.25, 0.25); 194 194 + helper = obj; 195 195 + helper.children[0].rotation.z = 0.1; 196 196 + console.log(helper); 197 197 + }); 189 198 }); 190 199 191 200 let total = 0; 192 201 let ySpeed = 0; 202 202 + 203 203 + let x = $state(0); 204 204 + let y = $state(0); 205 205 + let z = $state(0); 206 206 + let hasTargetStuff = false; 207 207 + 208 208 + let helper = $state<THREE.Mesh | null>(null); 193 209 194 210 useTask((dt) => { 195 211 total += dt; ··· 197 213 wiggleBone.update(); 198 214 }); 199 215 216 216 + // find most upper bone 217 217 + let upperBone = wiggleBones[0]; 218 218 + wiggleBones.forEach((wiggleBone) => { 219 219 + if (wiggleBone.targetHelper.position.y > upperBone.targetHelper.position.y) { 220 220 + upperBone = wiggleBone; 221 221 + } 222 222 + }); 223 223 + // find second upper bone 224 224 + let secondUpperBone = wiggleBones[0]; 225 225 + wiggleBones.forEach((wiggleBone) => { 226 226 + if ( 227 227 + wiggleBone.targetHelper.position.y > secondUpperBone.targetHelper.position.y && 228 228 + wiggleBone !== upperBone 229 229 + ) { 230 230 + secondUpperBone = wiggleBone; 231 231 + } 232 232 + }); 233 233 + 234 234 + // if (!helper && creature) { 235 235 + // helper = new THREE.Mesh(new THREE.BoxGeometry(0.2, 5, 0.2), new THREE.MeshBasicMaterial()); 236 236 + // helper.position.y = 2.5; 237 237 + // creature?.add(helper); 238 238 + 239 239 + // console.log(helper); 240 240 + // } 241 241 + 242 242 + if (upperBone && helper) { 243 243 + if (!helper.parent) { 244 244 + creature?.add(helper); 245 245 + } 246 246 + 247 247 + // find connecting bone 248 248 + let connectingBone = upperBone.bone?.parent; 249 249 + let connectingWiggleBone: WiggleBone | null = null; 250 250 + wiggleBones.forEach((wiggleBone) => { 251 251 + if (wiggleBone.bone === connectingBone) { 252 252 + connectingWiggleBone = wiggleBone; 253 253 + } 254 254 + }); 255 255 + 256 256 + helper.position.x = upperBone.targetHelper.position.x; 257 257 + helper.position.y = upperBone.targetHelper.position.y + 0.1; 258 258 + helper.position.z = upperBone.targetHelper.position.z; 259 259 + 260 260 + if (connectingWiggleBone) { 261 261 + // get up vector (connecting bone - upper bone) 262 262 + const newUp = upperBone.targetHelper.position 263 263 + .clone() 264 264 + .sub(secondUpperBone.targetHelper.position); 265 265 + 266 266 + const oldUp = new THREE.Vector3(0, 1, 0).applyQuaternion(helper.quaternion); 267 267 + const rotationAxis = new THREE.Vector3().crossVectors(oldUp, newUp).normalize(); 268 268 + 269 269 + const angle = oldUp.angleTo(newUp); 270 270 + 271 271 + const rotationQuat = new THREE.Quaternion().setFromAxisAngle(rotationAxis, angle); 272 272 + 273 273 + helper.quaternion.premultiply(rotationQuat); 274 274 + } 275 275 + } 276 276 + 200 277 if (rootBone) { 201 201 - rootBone.position.x = (Math.sin(total * 2) * 0.5 + position[0]); 278 278 + rootBone.position.x = Math.sin(total * 2) * 0.5 + position[0]; 202 279 203 280 rootBone.position.y += ySpeed * dt; 204 281 rootBone.position.y = Math.max(rootBone.position.y, -1) + position[1]; ··· 260 337 }); 261 338 262 339 face.leftEye.options.setMultiple({ 263 263 - ...options.leftEye, 340 340 + ...options.leftEye 264 341 }); 265 342 266 343 face.rightEye.options.setMultiple({ 267 267 - ...options.rightEye, 344 344 + ...options.rightEye 268 345 }); 269 346 270 347 face.updateBackground(options.colors.primary);