npx skills add https://github.com/natea/fitfinder --skill threejs-game提供使用 WebGL 进行 Three.js 游戏开发的全面协助,涵盖 3D 渲染、游戏机制、物理、动画和交互式浏览器游戏。
在以下情况下激活此技能:
import * as THREE from 'three';
// 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 游戏循环
function animate(time) {
requestAnimationFrame(animate);
// 在此处更新游戏逻辑
updatePlayer(time);
updateEnemies(time);
checkCollisions();
renderer.render(scene, camera);
}
animate();
class PlayerController {
constructor(camera, target) {
this.camera = camera;
this.target = target;
this.distance = 10;
this.height = 5;
this.rotationSpeed = 0.005;
this.moveSpeed = 0.1;
}
update(input) {
// 移动
const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(this.target.quaternion);
const right = new THREE.Vector3(1, 0, 0).applyQuaternion(this.target.quaternion);
if (input.forward) this.target.position.add(forward.multiplyScalar(this.moveSpeed));
if (input.backward) this.target.position.add(forward.multiplyScalar(-this.moveSpeed));
if (input.left) this.target.position.add(right.multiplyScalar(-this.moveSpeed));
if (input.right) this.target.position.add(right.multiplyScalar(this.moveSpeed));
// 旋转
if (input.rotateLeft) this.target.rotation.y += this.rotationSpeed;
if (input.rotateRight) this.target.rotation.y -= this.rotationSpeed;
// 更新相机位置
const offset = new THREE.Vector3(0, this.height, this.distance);
offset.applyQuaternion(this.target.quaternion);
this.camera.position.copy(this.target.position).add(offset);
this.camera.lookAt(this.target.position);
}
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
class InputManager {
constructor() {
this.keys = {};
this.mouse = { x: 0, y: 0, buttons: {} };
window.addEventListener('keydown', (e) => this.keys[e.code] = true);
window.addEventListener('keyup', (e) => this.keys[e.code] = false);
window.addEventListener('mousemove', (e) => {
this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
});
}
getInput() {
return {
forward: this.keys['KeyW'] || this.keys['ArrowUp'],
backward: this.keys['KeyS'] || this.keys['ArrowDown'],
left: this.keys['KeyA'] || this.keys['ArrowLeft'],
right: this.keys['KeyD'] || this.keys['ArrowRight'],
jump: this.keys['Space'],
action: this.keys['KeyE'],
rotateLeft: this.keys['KeyQ'],
rotateRight: this.keys['KeyE']
};
}
}
function checkCollisions(player, obstacles) {
const raycaster = new THREE.Raycaster();
const directions = [
new THREE.Vector3(1, 0, 0), // 右
new THREE.Vector3(-1, 0, 0), // 左
new THREE.Vector3(0, 0, 1), // 前
new THREE.Vector3(0, 0, -1), // 后
];
for (const direction of directions) {
raycaster.set(player.position, direction);
const intersects = raycaster.intersectObjects(obstacles);
if (intersects.length > 0 && intersects[0].distance < 1.0) {
return {
collision: true,
object: intersects[0].object,
distance: intersects[0].distance,
point: intersects[0].point
};
}
}
return { collision: false };
}
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
function loadCharacter(path) {
return new Promise((resolve, reject) => {
loader.load(
path,
(gltf) => {
const model = gltf.scene;
model.scale.set(1, 1, 1);
scene.add(model);
// 如果可用,设置动画
const mixer = new THREE.AnimationMixer(model);
const animations = {};
gltf.animations.forEach(clip => {
animations[clip.name] = mixer.clipAction(clip);
});
resolve({ model, mixer, animations });
},
(progress) => {
console.log(`加载中: ${(progress.loaded / progress.total * 100).toFixed(2)}%`);
},
(error) => reject(error)
);
});
}
// 用法
const character = await loadCharacter('/models/character.glb');
character.animations.idle.play();
class PhysicsBody {
constructor(mesh) {
this.mesh = mesh;
this.velocity = new THREE.Vector3();
this.onGround = false;
this.gravity = -9.8;
this.jumpPower = 5;
}
update(deltaTime) {
// 应用重力
if (!this.onGround) {
this.velocity.y += this.gravity * deltaTime;
}
// 应用速度
this.mesh.position.add(this.velocity.clone().multiplyScalar(deltaTime));
// 地面检测
if (this.mesh.position.y <= 0) {
this.mesh.position.y = 0;
this.velocity.y = 0;
this.onGround = true;
}
}
jump() {
if (this.onGround) {
this.velocity.y = this.jumpPower;
this.onGround = false;
}
}
}
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(interactableObjects);
if (intersects.length > 0) {
const object = intersects[0].object;
object.userData.onInteract?.();
}
}
window.addEventListener('click', onMouseClick);
class Entity {
constructor(mesh, maxHealth) {
this.mesh = mesh;
this.maxHealth = maxHealth;
this.health = maxHealth;
this.isDead = false;
}
takeDamage(amount) {
if (this.isDead) return;
this.health = Math.max(0, this.health - amount);
if (this.health === 0) {
this.die();
}
return this.health;
}
heal(amount) {
this.health = Math.min(this.maxHealth, this.health + amount);
return this.health;
}
die() {
this.isDead = true;
this.mesh.visible = false;
// 触发死亡动画、效果等
}
}
requestAnimationFrame 实现 60fpsclass GameStateMachine {
constructor() {
this.states = {
menu: new MenuState(),
playing: new PlayingState(),
paused: new PausedState(),
gameOver: new GameOverState()
};
this.currentState = this.states.menu;
}
changeState(stateName) {
this.currentState.exit();
this.currentState = this.states[stateName];
this.currentState.enter();
}
update(deltaTime) {
this.currentState.update(deltaTime);
}
}
class ObjectPool {
constructor(factory, initialSize = 10) {
this.factory = factory;
this.available = [];
this.inUse = [];
for (let i = 0; i < initialSize; i++) {
this.available.push(factory());
}
}
acquire() {
let obj = this.available.pop();
if (!obj) obj = this.factory();
this.inUse.push(obj);
return obj;
}
release(obj) {
const index = this.inUse.indexOf(obj);
if (index > -1) {
this.inUse.splice(index, 1);
this.available.push(obj);
}
}
}
// 用法
const bulletPool = new ObjectPool(() => createBullet(), 20);
const bullet = bulletPool.acquire();
// ... 使用子弹
bulletPool.release(bullet);
按主题组织的详细文档:
每周安装量
240
仓库
GitHub 星标数
3
首次出现
2026 年 1 月 22 日
安全审计
安装于
opencode227
codex214
gemini-cli210
github-copilot201
cursor171
amp162
Comprehensive assistance with Three.js game development using WebGL, covering 3D rendering, game mechanics, physics, animations, and interactive browser-based games.
Activate this skill when:
import * as THREE from 'three';
// Create scene, camera, renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Game loop
function animate(time) {
requestAnimationFrame(animate);
// Update game logic here
updatePlayer(time);
updateEnemies(time);
checkCollisions();
renderer.render(scene, camera);
}
animate();
class PlayerController {
constructor(camera, target) {
this.camera = camera;
this.target = target;
this.distance = 10;
this.height = 5;
this.rotationSpeed = 0.005;
this.moveSpeed = 0.1;
}
update(input) {
// Movement
const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(this.target.quaternion);
const right = new THREE.Vector3(1, 0, 0).applyQuaternion(this.target.quaternion);
if (input.forward) this.target.position.add(forward.multiplyScalar(this.moveSpeed));
if (input.backward) this.target.position.add(forward.multiplyScalar(-this.moveSpeed));
if (input.left) this.target.position.add(right.multiplyScalar(-this.moveSpeed));
if (input.right) this.target.position.add(right.multiplyScalar(this.moveSpeed));
// Rotation
if (input.rotateLeft) this.target.rotation.y += this.rotationSpeed;
if (input.rotateRight) this.target.rotation.y -= this.rotationSpeed;
// Update camera position
const offset = new THREE.Vector3(0, this.height, this.distance);
offset.applyQuaternion(this.target.quaternion);
this.camera.position.copy(this.target.position).add(offset);
this.camera.lookAt(this.target.position);
}
}
class InputManager {
constructor() {
this.keys = {};
this.mouse = { x: 0, y: 0, buttons: {} };
window.addEventListener('keydown', (e) => this.keys[e.code] = true);
window.addEventListener('keyup', (e) => this.keys[e.code] = false);
window.addEventListener('mousemove', (e) => {
this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
});
}
getInput() {
return {
forward: this.keys['KeyW'] || this.keys['ArrowUp'],
backward: this.keys['KeyS'] || this.keys['ArrowDown'],
left: this.keys['KeyA'] || this.keys['ArrowLeft'],
right: this.keys['KeyD'] || this.keys['ArrowRight'],
jump: this.keys['Space'],
action: this.keys['KeyE'],
rotateLeft: this.keys['KeyQ'],
rotateRight: this.keys['KeyE']
};
}
}
function checkCollisions(player, obstacles) {
const raycaster = new THREE.Raycaster();
const directions = [
new THREE.Vector3(1, 0, 0), // right
new THREE.Vector3(-1, 0, 0), // left
new THREE.Vector3(0, 0, 1), // forward
new THREE.Vector3(0, 0, -1), // backward
];
for (const direction of directions) {
raycaster.set(player.position, direction);
const intersects = raycaster.intersectObjects(obstacles);
if (intersects.length > 0 && intersects[0].distance < 1.0) {
return {
collision: true,
object: intersects[0].object,
distance: intersects[0].distance,
point: intersects[0].point
};
}
}
return { collision: false };
}
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
function loadCharacter(path) {
return new Promise((resolve, reject) => {
loader.load(
path,
(gltf) => {
const model = gltf.scene;
model.scale.set(1, 1, 1);
scene.add(model);
// Setup animations if available
const mixer = new THREE.AnimationMixer(model);
const animations = {};
gltf.animations.forEach(clip => {
animations[clip.name] = mixer.clipAction(clip);
});
resolve({ model, mixer, animations });
},
(progress) => {
console.log(`Loading: ${(progress.loaded / progress.total * 100).toFixed(2)}%`);
},
(error) => reject(error)
);
});
}
// Usage
const character = await loadCharacter('/models/character.glb');
character.animations.idle.play();
class PhysicsBody {
constructor(mesh) {
this.mesh = mesh;
this.velocity = new THREE.Vector3();
this.onGround = false;
this.gravity = -9.8;
this.jumpPower = 5;
}
update(deltaTime) {
// Apply gravity
if (!this.onGround) {
this.velocity.y += this.gravity * deltaTime;
}
// Apply velocity
this.mesh.position.add(this.velocity.clone().multiplyScalar(deltaTime));
// Ground check
if (this.mesh.position.y <= 0) {
this.mesh.position.y = 0;
this.velocity.y = 0;
this.onGround = true;
}
}
jump() {
if (this.onGround) {
this.velocity.y = this.jumpPower;
this.onGround = false;
}
}
}
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(interactableObjects);
if (intersects.length > 0) {
const object = intersects[0].object;
object.userData.onInteract?.();
}
}
window.addEventListener('click', onMouseClick);
class Entity {
constructor(mesh, maxHealth) {
this.mesh = mesh;
this.maxHealth = maxHealth;
this.health = maxHealth;
this.isDead = false;
}
takeDamage(amount) {
if (this.isDead) return;
this.health = Math.max(0, this.health - amount);
if (this.health === 0) {
this.die();
}
return this.health;
}
heal(amount) {
this.health = Math.min(this.maxHealth, this.health + amount);
return this.health;
}
die() {
this.isDead = true;
this.mesh.visible = false;
// Trigger death animation, effects, etc.
}
}
requestAnimationFrame for 60fpsclass GameStateMachine {
constructor() {
this.states = {
menu: new MenuState(),
playing: new PlayingState(),
paused: new PausedState(),
gameOver: new GameOverState()
};
this.currentState = this.states.menu;
}
changeState(stateName) {
this.currentState.exit();
this.currentState = this.states[stateName];
this.currentState.enter();
}
update(deltaTime) {
this.currentState.update(deltaTime);
}
}
class ObjectPool {
constructor(factory, initialSize = 10) {
this.factory = factory;
this.available = [];
this.inUse = [];
for (let i = 0; i < initialSize; i++) {
this.available.push(factory());
}
}
acquire() {
let obj = this.available.pop();
if (!obj) obj = this.factory();
this.inUse.push(obj);
return obj;
}
release(obj) {
const index = this.inUse.indexOf(obj);
if (index > -1) {
this.inUse.splice(index, 1);
this.available.push(obj);
}
}
}
// Usage
const bulletPool = new ObjectPool(() => createBullet(), 20);
const bullet = bulletPool.acquire();
// ... use bullet
bulletPool.release(bullet);
Detailed documentation organized by topic:
Weekly Installs
240
Repository
GitHub Stars
3
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
opencode227
codex214
gemini-cli210
github-copilot201
cursor171
amp162
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
3,400 周安装