Question

我正在尝试使用颜色选择器更改相交的3D对象的颜色。我正在尝试使用dat.gui。我想更改单击它的3d部件的颜色并更改从colorPicker中选择的颜色。找出一些可能的方法，但无法解决。请参考我尝试过的代码。提供一些解决方案，帮助我，并引起我对我哪里出问题的注意。谢谢。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>color</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			
		</style>
	</head>

	<body>
		<script src="three.js"></script>
		<script src="OrbitControls.js"></script>
		<script src="Detector.js"></script>
		<script src="stats.min.js"></script>
		
		<script src="loaders/MTLLoader.js"></script>
		<script src="loaders/OBJLoader.js"></script>	
		<script type='text/javascript' src='DAT.GUI.min.js'></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;

			var camera, controls, scene, renderer,effectController;
			
			var raycaster;
		
			var objects = [];
			
			var selectedObject,selectedPos;
			
			var rotation;
			
			var pos,quat;
			
			var INTERSECTED;
			
			var guiColor;
			
			
			init();
			animate();
			
			function init() {
				
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.z = 15;
				

				controls = new THREE.OrbitControls( camera );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x555000 );
				scene.add( camera );
				
				// light
			
				var dirLight = new THREE.DirectionalLight( 0xffffff );
				dirLight.position.set( 200, 200, 1000 ).normalize();

				camera.add( dirLight );
				camera.add( dirLight.target );
				
        var mtlLoader = new THREE.MTLLoader(); mtlLoader.setBaseUrl('assets/'); mtlLoader.setPath('assets/'); mtlLoader.load('anno.mtl', function (materials) {

             materials.preload();

         var objLoader = new THREE.OBJLoader();
             objLoader.setMaterials(materials);
             objLoader.setPath('assets/');
             objLoader.load('anno.obj', function (object) {
             scene.add( object );
             objects.push( object );
    });
 });

				// renderer

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				/* Controls */

				controls = new THREE.OrbitControls(camera, renderer.domElement);
				controls.enableDamping = true;
				controls.dampingFactor = 0.25;
				controls.enableZoom = false;
				
				raycaster = new THREE.Raycaster();
				
				gui = new dat.GUI();
	
				parameters = 
				{

					color: "#ff0000",
				
				};
				
				
				gui.add( parameters, 'reset' ).name("Reset");
				guiColor = gui.addColor( parameters, 'color' ).name('Color');
				
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				container.appendChild( renderer.domElement );

				stats = new Stats();
				container.appendChild( stats.dom );

				window.addEventListener( 'resize', onWindowResize, false );
				renderer.domElement.addEventListener("click", onclick, false);
				
			}

			var mouse = new THREE.Vector2();
			
			

			function onclick(event) {
				
				mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

				raycaster.setFromCamera(mouse, camera);
				var intersects = raycaster.intersectObjects(objects, true);
				
				
				if (intersects.length > 0) {
				
						INTERSECTED = intersects[0].object;
						if ( INTERSECTED && INTERSECTED.material.emissive != null ){
								guiColor.onChange(function(){
							INTERSECTED.material.emissive.setHex(parameters.color)
							});
							
				}
			
			

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				renderer.render( scene, camera );

				stats.update();
			}
		
		</script>

	</body>
</html>

Answer 1

我已经用您的代码和一个基本的可行解决方案创建了一个现场演示。我想强调三个重要的变化：

您可以使用onChange()事件处理程序来知道某个dat.gui属性何时已更改。演示使用此功能更新所选对象的颜色。
我已经将您的光线投射逻辑重构为更简单的内容。我已经看到您已经从官方three.js示例中复制了一些代码，但是新代码足以满足您的情况。此外，最好更新Material.color而不是Material.emissive。
如果将OrbitControls.enableDamping设置为true，则必须更新动画循环中的控件。

https://jsfiddle.net/btuzd23o/2/

three.js R103

使用colorPicker three.js更改3D模型的颜色

1 个答案: