मैं 3 डी ऑब्जेक्ट का रंग बदलने की कोशिश कर रहा हूं जहां कलर पिकर का उपयोग करके छेड़छाड़ की गई है। मैं डेटा.गुई के साथ कोशिश कर रहा हूं। मैं 3 डी भाग का रंग बदलना चाहता हूं जहां इसे क्लिक किया जाता है और चयनित को कलरपिकर से बदल दिया जाता है। मैंने कुछ संभव कोशिश की तरीके लेकिन यह काम नहीं करता है। कृपया, उस कोड को देखें जिसे मैंने आजमाया था। कुछ समाधान के साथ मेरी मदद करें और मेरा ध्यान इस ओर आकर्षित करें कि मैं कहाँ गलत हो रहा हूँ। धन्यवाद।

<!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>
0
micky 22 अप्रैल 2019, 14:11

1 उत्तर

सबसे बढ़िया उत्तर

मैंने आपके कोड और एक बुनियादी कार्य समाधान के साथ एक छोटा सा लाइव डेमो बनाया है। मैं तीन महत्वपूर्ण परिवर्तनों पर प्रकाश डालना चाहूंगा:

  • आप onChange() ईवेंट हैंडलर का उपयोग यह जानने के लिए कर सकते हैं कि कोई निश्चित dat.gui प्रॉपर्टी कब बदली है। डेमो इस सुविधा का उपयोग किसी चयनित ऑब्जेक्ट के रंग को अपडेट करने के लिए करता है।
  • मैंने आपके रेकास्टिंग तर्क को कुछ और सरल बना दिया है। मैंने देखा है कि आपने आधिकारिक three.js उदाहरणों से कुछ कोड कॉपी किए हैं लेकिन नया कोड आपके मामले के लिए पर्याप्त होना चाहिए। इसके अलावा, Material.emissive के बजाय Material.color को अपडेट करना भी बेहतर है।
  • यदि आप OrbitControls.enableDamping को true पर सेट करते हैं, तो आपको अपने एनिमेशन लूप में नियंत्रणों को अपडेट करना होगा।

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

three.js R103

0
Mugen87 22 अप्रैल 2019, 13:47