Raycaster inside box with BackSide material doesn’t work

Description of the problem

The rayCaster does not work when the ray is made inside the box (initially started a thread on stackoverflow about this issue).

I have an example here: https://jsfiddle.net/manumid/7sqd6xzs/7/ (extracted from #3969).

The box materials are THREE.BackSide, and I am using MultiMaterial because I need to represent a room with different textures. The material is made like this:

var materials = [
    new THREE.MeshBasicMaterial({color:0xff0000,
                                 side:THREE.BackSide}), // Right
    new THREE.MeshBasicMaterial({color:0x00ff00,
                                 side:THREE.BackSide}), // Left
    new THREE.MeshBasicMaterial({color:0x0000ff,
                                 side:THREE.BackSide}), // Top
    new THREE.MeshBasicMaterial({color:0x222222, 
                                 side:THREE.BackSide}), // Bottom
    new THREE.MeshBasicMaterial({color:0xffff00, 
                                 side:THREE.BackSide}), // Back
    new THREE.MeshBasicMaterial({color:0x00ffff, 
                                 side:THREE.BackSide}), // Front

var cubeSidesMaterial = new THREE.MultiMaterial(materials);
var roomGeometry = new THREE.BoxGeometry(4, 4, 4);

var newRoom = new THREE.Mesh(roomGeometry, cubeSidesMaterial);

When the ray is made outside the box, there is intersection, but against the external faces of it (although they have no textures!). This can be seen with the distance of the intersection.

Anyway, as a temporal solution, I can make the room with individual Planes joined on a Group.

Apparently, Raycaster does not support MultiMaterial in three.js r.84.

Thank you!

Three.js version
  • Dev
  • r84
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
  • All of them
  • Windows
  • Linux
  • Android
  • IOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

1 thought on “Raycaster inside box with BackSide material doesn’t work

Comments are closed.