代码之家 › 专栏 › 技术社区 › godblessstrawberry

three.js sethsl()设置意外的颜色

three.js

godblessstrawberry · 技术社区 · 6 年前

SESSL(H,S,L) -在提供的HSL值上设置此颜色的值。值的范围为0到1。

为什么我尝试时会变成青色 material.color.setHSL( 0.5, 1, 0.5 ) ?我希望用黄色代替颜色选择器显示的颜色。

let camera, scene, renderer, material;

init();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    const geometry = new THREE.PlaneGeometry();
    material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
		material.color.setHSL( 0.5, 1, 0.5 );
    
    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    renderer.render( scene, camera );
}

body {
	  margin: 0;
}

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

1 回复 | 直到 6 年前

prisoner849 6 年前

颜色选取器从0到360。 sethsl从0变为1。

如果您想要360中的色调50,则设置50/360,即0.1388888888888889。

sethsl(0.1388888888888889,1,0.5)为黄色。

let camera, scene, renderer, material;

init();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    const geometry = new THREE.PlaneGeometry();
    material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
		material.color.setHSL( 0.1388888888888889, 1, 0.5 );
    
    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    renderer.render( scene, camera );
}

body {
	  margin: 0;
}

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

推荐文章

Adam Turaj · 反应三纤维场景背景比原始图像更亮

2 年前

ajai.s · 根据用户偏好改变网络a帧中的化身

2 年前

Burak Ertan · 如何使数组中的向量不改变其值?

2 年前

Yücel Sabah · 三JS-绝对更改加载网格的顶点坐标(扭曲网格)并使用该顶点

2 年前

Jojo · 三js-多元素-webgl

2 年前

Lucho · 三分钟后。js如何将相机添加到glb骨架中的头骨?

2 年前

Zalan Szakacs · 如何导入字符串值(x、y、z)以生成三个几何体。js?

6 年前

JoakimNyland · 使用外部链接将纹理应用于WebGL中的3D模型[已关闭]

6 年前

Brian Dolan · 如何影响三维力图中的链接距离?

6 年前

GAURANG KORANT · 如何使用非平面形状(曲面)的threejs绘制具有三维点(x、y、z)的形状几何体

6 年前