I'm facing an issue with my webpage that features a three.js (webgl) graphic created using a .dae file imported from Blender. My goal is to draw a square or mark wherever the mouse is clicked, but for some reason, the square appears in a different location than expected. I've researched various blogs looking for a solution, but so far, I haven't been able to pinpoint what mistake I might be making. Here is the code snippet:
<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 );
// Miscellaneous
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>