鼠标点击 three.js
mouse click on three.js
我有一个网页,上面有 three.js (webgl) 图形。该图的类型为 .dae,是从 Blender 导入的。我试图在鼠标被点击的地方画一个正方形或标记,但由于某种原因,正方形被绘制在不同的位置。我已经阅读了各种博客,但我不知道我做错了什么.. 这是我的代码:
<script src="three.js"></script>
<script src="ColladaLoader.js"></script>
<script src="TrackballControls.js"></script>
<script>
var dae;
var camera;
var renderer;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( './dataFile.dae', function ( collada ) {
dae = collada.scene;
dae.traverse( function ( child ) {
if ( child instanceof THREE.SkinnedMesh ) {
var animation = new THREE.Animation( child, child.geometry.animation );
animation.play();
}
} );
dae.scale.x = dae.scale.y = dae.scale.z = 1;
dae.updateMatrix();
init();
animate();
} );
function init() {
container = document.getElementById( 'canvas' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 5, 1000 );
camera.position.set( 2, 7, 3 );
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.0;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
// Add the COLLADA
scene.add( dae );
// Lights
scene.add( new THREE.AmbientLight( 0xcccccc ) );
light = new THREE.PointLight(0x000000);
light.position.set(-100, 100, 100);
scene.add(light);
// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// Misc
document.addEventListener('click', onDocumentMouseClick);
render();
}
function onDocumentMouseClick(event) {
//event.preventDefault();
var mouses = { x : 0, y : 0 };
mouses.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / window.innerWidth ) * 2 - 1;
mouses.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / window.innerHeight ) * 2 + 1;
// particle
var dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector2( mouses.x, .5, mouses.y));
var dotMaterial = new THREE.PointCloudMaterial( { color: 0x000000, size: 8, sizeAttenuation: false } );
var dot = new THREE.PointCloud( dotGeometry, dotMaterial );
scene.add( dot );
render();
}
</script>
所以我发现了问题..问题是相机位置和平移弄乱了点击位置的位置。
一旦我禁用了平移和缩放功能,一切就都完美了。
我有一个网页,上面有 three.js (webgl) 图形。该图的类型为 .dae,是从 Blender 导入的。我试图在鼠标被点击的地方画一个正方形或标记,但由于某种原因,正方形被绘制在不同的位置。我已经阅读了各种博客,但我不知道我做错了什么.. 这是我的代码:
<script src="three.js"></script>
<script src="ColladaLoader.js"></script>
<script src="TrackballControls.js"></script>
<script>
var dae;
var camera;
var renderer;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( './dataFile.dae', function ( collada ) {
dae = collada.scene;
dae.traverse( function ( child ) {
if ( child instanceof THREE.SkinnedMesh ) {
var animation = new THREE.Animation( child, child.geometry.animation );
animation.play();
}
} );
dae.scale.x = dae.scale.y = dae.scale.z = 1;
dae.updateMatrix();
init();
animate();
} );
function init() {
container = document.getElementById( 'canvas' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 5, 1000 );
camera.position.set( 2, 7, 3 );
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.0;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
// Add the COLLADA
scene.add( dae );
// Lights
scene.add( new THREE.AmbientLight( 0xcccccc ) );
light = new THREE.PointLight(0x000000);
light.position.set(-100, 100, 100);
scene.add(light);
// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// Misc
document.addEventListener('click', onDocumentMouseClick);
render();
}
function onDocumentMouseClick(event) {
//event.preventDefault();
var mouses = { x : 0, y : 0 };
mouses.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / window.innerWidth ) * 2 - 1;
mouses.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / window.innerHeight ) * 2 + 1;
// particle
var dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector2( mouses.x, .5, mouses.y));
var dotMaterial = new THREE.PointCloudMaterial( { color: 0x000000, size: 8, sizeAttenuation: false } );
var dot = new THREE.PointCloud( dotGeometry, dotMaterial );
scene.add( dot );
render();
}
</script>
所以我发现了问题..问题是相机位置和平移弄乱了点击位置的位置。
一旦我禁用了平移和缩放功能,一切就都完美了。