Three.js - 在相機方向和球體交點處畫一個大點

我嘗試在three.js的球體上繪製一個點（大小可見）。此點位於從相機開始的線與球體的交點處。Three.js - 在相機方向和球體交點處畫一個大點

我受到this link的啓發。

你可以在我的上this link

結果正如你所看到的，我已經隱藏了drawPointIntersection()功能，該功能後render()函數調用。這是在這個函數中，我做了說明來闡明這一點。

下面是這部分代碼：

function drawPointIntersection() { 

    // Direction of camera 
    var direction = new THREE.Vector3(0, 0, -1); 
    var startPoint = camera.position.clone(); 
    var ray = new THREE.Raycaster(startPoint, direction); 

    // Get point of camera direction projected on sphere 
    var rayIntersects = ray.intersectObject(scene, true); 

    // Distance between camera and projected point 
    console.log(rayIntersects[0]); 

    // Draw point of camera direction on sphere 
    var dotGeometry = new THREE.Geometry(); 

    // Looking for right syntax with coordinates of intersection point 

    //dotGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); 
    dotGeometry.vertices.push(new THREE.Vector3(rayIntersects[1]); 
    //dotGeometry.vertices.push(new THREE.Vector3(rayIntersects.point.x, rayIntersects.point.y, rayIntersects.point.z); 

    var dotMaterial = new THREE.PointsMaterial({size: 10, sizeAttenuation: false}); 
    var dot = new THREE.Points(dotGeometry, dotMaterial); 
    scene.add(dot); 
}

正如你所看到的，我試圖用不同的語法來獲得由ray.intersectObject(scene, true)返回的點的座標，但沒有工作：

dotGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); 

    dotGeometry.vertices.push(new THREE.Vector3(rayIntersects[1]); 

    dotGeometry.vertices.push(new THREE.Vector3(rayIntersects.point.x, rayIntersects.point.y, rayIntersects.point.z);

我讓你注意到相機在球體周圍旋轉。

我不知道爲什麼它不起作用，如果有人能告訴我如何獲得這些座標，以便用three.js R75與THREE.Points方法繪製球體上的點。

在此先感謝

來源

2016-03-18 youpilat13

的球在世界座標空間（我認爲）和在世界座標空間中相機的正向不一定是（0,0，-1）。 –

你在每一幀改變攝像頭的位置，所以錯誤的方向向量。試試這個：

// Camera position 
var startPoint = camera.position.clone(); 

// Direction of camera 
var direction = sphere.position.clone().sub(startPoint).normalize();

而只是看在目標對象的交叉點（球）：

var rayIntersects = ray.intersectObject(sphere, true);

[https://jsfiddle.net/3wm9c0jf/]

來源

2016-03-18 06:43:19

@ stob--謝謝！這是有效的......還有最後一個問題，我怎樣才能避免畫出一條線，而只是一個點，而球正在旋轉？我需要刪除每個幀的點，因爲只有一個點。 – youpilat13

@ user1773603那麼簡單改變點的位置呢？ –

我通過在「renderer.render（scene，camera）」調用之後添加「scene.remove（dot）」來解決此問題。 – youpilat13

Three.js - 在相機方向和球體交點處畫一個大點

回答

相關問題