【发布时间】：2014-03-30 10:05:47
【问题描述】：
我想使用 three.js 创建一个网格格式的正 X-Y 平面。此外，我希望能够单击任何交点并获取坐标值。视图应该像方格纸。
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);
};
【问题讨论】：
-
X、Y、Z 坐标总是从画布的中心开始。你想从中心开始你的飞机并占据右上象限吗？或者你想让它占据整个画布？
-
SO 不能这样工作。你应该做点什么，然后人们会帮助你。在这里订购将无处可去。
-
@Farzad 我的错。匆忙发布。下次会记住的:)
-
@AmeerTamboli 如您所见，我正在使用一个容器，所以我不想占据整个画布。我希望容器的最左侧底部与画布的原点一致，即（0,0,0）。这样，绘图将仅在正 X-Y 轴上完成。可以吗？
-
您也可以包含您的
three.js代码吗？一种方法是在three.js中使用简单的二维平面几何。您的方格纸是静态的，并且在页面演示期间不会移动吗？如果是，您可以简单地通过事件获取鼠标坐标。
标签： javascript three.js coordinates