Starting from the example
http://threejs.live/#/webgl_interactive_buffergeometry
I created a simple example with THREE.CylinderBufferGeometry ().
However, this is indexed in contrast to the example given.
https://github.com/mrdoob/three.js/blob/master/src/geometries/CylinderGeometry.js
Then I still use OrbitControls.js.
I also used multi material, THREE.DoubleSide, THREE.FrontSide, THREE.BackSide.
Only the front side is detected. Even with material THREE.BackSide!
The script also contains a hidden custom geometry. The result is identical.
I’ve tried some things, no change - where’s my fault?
Try it out for yourself http://threejs.hofk.de/test/raycasterExample.html
<!DOCTYPE html>
<html lang="en">
<head>
<title> raycast BufferGeometry</title>
<meta charset="utf-8">
</head>
<body>
OrbitControls & raycast / indexed BufferGeometry / based on http://threejs.live/#/webgl_interactive_buffergeometry
<div id="container"></div>
<script src="three.min.89.js"></script>
<script src="OrbitControls.js"></script>
<script>
var container, camera, scene, renderer, raycaster, mouse, mesh, line;
init();
animate();
//................
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 35000 );
camera.position.set( -100, 250, 300 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xdddddd );
scene.add( new THREE.AmbientLight( 0x888888 ) );
var light1 = new THREE.DirectionalLight( 0xffffff, 0.8 );
light1.position.set( 1, 1, 1 );
scene.add( light1 );
var light2 = new THREE.DirectionalLight( 0xffffff, 0.6 );
light2.position.set( 0, -1, 0 );
scene.add( light2 );
controls = new THREE.OrbitControls(camera);
var geometry = new THREE.CylinderBufferGeometry( 40, 20, 40, 5, 3, false, 0, 5.9);
/* // a custom indexed BufferGeometry
var geometry = new THREE.BufferGeometry();
geometry.faceIndices = new Uint32Array( [ 0, 4, 5, 0, 5, 1, 1, 5, 6, 1, 6, 2, 2, 6, 7, 2, 7, 3, 4, 8, 9, 4, 9, 5, 5, 9, 10, 5, 10, 6, 6, 10, 11, 6, 11, 7, 8, 12, 13, 8, 13, 9, 9, 13, 14, 9, 14, 10, 10, 14, 15, 10, 15, 11 ] );
geometry.vertices = new Float32Array( [ 0.1, -0.5, 0, 0.2, -0.2, 0, 0.2, 0.1, 0, 0.3, 0.5, 0, -0.1, -0.5, -0.2, -0.2, -0.2, -0.2, -0.2, 0.1, -0.3, -0.2, 0.5, -0.3, -0.1, -0.5, 0.1, -0.2, -0.2, 0.1, -0.2, 0.1, 0.2, -0.2, 0.5, 0.2, 0.1, -0.5, 0, 0.2, -0.2, 0, 0.2, 0.1, 0, 0.3, 0.5, 0 ] );
geometry.normals = new Float32Array( [ 0.9, -0.2, -0.1, 0.9, -0.2, -0.1, 0.9, -0.2, 0, 0.9, -0.2, 0, -0.5, -0.2, -0.9, -0.5, -0.2, -0.9, -0.5, -0.2, -0.9, -0.5, -0.2, -0.9, -0.5, -0.2, 0.8, -0.5, -0.2, 0.8, -0.5, -0.2, 0.8, -0.5, -0.2, 0.8, 0.9, -0.2, -0.1, 0.9, -0.2, -0.1, 0.9, -0.2, 0, 0.9, -0.2, 0 ] );
//geometry.uvs = new Float32Array( [ 0, 0, 0, 0.3, 0, 0.6, 0, 1, 0.3, 0, 0.3, 0.3, 0.3, 0.6, 0.3, 1, 0.6, 0, 0.6, 0.3, 0.6, 0.6, 0.6, 1, 1, 0, 1, 0.3, 1, 0.6, 1, 1 ] );
//geometry.colors = new Float32Array( [101, 105, 200, 102, 102, 200, 102, 101, 200, 103, 105, 200, 101, 105, 102, 102, 102, 102, 102, 101, 103, 102, 105, 103, 101, 105, 101, 102, 102, 101, 102, 101, 102, 102, 105, 102, 101, 105, 200, 102, 102, 200, 102, 101, 200, 103, 105, 200 ] );
geometry.setIndex( new THREE.BufferAttribute( geometry.faceIndices, 1 ) );
//geometry.addAttribute( 'position', new THREE.BufferAttribute( geometry.vertices, 3 ).setDynamic( true ) );
geometry.addAttribute( 'position', new THREE.BufferAttribute( geometry.vertices, 3 ) );
//geometry.addAttribute( 'normal', new THREE.BufferAttribute( geometry.normals, 3 ).setDynamic( true ) );
geometry.addAttribute( 'normal', new THREE.BufferAttribute( geometry.normals, 3 ) );
//geometry.addAttribute( 'uv', new THREE.BufferAttribute( geometry.uvs, 2 ) );
//geometry.addAttribute( 'color', new THREE.BufferAttribute( geometry.colors, 3 ) );
var geoGrp = [ 0, 3, 0, 3, 3, 0, 6, 3, 0, 9, 3, 0, 12, 3, 0, 15, 3, 0, 18, 3, 1, 21, 3, 1, 24, 3, 1, 27, 3, 1, 30, 3, 1, 33, 3, 1, 36, 3, 2, 39, 3, 2, 42, 3, 2, 45, 3, 2, 48, 3, 2, 51, 3, 2 ];
for ( var f = 0, p = 0; f < 18; f ++, p += 3 ) { geometry.addGroup( geoGrp[ p ], geoGrp[ p + 1 ], geoGrp[ p + 2 ] ); }
geometry.scale( 100, 100,100 ); //!!!!!!!! scale !!!!!!!!!!
*/ ///////////////////////////////////////////////////////////////
var material = [
new THREE.MeshPhongMaterial( {
side: THREE.DoubleSide, color: 0xff2222, specular: 0xee1111, shininess: 150, // vertexColors: THREE.VertexColors,
} ),
new THREE.MeshPhongMaterial( {
side: THREE.FrontSide, color: 0x22ff22, specular: 0x11ee11, shininess: 150, // vertexColors: THREE.VertexColors,
} ),
new THREE.MeshPhongMaterial( {
side: THREE.BackSide, color: 0x2222ff, specular: 0x1111ee, shininess: 150, // vertexColors: THREE.VertexColors,
} )
];
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( 4 * 3 ), 3 ) );
var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
line = new THREE.Line( geometry, material );
scene.add( line );
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = Date.now() * 0.001;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObject( mesh );
if ( intersects.length > 0 ) {
var intersect = intersects[ 0 ];
var face = intersect.face;
var linePosition = line.geometry.attributes.position;
var meshPosition = mesh.geometry.attributes.position;
linePosition.copyAt( 0, meshPosition, face.a );
linePosition.copyAt( 1, meshPosition, face.b );
linePosition.copyAt( 2, meshPosition, face.c );
linePosition.copyAt( 3, meshPosition, face.a );
mesh.updateMatrix();
line.geometry.applyMatrix( mesh.matrix );
line.visible = true;
} else {
line.visible = false;
}
renderer.render( scene, camera );
}
</script>
</body>
</html>