Question

我终于可以建立自己的小游戏创意了。尽管看起来有些奇怪，但游戏的美感要求清晰，像素化的外观。

到目前为止，我已经尝试在渲染器上使用内置的setPixelRatio（）和setSize（）。不幸的是，放大的图像显得模糊。

在我的index.js

import * as THREE from 'three'

import '@/misc/console'
import Game from '@/game'

const g = new Game()

let geom = new THREE.BoxGeometry(1, 1, 1)
let mat = new THREE.MeshBasicMaterial({ color: 0xffffff })
let cube = new THREE.Mesh(geom, mat)
g.scene.add(cube)
g.camera.position.z = 5

const animate = () => {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.02
  g.renderer.render(g.scene, g.camera)
}
animate()

在我的game/index.js

import { Scene, PerspectiveCamera, WebGLRenderer } from 'three'

export default class Game {
  static VIEW_RATIO_X = 16
  static VIEW_RATIO_Y = 9

  scene
  camera
  renderer

  constructor () {
    // Create a new base scene
    this.scene = new Scene()

    // Create the frame and set the size accordingly
    this.camera = new PerspectiveCamera(90, Game.VIEW_RATIO_X / Game.VIEW_RATIO_Y, 0.1, 1000)

    // Create a new renderer and calculate the proper size to make it
    this.renderer = new WebGLRenderer({ antialias: false })
    this.renderer.setPixelRatio(0.5)
    this.renderer.setSize(window.innerHeight / Game.VIEW_RATIO_Y * Game.VIEW_RATIO_X, window.innerHeight)
    document.body.appendChild(this.renderer.domElement)
  }
}

将分辨率减半的基本尝试只是使其变得模糊。是否可以使用three.js，WebGL或canvas设置在像素上强制使用清晰线条？

有没有办法在不变得模糊的情况下放大Three.js渲染器？

0 个答案: