admin管理员组文章数量:1322177
I know that the question has already been asked. I want to be able to change the color of an object if selected with the mouse. I tried writing the code myself but it seems not to work, so I guess that I am missing something. That's basically the script:
<script>
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/2, window.innerHeight/2 );
renderer.setClearColor( 0xcccccc, 1 );
document.body.appendChild( renderer.domElement );
scene.add(camera);
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -5, 5, 0 ),
new THREE.Vector3( -5, -5, 0 ),
new THREE.Vector3( 5, -5, 0 )
);
var face = new THREE.Face3(0, 1, 2);
geometry.faces.push(face);
var material = new THREE.MeshBasicMaterial({color: 0x3300ff});
var triangle = new THREE.Mesh(geometry, material);
scene.add(triangle);
camera.position.z = 10;
document.addEventListener( 'mousedown', onDocumentMouseDown );
function onDocumentMouseDown( event ) {
event.preventDefault();
var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
var projector = new THREE.Projector();
var raycaster = projector.pickingRay( mouse3D.clone(), camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}
}
var render = function () {
requestAnimationFrame( render );
camera.lookAt( scene.position );
renderer.render( scene, camera );
};
render();
</script>
If someone could help me I would appreciate it.
I know that the question has already been asked. I want to be able to change the color of an object if selected with the mouse. I tried writing the code myself but it seems not to work, so I guess that I am missing something. That's basically the script:
<script>
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/2, window.innerHeight/2 );
renderer.setClearColor( 0xcccccc, 1 );
document.body.appendChild( renderer.domElement );
scene.add(camera);
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -5, 5, 0 ),
new THREE.Vector3( -5, -5, 0 ),
new THREE.Vector3( 5, -5, 0 )
);
var face = new THREE.Face3(0, 1, 2);
geometry.faces.push(face);
var material = new THREE.MeshBasicMaterial({color: 0x3300ff});
var triangle = new THREE.Mesh(geometry, material);
scene.add(triangle);
camera.position.z = 10;
document.addEventListener( 'mousedown', onDocumentMouseDown );
function onDocumentMouseDown( event ) {
event.preventDefault();
var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
var projector = new THREE.Projector();
var raycaster = projector.pickingRay( mouse3D.clone(), camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}
}
var render = function () {
requestAnimationFrame( render );
camera.lookAt( scene.position );
renderer.render( scene, camera );
};
render();
</script>
If someone could help me I would appreciate it.
Share Improve this question edited Oct 5, 2015 at 21:56 user128511 asked Oct 5, 2015 at 18:10 vixennvixenn 1972 gold badges5 silver badges15 bronze badges 2- 1 use eventcontrols ) alexan0308.github.io/threejs/examples/… – gevaraweb Commented Oct 5, 2015 at 21:42
- 1 Let me remind you that raycasting is done on CPU and is exceptionally slow. Better approach can be found by keyword "gpu picking": you'd like to render your scene with each clickable face having different color, and then just get a color of pixel by mouse coordinates. – polkovnikov.ph Commented Mar 20, 2017 at 21:40
1 Answer
Reset to default 3Updated your code and made jsfiddle
In onDocumentMouseDown added
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera( mouse3D, camera );
instead of
var projector = new THREE.Projector();
var raycaster = projector.pickingRay( mouse3D.clone(), camera );
To objects array added triangle mesh and updated size of the renderer. I suggest you to start using Console and do some debugging. You can easily find these errors yourself.
本文标签: javascriptSelecting object with mouseThreejsStack Overflow
版权声明:本文标题:javascript - Selecting object with mouse - Three.js - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742115689a2421457.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论