Poor background image quality

sourrain · September 8, 2021, 8:38am

How to improve the image quality?

gist.github.com

https://gist.github.com/sourrain/6adf14ca3cb853aa31f8951f997707af

three.vue

<template>
  <div>
    <canvas id="three" class="h-screen w-screen bg-white"></canvas>
  </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

This file has been truncated. show original

Qiumeng12 · September 8, 2021, 8:53am

You can change the encoding properties of the texture

Mugen87 · September 8, 2021, 8:57am

@Qiumeng12 Why should this impove the image quality?

Mugen87 · September 8, 2021, 8:58am

@sourrain I’ve copied your code into a live example so it’s easier to see what’s going on: https://jsfiddle.net/7op5qua3/

The example looks actually as expected. You might want to try a cube map with a higher resolution.

Qiumeng12 · September 8, 2021, 9:03am

Just change the encoding of the texture ,Cannot improve image quality

sourrain · September 8, 2021, 2:55pm

Cuz when I run this on my localhost the quality of image is really bad.

sourrain · September 8, 2021, 2:56pm

Oh wow it looks totally fine on there.

Topic		Replies	Views
Bad quality texture in my 360° project Questions textures , materials	4	704	June 27, 2022
Keep background image quality Questions background	2	1769	May 21, 2022
360 panorama image quality problem in three Questions textures , materials , panorama	6	2227	June 10, 2022
Problems with images qualities, borders, performances Questions textures , materials , geometry	2	373	May 26, 2022
How to Improve Scene Background's Texture Resolution from Image Questions background	2	2981	February 15, 2022

Poor background image quality

Related topics