调节三分之一的色温或温暖

Question

我已经在三个js中创建了一个小房间类型场景，我添加了很少的灯光。

我还添加了诸如曝光，功率，高度的功能。

这是您可以看到到目前为止所做的链接。

现在我想添加功能以调节光的温度。

我该怎么做？

Answer 1

以下面的片段为例：

var renderer = new THREE.WebGLRenderer;
var scene = new THREE.Scene;
var camera = new THREE.PerspectiveCamera;
var cube = new THREE.Mesh( new THREE.BoxGeometry, new THREE.MeshPhongMaterial );
var spot = new THREE.SpotLight;
var inputs = [ ...document.querySelectorAll( 'input' ) ];
var destinationColor = new THREE.Color( 1, 1, 1 );
var fps = 1000 / 16;
var width = innerWidth;
var height = innerHeight / 2;
renderer.setSize( width, height );
camera.aspect = innerWidth / height;
camera.updateProjectionMatrix();
camera.position.set( 0, 0, 10 );
camera.lookAt( scene.position );
spot.position.set( 0, 0, 50 );
spot.lookAt( scene.position );
scene.add( cube, spot );
function inputChanged( event ){
  destinationColor.fromArray( inputs.map(input => input.value) );
}
function update(){
  spot.color.lerp( destinationColor, fps / 1000 );
  renderer.render( scene, camera );
}
document.body.appendChild( renderer.domElement );
inputs.forEach(input => input.addEventListener( 'change', inputChanged ));
setInterval( update, fps );

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
R <input type="range" min="0" max="1" step=".1" value="1" />
G <input type="range" min="0" max="1" step=".1" value="1" />
B <input type="range" min="0" max="1" step=".1" value="1" />

在R92上测试，在Chrome上工作。