three.js - 三.js 为拉伸形状上的BasicMeshMaterial 初始化颜色后，渲染到画布上的颜色不同

Question

我正在使用 THREE.Shape() 处理挤压形状。

当我第一次为 BasicMeshMaterial 初始化材质时，我将颜色设置为钢蓝色 #4682B4。我将其转换为等效的十六进制 0x4682B4。但是，在渲染时，Chrome 和 Firefox 上的颜色似乎不同。我在浏览器 (Chrome) 上使用了颜色选择器，发现渲染到画布上的颜色是 #86B6D6。

我希望能够设置颜色并让它保持真实。

为了解决这个问题，我尝试将使用十六进制颜色的形式更改为使用 RGB，（color: new THREE.Color( "rgb(70,130,180)")），但问题仍然存在。我还尝试了几种不同的颜色，0x07c2ff、0x008cba。他们都被转移到不同的颜色。最后，我尝试使用灯光，但基本材质不需要它们。

我正在使用 THREE.REVISION: "107"

以下是创建形状的方式：

var wallShape = new THREE.Shape();
        wallShape.moveTo(0, 0);
        wallShape.lineTo(300, 0);
        wallShape.lineTo(300, 10);
        wallShape.lineTo(0, 10);

        var wallExtrusionSettings = {
            depth: 8,
            bevelEnabled: false,
        };

geometry = new THREE.ExtrudeGeometry(wallShape, wallExtrusionSettings);

material = new THREE.MeshBasicMaterial({
            side: THREE.DoubleSide,
            color: 0x4682B4
        });

mesh = new THREE.Mesh(geometry, material )

形状在比例和位置方面正确渲染。唯一的问题是颜色。

我希望材质的颜色设置(color: 0x4682B4)与 HTML 画布上呈现的颜色相同。

在浏览器的画布上呈现的实际颜色是：#86B6D6。

谢谢您的考虑。

标签： three.js