Question

我已经使用OBJLoader通过Blender加载了3D地形。我还创建了一个网格物体（下图为黄色指针），当它在地形上时我想跟随鼠标。我尝试使用raycaster方法，但由于无法在加载程序之外访问它，我不知道确切将其应用于.obj的方法。

当鼠标跟随时，如何使我的指针（黄色网格物体）粘在我的地形上（加载的.obj）？

请帮助共有three.js新手...

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );

var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.z = 150;
camera.position.y=300;
camera.position.x=350;

var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );

var controls= new THREE.OrbitControls(camera,renderer.domElement);
controls.enableDamping=true;
controls.campingFactor=0.25;
controls.enableZoom=true;

controls.minDistance= 1;
controls.maxDistance=3000;

controls.minPolarAngle= -Math.PI/2;
controls.maxPolarAngle= Math.PI/2;

var terrain;
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('models/terrain.mtl',
    (materials) => {
        materials.preload();
    
        var loader = new THREE.OBJLoader();
        loader.setMaterials(materials);
        loader.load(
                'models/terrain.obj',
        function ( object ) {
        terrain = object;
        scene.add( terrain );
        });
    }
); 


var Cylindergeometry = new THREE.CylinderGeometry( 5, 0, 8, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( Cylindergeometry, material );
  
var Torusgeometry = new THREE.TorusGeometry( 7, 0.5, 8, 6);
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( Torusgeometry, material);
Torusgeometry.rotateX(1.5708);
Torusgeometry.translate(0,-4.5,0);
  //Merge the two parts to make it one mesh (yellow pivot)
var PivotGeometry = new THREE.Geometry();
PivotGeometry.merge(Cylindergeometry);
PivotGeometry.merge(Torusgeometry);
var pivot = new THREE.Mesh(PivotGeometry, material);
scene.add(pivot);  



// Trying to Raycast the terrain to make the pivot follow the mouse while it's on it 
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove( event ) {

    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );

    // See if the ray from the camera into the world hits one of our meshes
    var intersects = raycaster.intersectObject( terrain,true );

    // Toggle rotation bool for meshes that we clicked
    if ( intersects.length > 0 ) {
        
        pivot.position.set( 0, 0, 0 );
        pivot.lookAt( intersects[ 0 ].face.normal );

        pivot.position.copy( intersects[ 0 ].point );

    }

}

//Met à jour l'affichage de la scène
var animate = function () {
    requestAnimationFrame( animate );

    renderer.render( scene, camera );
}; 

animate();

My loaded .obj terrain

Answer 1

您的代码中包含以下行：

var intersects = raycaster.intersectObjects( object );

我看不到object作为变量在哪里声明。我建议您在模块作用域中声明此变量，为它分配已加载的OBJ文件，然后改用以下代码：

var intersects = raycaster.intersectObject( object, true );

OBJLoader.load()返回类型为THREE.Group的对象，在某种意义上，该对象是容纳任意数量的网格的容器。因此，您要递归进行光线投射。

Three.js |通过Blender射线导入导入的.obj模型

1 个答案: