I am looking to generate a positive X-Y plane in mesh format using three.js. Additionally, I would like the ability to click on any intersection point and retrieve the coordinate values, resembling a graph paper layout.
Design.prototype.mouseUp = function (event) {
var material = new THREE.LineDashedMaterial({
color:0xffeedd , dashSize:2 , gapSize:2
});
this.container.offsetHeight = 30 , this.container.offsetWidth = 70;
var a = 0;
for(var i = 0; i <= this.container.offsetWidth ; i++) {
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -90 + a,-50, 0 ) );
geometry.vertices.push( new THREE.Vector3( -90 + a, 50, 0 ) );
var line = new THREE.Line( geometry, material );
this.scene.add( line);
a = a + 1;
}
var b = 0;
for(var j = 0; j <= this.container.offsetHeight; j++) {
var geometry1 = new THREE.Geometry();
geometry1.vertices.push( new THREE.Vector3( -90,-50 +b , 0 ) );
geometry1.vertices.push( new THREE.Vector3( 90,-50 +b , 0 ) );
var line1 = new THREE.Line( geometry1, material );
this.scene.add( line1);
b = b + 1;
}
};
Design.prototype.onDocumentMouseMove = function( event ) {
mouseX = event.clientX - (this.container.offsetWidth * 0.5);
mouseY = event.clientY - (this.container.offsetHeight-window.innerHeight * 0.875);
};
Design.prototype.onDocumentMouseDown = function(event) {
event.preventDefault();
alert("X: " + mouseX + " Y: " + mouseY);
var projector = new THREE.Projector();
var vector = new THREE.Vector3( ( mouseX / this.container.offsetWidth )*(2-1), - ( mouseY / this.container.offsetHeight )*(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 ){
var sphere = new THREE.Mesh(new THREE.SphereGeometry(size / 4), new THREE.MeshLambertMaterial(intensity));
sphere.position = intersects[ 0 ].point;
scene.add(sphere);
}
};
//three.js code
window.vv = {};
window.vv.messages = {
NO_CONTAINER: "No Container provided."
};
function DesignSpace() {
this.activeDesign = 0;
this.designes = [];
}
DesignSpace.prototype.getDesignByIndex = function(index) {
var returnValue = null;
if (index < this.designes.length) {
returnValue = this.designes[index];
}
return returnValue;
};
DesignSpace.prototype.setActiveDesign = function(index) {
this.activeDesign = index;
};
DesignSpace.prototype.addDesign = function(container) {
var design = new Design(container);
this.designes.push(design);
return design;
};
DesignSpace.prototype.run = function() {
var design = window.vv.designSpace.getDesignByIndex(window.vv.designSpace.activeDesign);
design.getRenderer().render(design.getScene(), design.getCamera());
window.requestAnimationFrame(window.vv.designSpace.run);
};
function Design(container) {
this.renderer = null,
this.scene = null,
this.camera = null,
this.cube = null,
this.animating = null,
this.light = [];
this.grid = null;
this.container = container;
}
Design.prototype.setUp = function() {
if (!this.container) {
console.log(window.vv.NO_CONTAINER);
return null;
}
this.container = document.getElementById(this.container);
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setSize(this.container.offsetHeight, this.container.offsetHeight);
this.container.appendChild(this.renderer.domElement);
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(90, this.container.offsetWidth / this.container.offsetHeight, 1, 4000);
this.camera.position.set(0, 0, 3);
if (this.light && !this.light.length) {
this.light.push(new Light({intensity: 1.0, x: 0, y: 1, z:1}));
}
for (var i in this.light) {
this.scene.add(this.light[i].getLight());
}
this.addMouseHandler();
};
Design.prototype.addMouseHandler = function (event) {
this.renderer.domElement.addEventListener('mouseup', $.proxy(this.mouseUp, this), false);
this.renderer.domElement.addEventListener('mousemove', $.proxy(this.onDocumentMouseMove, this), false);
this.renderer.domElement.addEventListener('mousedown', $.proxy(this.onDocumentMouseDown, this), false);
};