others - Javascript - three.js使用顏色選擇器中的十六進位值字元串

135 1

如何將FFA6A6更改為three.js可識別的顏色?


function updateNoseColor(){


 scene.remove(nose);


 var geometry = new THREE.ConeGeometry( .4, 1, 32 );



 var material = new THREE.MeshBasicMaterial( {color: document.getElementById("nosecolor").value} );


 //three.js cannot take a string as a value, so im not sure what to do


 var nose = new THREE.Mesh( geometry, material );


 scene.add(nose);


}



时间: 原作者:

87 5

可以使用(引用 ),例如:


var color = new THREE.Color("#FFA6A6"); //"FFA6A6" won't work!


color.getHex(); // 0xFFA6A6



也就是說,將下面的代碼替換為給定的代碼:


var material = new THREE.MeshBasicMaterial( {color: document.getElementById("nosecolor").value} );




var material = new THREE.MeshBasicMaterial( {color: new Color(document.getElementById("nosecolor").value)} );



if document.getElementById("nosecolor"). value = "#FFA6A6 "

else with


var material = new THREE.MeshBasicMaterial( {color: new Color("#" + document.getElementById("nosecolor").value)} );



if document.getElementById("nosecolor"). value = "FFA6A6" ( no # in the start )

例如,運行以下代碼段(來自three.js 示例 )。


function createSquare() {


 var scene = new THREE.Scene();


 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);



 var renderer = new THREE.WebGLRenderer();


 renderer.setSize(window.innerWidth, window.innerHeight);


 document.body.appendChild(renderer.domElement);



 var geometry = new THREE.BoxGeometry(1, 1, 1);



 /* START - EXACT ANS */


 var a ="#"+document.getElementById("nosecolor").value;


 var material = new THREE.MeshBasicMaterial({


 color: (new THREE.Color(a))


 });


 /* STOP - EXACT ANS */



 var cube = new THREE.Mesh(geometry, material);


 scene.add(cube);



 camera.position.z = 5;



 function animate() {


 requestAnimationFrame(animate);


 renderer.render(scene, camera);


 }


 animate();


}



createSquare();

<input type="text" id="nosecolor" value="FFA6A6">



<script src="http://threejs.org/build/three.min.js"></script>

原作者:
...