javascriptthree.js
我在ThreeJS渲染模型。现在，我需要添加交互性，使得： 根据输入的值，我需要上色的模型的一部分。 如果我点击任何模型的一部分，我希望它被高亮显示。 我是新来ThreeJS和一个小我如何做到这一点？
本文地址 ：/6728209/
-------------------------------------------------------------------------------------------------------------------------
1.如果你要更新的模型的一部分，你需要看看textures和放大器;材料的实例。 当您单击模型，你要突出整个模型或只是在面对当前？无论哪种方式，因为你工作在3D，您将需要创建哪些你unproject基于投影矩阵的位置拍摄深度的光线在你的3D场景，看看哪些对象（S）的位置向量相交它。幸运的是，代码已经是很多样品，如canvas_interactive_cubes在： 在init方法：document.addEventListener( "mousedown", onDocumentMouseDown, false ); 并且：function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectObjects( objects ); if ( intersects.length > 0 ) { intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff ); var particle = new THREE.Particle( particleMaterial ); particle.position = intersects[ 0 ].point; particle.scale.x = particle.scale.y = 8; scene.add( particle ); } /* // Parse all the faces for ( var i in intersects ) { intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 ); } */ } 我是从那里开始。
2.更新function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); projector.unprojectVector( vector, camera ); var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() ); var intersects = raycaster.intersectObjects( objects ); if ( intersects.length > 0 ) { intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff ); var particle = new THREE.Sprite( particleMaterial ); particle.position = intersects[ 0 ].point; particle.scale.x = particle.scale.y = 16; scene.add( particle ); } }
本文标题 ：ThreeJS如何添加交互性，
本文地址 ：/6728209/
