Databases
StackOverflow2013
Postsdbo
POThree.js Raycaster not intersecting custom mesh
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POThree.js Raycaster not intersecting custom mesh
    primarykey
    data
    text
    <p>I've built a custom mesh (an octagonal prism) by creating a geometry with vertices, and then building the faces. I'm now trying to add mouseover interaction, however the Raycaster returns no intersections from this mesh. </p> <p>I think it's an issue with the mesh, as other geometries are correctly returned on intersection in the scene.</p> <p>A full example can be seen here: <a href="http://jsfiddle.net/mattheath/3qxzS/" rel="nofollow">http://jsfiddle.net/mattheath/3qxzS/</a></p> <pre><code>var x, y, z, width, height, opacity; // Container object var octagon = new THREE.Object3D(); // Adjust registration point to bottom of object y = y + height / 2; // Default opacity to non-transparent opacity = opacity || 1; // Calculate distance from edge of a cube the octagonal side starts var cornerRadius = ((width - (width / (1 + Math.sqrt(2)))) / 2) * 0.85; // Boundaries var xMin = x - width / 2; var xMax = x + width / 2; var zMin = z - width / 2; var zMax = z + width / 2; var yMin = y; var yMax = y + height; // Calculate vertices var vertices = []; vertices.push( new THREE.Vector3(xMax - cornerRadius, yMin, zMin) ); vertices.push( new THREE.Vector3(xMin + cornerRadius, yMin, zMin) ); vertices.push( new THREE.Vector3(xMin, yMin, zMin + cornerRadius) ); vertices.push( new THREE.Vector3(xMin, yMin, zMax - cornerRadius) ); vertices.push( new THREE.Vector3(xMin + cornerRadius, yMin, zMax) ); vertices.push( new THREE.Vector3(xMax - cornerRadius, yMin, zMax) ); vertices.push( new THREE.Vector3(xMax, yMin, zMax - cornerRadius) ); vertices.push( new THREE.Vector3(xMax, yMin, zMin + cornerRadius) ); vertices.push( new THREE.Vector3(xMax - cornerRadius, yMax, zMin) ); vertices.push( new THREE.Vector3(xMin + cornerRadius, yMax, zMin) ); vertices.push( new THREE.Vector3(xMin, yMax, zMin + cornerRadius) ); vertices.push( new THREE.Vector3(xMin, yMax, zMax - cornerRadius) ); vertices.push( new THREE.Vector3(xMin + cornerRadius, yMax, zMax) ); vertices.push( new THREE.Vector3(xMax - cornerRadius, yMax, zMax) ); vertices.push( new THREE.Vector3(xMax, yMax, zMax - cornerRadius) ); vertices.push( new THREE.Vector3(xMax, yMax, zMin + cornerRadius) ); // Start building Geometry var geometry = new THREE.Geometry(); // Push in all the vertices geometry.vertices.push(vertices[0]); geometry.vertices.push(vertices[1]); geometry.vertices.push(vertices[2]); geometry.vertices.push(vertices[3]); geometry.vertices.push(vertices[4]); geometry.vertices.push(vertices[5]); geometry.vertices.push(vertices[6]); geometry.vertices.push(vertices[7]); geometry.vertices.push(vertices[8]); geometry.vertices.push(vertices[9]); geometry.vertices.push(vertices[10]); geometry.vertices.push(vertices[11]); geometry.vertices.push(vertices[12]); geometry.vertices.push(vertices[13]); geometry.vertices.push(vertices[14]); geometry.vertices.push(vertices[15]); // Add faces, top and bottom need 3 polygons // Bottom face geometry.faces.push(new THREE.Face4(0, 1, 2, 3)); geometry.faces.push(new THREE.Face4(0, 3, 4, 7)); geometry.faces.push(new THREE.Face4(4, 5, 6, 7)); // Top face geometry.faces.push(new THREE.Face4(8, 9, 10, 11)); geometry.faces.push(new THREE.Face4(8, 11, 12, 15)); geometry.faces.push(new THREE.Face4(12, 13, 14, 15)); // And each side geometry.faces.push(new THREE.Face4(0, 1, 9, 8)); geometry.faces.push(new THREE.Face4(1, 2, 10, 9)); geometry.faces.push(new THREE.Face4(2, 3, 11, 10)); geometry.faces.push(new THREE.Face4(3, 4, 12, 11)); geometry.faces.push(new THREE.Face4(4, 5, 13, 12)); geometry.faces.push(new THREE.Face4(5, 6, 14, 13)); geometry.faces.push(new THREE.Face4(6, 7, 15, 14)); geometry.faces.push(new THREE.Face4(7, 0, 8, 15)); var octagonMaterial = new THREE.MeshBasicMaterial( { color: 0xE6E6E6, side: THREE.DoubleSide, opacity: opacity, transparent: true } ); var mesh = new THREE.Mesh(geometry, octagonMaterial); mesh.name = "octagon"; octagon.add( mesh ); // The mesh is then added to the scene </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMatt Heath
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POThree.js Raycaster not intersecting custom mesh
      1. USLee Stemkoski
      1. VTFavorite
    2. VO
      singulars
      1. POThree.js Raycaster not intersecting custom mesh
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POThree.js Raycaster not intersecting custom mesh
      1. USoLeduc
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload