Raycaster与Three.js和whitestormJS

Question

我遇到与Three.js和WhitestormJS Raycasting的问题。 也许我并没有很好地理解这个特定元素的一些基本原理。

我想要做的是同步raycaster与我的相机的方向。 所以，一旦它与一个元素相交，这个元素将被添加到相交数组中。

问题是即使我将相机移动到元素方向，我的“相交”数组仍保持为空。

在codepen：https://codepen.io/paulbonneau/pen/zdVeJx?editors=1111

我的代码：

const app = new WHS.App([ 
    new WHS.ElementModule({ 
    container: document.getElementById('app') 
    }), 
    new WHS.SceneModule(), 
    new WHS.DefineModule('camera', new WHS.PerspectiveCamera({ 
    position: new THREE.Vector3(0, 6, 18), 
    far: 10000 
    })), 
    new WHS.CameraModule({ 
    position: { 
     y: 2, 
     z: 2, 
     x: 1, 
    }, 

    }), 
    new WHS.RenderingModule({ 
    bgColor: 0x162129, 

    renderer: { 
     antialias: true, 
     shadowmap: { 
     type: THREE.PCFSoftShadowMap 
     } 
    } 
    }, {shadow: true}), 
    new WHS.OrbitControlsModule(


    ), 
    new WHS.ResizeModule() 
]); 

app.modules[5].controls.enableZoom = false 
var camera = app.get('camera'); 
crosshair = new THREE.Vector2(0,0); 
// Rendu de la skybox càd l'environnement dans lequel se déroule le jeu 
var path = "img/skybox/"; 
var format = '.jpg'; 
var urls = [ 

    './skybox/EH_0.front.jpg', 
    './skybox/EH_0.back.jpg' , 
    './skybox/EH_0.top.jpg', 
    './skybox/EH_0.bottom.jpg', 
    './skybox/EH_0.left.jpg', 
    './skybox/EH_0.right.jpg', 
]; 
var reflectionCube = THREE.ImageUtils.loadTextureCube(urls, null); 
reflectionCube.format = THREE.RGBFormat; 
var shader = THREE.ShaderLib[ "cube" ]; 
shader.uniforms[ "tCube" ].value = reflectionCube; 
var material = new THREE.ShaderMaterial({ 
    fragmentShader: shader.fragmentShader, 
    vertexShader: shader.vertexShader, 
    uniforms: shader.uniforms, 
    depthWrite: false, 
    side: THREE.BackSide 
}); 
//End test 

const world = new WHS.Box({ // Create box to contain the 3D space where the game happen 
    geometry: { 
    width: 100, 
    height: 100, 
    depth: 100 
    }, 
    material: material 
}); 


world.addTo(app); 


var material = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: reflectionCube }); 

var points = []; 
for (var deg = 0; deg <= 180; deg += 6) { 

    var rad = Math.PI * deg/180; 
    var point = new THREE.Vector2((0.72 + .08 * Math.cos(rad)) * Math.sin(rad), - Math.cos(rad)); // the "egg equation" 
    //console.log(point); // x-coord should be greater than zero to avoid degenerate triangles; it is not in this formula. 
    points.push(point); 

} 
const sphere = new WHS.Sphere({ 
    geometry: { 
     radius: 100 
    }, 

    material: new THREE.MeshBasicMaterial({ 
     color: 0xffffff 
    }), 

    position: { 
     y: 1, 
     x: 1, 
     z: 0 

    } 
}); 




for (var i = 0; i < 20; i++) { 

    egg_size = Math.random() * 10-2; 
    egg = new WHS.Lathe({ 
       geometry: { 
        points: points 
       }, 
       material: material, 
       position: { 
        y: Math.random() * 100 - 50, 
        x: Math.random() * 100 - 50 , 
        z: Math.random() * 100 - 50 
       }, 
       rotation: { 
        x: Math.random() * Math.PI/2, 
        y: Math.random() * Math.PI/2, 
        z: Math.random() * Math.PI/2 
       }, 
       scale:{ 
        x : egg_size, 
        z : egg_size, 
        y : egg_size 
       } 
       }); 
    egg.addTo(sphere); 
} 

sphere.addTo(world); 

raycaster = new THREE.Raycaster(camera, camera.position); 
var intersects = raycaster.intersectObjects(app.children); 


new WHS.Loop(() => { 
    raycaster.setFromCamera(camera.position , camera); 

    sphere.rotation.x += 0.01; 
    sphere.rotation.y += 0.01; 
    for (var i = 0; i < sphere.children.length-1; i++) { 
     sphere.children[i].rotation.x += 0.05; 
     sphere.children[i].rotation.y += 0.05; 
     sphere.children[i].rotation.z += 0.05; 
    } 
}).start(app); 


// Start the app 
app.start(); 

Answer 1

你在错误的道路建设raycaster（如R87的）。

raycaster = new THREE.Raycaster(camera, camera.position); 

如documentation所示，raycaster构造像这样：

var raycaster = new THREE.Raycaster(); 

的代码的其余部分看上去是正确的，因此我假定这就是问题所在。

这里是working example