Question

我在three.js中创建了一个小房间类型的场景，我添加了几个灯光。

我还添加了曝光，功率，高度等功能。

以下是link，您可以看到到目前为止所做的工作。

现在我想添加一项功能来调节灯光的温度。

我该怎么做？

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。

调整Three.js的色温或温度

1 个答案: