移动设备和桌面设备中的反转背景颜色

Question

所以我是threejs的新手，基本上才开始用threejs学习开发。我确实理解，由于移动浏览器的限制，桌面上不存在的一些特性可能会出现在移动设备上。然而，我运行遇到了一个我似乎无法 google 或无法找到它发生原因的问题。我创建了一个非常基本的场景，背景颜色为黑色“0x000000”，在这个场景中，我有一个球体，其线框为 material，其颜色设置为白色。在桌面上，这呈现完美，并完全显示为带有白色球体几何体的黑色背景场景。然而，一旦我测试部署在域上并通过移动设备访问它，场景和球体颜色就完全颠倒了。我仍然不确定是什么原因造成的，任何答案将不胜感激。提前致谢！

下面的代码是我创建 canvas 场景和球体的方式。

import "../css/style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";

// Debug
// const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.main-bg");

// Scene
const scene = new THREE.Scene();

scene.background = new THREE.Color(0x000000);

// Objects
const geometry = new THREE.SphereBufferGeometry(0.5, 15, 8);

// Materials
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  wireframe: true,
});

// Mesh
const sphere = new THREE.Mesh(geometry, material);

// Lights

// Point light
const pointLight = new THREE.PointLight(0x252525, 0.1);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 4;
scene.add(pointLight);

// Sizes
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 2;
scene.add(camera);

// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true

// Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const clock = new THREE.Clock();

const animate = () => 
  const elapsedTime = clock.getElapsedTime();

  // Update objects
  sphere.rotation.y = -0.2 * elapsedTime;
  sphere2.rotation.y = 0.1 * elapsedTime;
  sphere3.rotation.x = 0.7 * elapsedTime;
  sphere.rotation.x += 0.5 * (targetY - sphere.rotation.x);
  sphere.rotation.y += 0.5 * (targetX - sphere.rotation.y);
  sphere.position.z += -0.5 * (targetY - sphere.rotation.x);

  // Render
  renderer.render(scene, camera);

  // Call animate again on the next frame
  window.requestAnimationFrame(animate);
};

animate();

除此之外没有其他改变 scene.background 颜色。这就是它在桌面上的样子。 desktop image

这就是它在手机上的样子。mobile

没有其他设置 canvas 颜色但是颜色在移动设备上是反转的，非常感谢您的帮助！谢谢

Answer 1

您已将 CSS 规则 mix-blend-mode: exclusion 添加到您的 <canvas>。出于某种原因，Safari 是唯一遵守该规则的浏览器，这就是它在移动设备上显示反色的原因。

如果您想要黑色背景和白色线框，只需删除 CSS 中的任何 mix-blend-modes，这样您就可以获得您定义的颜色。

移动设备和桌面设备中的反转背景颜色

Inverted background color in mobile and desktop

javascript

css

three.js