个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的总体目标是能够加载人体的 .obj 文件。允许用户选择两个顶点并用标志突出显示它们。然后从原始.obj文件中找到两个顶点的索引并运行一个php脚本来测量两个顶点之间的距离。
我尝试了多种方法但没有成功，通常是围绕选择两个顶点。我目前的方法使用 obj 加载器，它工作正常但是我无法找到我正在使用 Projector 和 Ray 单击的顶点。它总是返回一个空数组。
到目前为止，这是我的代码，一旦相交数组不为空，我就会尝试从文件中找到最近的顶点，更改对象的颜色并更改单击的面。
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: white;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<script src="javascripts/Three.js"></script>
<script src="javascripts/OBJLoader.js"></script>
<script>
var container, stats;
var camera, scene, renderer, model;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 1;
scene.add( camera );
camera.position.y = -4;
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
var loader = new THREE.OBJLoader();
loader.load( "img/originalMeanModel.obj", function ( object ) {
model = object;
scene.add( model );
} );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event ){
console.log('Morphable-body-obj: Width '+ window.innerWidth ) ;
console.log('Morphable-body-obj: Height '+ window.innerHeight) ;
var vector = new THREE.Vector3 ((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight)*2+1, 0.5);
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
var intersects = ray.intersectObject(scene);
console.log(intersects);
if (intersects.length > 0)
{
var xhr = new XMLHttpRequest();
xhr.open('GET', '/img/originalMeanModel.obj', false);
xhr.send(null);
var text = xhr.responseText;
var origText = text;
var lines = text.split("\n");
for (i=0; i<6449; i++){
lines[i] = lines[i].split(" ");
}
var low = Math.sqrt(
(Math.pow((intersects[0].point.x - parseFloat(lines[0][1])), 2))+
(Math.pow((intersects[0].point.y - parseFloat(lines[0][2])), 2))+
(Math.pow((intersects[0].point.z - parseFloat(lines[0][3])), 2))
);
var c = 0;
for(i=1; i<6449; i++){
var temp = Math.sqrt(
(Math.pow((intersects[0].point.x - parseFloat(lines[i][1])), 2))+
(Math.pow((intersects[0].point.y - parseFloat(lines[i][2])), 2))+
(Math.pow((intersects[0].point.z - parseFloat(lines[i][3])), 2))
);
if(temp < low){
low = temp;
c=i;
}
}
console.log(
'Mouse coordinates:' + '\nx = ' + intersects[0].point.x + '\ny = ' + intersects[0].point.y + '\nz = ' + intersects[0].point.z +'\n'+
'Nearest Vertex' + '\nx= ' + lines[c][1] + '\ny= ' + lines[c][2] + '\nz =' + lines[c][3] + "\n" +
'Difference' + '\nx= ' + (intersects[0].point.x - lines[c][1]) + '\ny= ' + (intersects[0].point.y - lines[c][2]) + '\nz= ' + (intersects[0].point.z - lines[c][3])
);
intersects[0].object.materials[0].color = new THREE.Color( Math.random() * 0xffffff );
intersects[0].face.color = new THREE.Color(0xffffff);
intersects[0].object.geometry.colorsNeedUpdate = true;
intersects[0].object.geometry.dynamic = true;
}
else{
alert('error');
}
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
有问题的 .obj 文件可以在这里找到 https://dl.dropbox.com/u/23384412/originalMeanModel.obj
如果有人能指出正确的方向，我将不胜感激。
提前致谢! :)
最佳答案
为了解决这个问题，我使用这段代码从 obj 加载器返回的对象创建了一个网格
var loader = new THREE.OBJLoader();
loader.load( "img/originalMeanModel.obj", function ( object ) {
object.children[0].geometry.computeFaceNormals();
var geometry = object.children[0].geometry;
console.log(geometry);
THREE.GeometryUtils.center(geometry);
var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
mesh = new THREE.Mesh(geometry, material);
model = mesh;
// model = object;
scene.add( model );
} );
然后在执行 intersectObject 时，我是在模型而不是场景上执行的
var intersects = ray.intersectObject(model);
关于javascript - three.js - 使用 Projector 和 Ray 来选择一个顶点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11205784/
25
4
0
我有这些类型: SomeTypeClass 具有一个类型参数 kind * => * => * 的更高类型 trait SomeTypeClass[P[_, _]] { def test[F[
在 Ogre 中，我将贴花投影到球体上。然而，贴花直接穿过球体并将另一个贴花转换到另一侧!我该如何阻止它？ material planets/Planet_Earth { technique {
运行tensorboard --logdir log_dir我收到错误: Traceback (most recent call last): File "/home/user/.local/bi
我已将 Individual.XML 放置在目录中:Files\InputApps - - **A123** 只是想打印出“A123”，但我收到此错误: Exception in thread "
我知道版本 71 中没有 THREE.projector(请参阅 deprecated list)，但我不明白如何替换它，尤其是在检测哪个对象已被替换的代码中点击: var vector = new
我希望使用 Flash Player 中的“创建投影仪”选项自动执行从 .swf 文件创建 .exe 的任务。我正在尝试使用 ant 构建文件来实现它。有人可以指出我正确的方向。尝试搜索，但没有找到
给定 F[_] 和 A[_] 类型参数，我如何将以下类型 lambda 转换为更令人愉快的 Kind-Projector 语法？ ({type λ[α] = F[A[α]]})#λ 我原以为它会像 F
我一直在尝试使用 Projector 和 Ray 类来做一些碰撞检测演示。我开始只是尝试使用鼠标来选择对象或拖动它们。我查看了使用这些对象的示例，但它们似乎都没有解释 Projector 和 Ray
关注 gensim word2vec embedding tutorial ，我已经训练了一个简单的 word2vec 模型: from gensim.test.utils import common
我的总体目标是能够加载人体的 .obj 文件。允许用户选择两个顶点并用标志突出显示它们。然后从原始.obj文件中找到两个顶点的索引并运行一个php脚本来测量两个顶点之间的距离。 我尝试了多种方法但没有
我只看到几个问题问这个问题，但还没有一个有答案，所以我想我不妨试试。我一直在使用 gensim 的 word2vec 模型来创建一些向量。我将它们导出为文本，并尝试将其导入到嵌入投影仪的 tensor
我正在使用 MediaProjection API 捕获屏幕。 我已经使用下面的代码调用 android 系统 Activity 来捕获屏幕， MediaProjectionManager mProj
我是一名优秀的程序员,十分优秀！