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

你以错误的方式构建Subject（从r87开始）。

raycaster

如documentation所示，raycaster = new THREE.Raycaster(camera, camera.position);的构造如下：

raycaster

其余代码看起来是正确的，所以我认为这就是问题所在。

这里是working example

Raycaster with Three.js和whitestormJS

1 个答案: