让三个Js 2D游戏响应式

发布于 2025-01-14 14:26:27 字数 173 浏览 1 评论 0原文

社区您好，

我是三个 JS 的新手。我正在使用三个 JS 创建 2D 游戏，我面临一些使游戏响应的问题，而且当游戏大小减小时，某些功能无法正常工作就像对象上的触摸事件一样。我想知道我们可以将 css 应用到这三个 js 对象，以便我们可以创建响应式设计游戏。

请指导我。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深白境迁sunset 2025-01-21 14:26:27

从一开始就将相机和渲染器初始化为窗口大小，然后添加一个事件侦听器，该事件侦听器将更改与屏幕大小相关的对象的属性。通常是这样的：

// keep track of the window size in an object
const size = { width: window.innerWidth, height: window.innerHeight };

// initialize camera based on recorded sizes
const camera = new THREE.PerspectiveCamera(
  75,
  size.width / size.height,
  0.1,
  100
);
camera.position.set(...);
scene.add(camera);

// initialize renderer based on recorded sizes
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(size.width, size.height);
renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));


// adjust relevant properties on window size change
window.addEventListener('resize', () => {
  size.width = window.innerWidth;
  size.height = window.innerHeight;
  camera.aspect = size.width / size.height;
  camera.updateProjectionMatrix();
  renderer.setSize(size.width, size.height);
  renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
});

希望这是您正在寻找的答案。

Initialize your camera and renderer to the window size from the start and then add an event listener that will alter properties of objects that relate to the screen size. Usually something like this:

// keep track of the window size in an object
const size = { width: window.innerWidth, height: window.innerHeight };

// initialize camera based on recorded sizes
const camera = new THREE.PerspectiveCamera(
  75,
  size.width / size.height,
  0.1,
  100
);
camera.position.set(...);
scene.add(camera);

// initialize renderer based on recorded sizes
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(size.width, size.height);
renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));


// adjust relevant properties on window size change
window.addEventListener('resize', () => {
  size.width = window.innerWidth;
  size.height = window.innerHeight;
  camera.aspect = size.width / size.height;
  camera.updateProjectionMatrix();
  renderer.setSize(size.width, size.height);
  renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
});

Hopefully this is the answer you're looking for.

回复收藏 0 原文

~没有更多了~