three.js所 - 紋理

少字的大小，更麻煩代碼=）three.js所 - 紋理

var objects = []; 

var camera, scene, renderer; 

document.addEventListener('mousedown', onDocumentMouseDown, false); 

init(); 
render(); 

function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    var vector = new THREE.Vector3((event.clientX/window.innerWidth) * 2 - 1, - (event.clientY/window.innerHeight) * 2 + 1, 0.5); 
    projector.unprojectVector(vector, camera); 
    var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize()); 
    var intersects = ray.intersectObjects(objects); 
    if (intersects.length > 0) { 
     console.log(intersects[ 0 ].object); 
    } 
} 

function init() { 

    container = document.getElementById('container'); 
    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 1, 1100); 
    camera.position.z = 50; 
    scene.add(camera); 


    var particle = new THREE.Particle(new THREE.ParticleBasicMaterial({ map: THREE.ImageUtils.loadTexture("img/satellite.png") })); 
    objects.push(particle); 
    //particle.scale.x = particle.scale.y = 0.25 
    scene.add(particle); 

    projector = new THREE.Projector(); 
    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    container.appendChild(renderer.domElement); 
} 

function render() { 
    camera.lookAt(scene.position); 
    renderer.render(scene, camera); 
}

作爲結果，我們得到具有紋理可點擊的粒子。但我不明白幾件事情：

爲什麼粒子的「點擊」區域是如此之小？只有當我點擊一個粒子的中間時，它纔有效。
爲什麼這個粒子如此之大？紋理是這個.png文件，粒子比16×16更大。我該如何解決這個問題？是的，我知道particle.scale，這會使粒子看起來更小。但是，粒子的「可點擊」區域也變小了。

來源

2012-07-05 yegorov-p

這是一個有趣的問題。也許我們可以在'Ray'中添加一些代碼，以便粒子區域可裁剪...您是否介意將它作爲github頁面上的功能請求報告？ – mrdoob

當然，https://github.com/mrdoob/three.js/issues/2170 –

我知道這是一個老問題，但今天我在同樣的問題來了，我發現這個問題的答覆，經過一些解決方法我遇到了一個解決方案這一點。

解決的辦法是創建2個粒子，一個是一個簡單的粒子，它繪製一個ParticleCanvasMaterial的幾何圖形（矩形或弧形），然後是在其頂部顯示圖像的粒子。

因此，您可以使用ParticleCanvasMaterial來跟蹤交集並將其他粒子顯示爲虛擬對象，其目的是在3D場景上顯示圖像。

A的碼點點：

var programFill = function (context) { 
       context.beginPath(); 
       context.rect(-0.5, -0.38, 1, 1); 
       //context.fill(); 
      } 

      //creating particle to intersect with. 
      var p = new THREE.ParticleCanvasMaterial({ program: programFill, transparent: true }); 
      var particle = new THREE.Particle(p); 
      particle.scale.set(23, 23); 
      //use same position for both particle and imgParticle 
      particle.position.set(200, 300, 200); 

      //creating particle that displays image. 
      var imgTexture = THREE.ImageUtils.loadTexture('images/image.png'); 
      var p2 = new THREE.ParticleBasicMaterial({ 
       map: imgTexture 
       , size: 1 
      }); 

      var imgParticle = new THREE.Particle(p2); 
      imgParticle.scale.x = 0.5; 
      imgParticle.scale.y = 0.5; 
      imgParticle.position.set(200, 300, 200);

來源

2013-08-20 19:52:10 Julian

three.js所 - 紋理

回答

相關問題