使用 three.js 使导入的 3d 对象可点击？

Question

简而言之，我开发了一个小型的 three.js 太阳系项目，我在其中导入了每个 pl.net 的模型。 我想让每个 pl.net 都可以点击，最终将相机放大到所述点击的 pl.net 上，并显示它的最新图像（图像将显示在 3d 模型旁边）。

所以基本上我的问题是：如何使导入的模型可点击以向它们添加功能？

我试图添加光线投射，但我没有任何运气，而且有点乱。

到目前为止，这是我的代码：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20000);
scene.add(camera)

const directionalLight = new THREE.DirectionalLight(0xffffff, 0);
directionalLight.position.set(0,1,0);
scene.add(directionalLight)

renderer.setClearColor(0x000000)
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.set(-700, 1000, 600);

// Loader

const loader = new GLTFLoader();

// sun

loader.load( 'sun.glb', function ( gltf ) {
  console.log(gltf)
  let sun = gltf.scene;
  sun.scale.set(0.2, 0.2, 0.2);
  sun.position.set(-300, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      sun.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// Mercury

loader.load( 'mercury.glb', function ( gltf ) {
  console.log(gltf)
  let mercury = gltf.scene;
  mercury.scale.set(0.03, 0.03, 0.03);
  mercury.position.set(-100, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      mercury.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// venus

loader.load( 'venus.glb', function ( gltf ) {
  console.log(gltf)
  let venus = gltf.scene;
  venus.scale.set(0.04, 0.04, 0.04);
  venus.position.set(30, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      venus.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// earth

loader.load( 'earth.glb', function ( gltf ) {
  console.log(gltf)
  let earth = gltf.scene;
  earth.scale.set(0.04, 0.04, 0.04);
  earth.position.set(140, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      earth.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// mars

loader.load( 'mars.glb', function ( gltf ) {
  console.log(gltf)
  let mars = gltf.scene;
  mars.scale.set(0.015, 0.015, 0.015);
  mars.position.set(230, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      mars.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// juptier

loader.load( 'jupiter.glb', function ( gltf ) {
  console.log(gltf)
  let jupiter = gltf.scene;
  jupiter.scale.set(0.08, 0.08, 0.08);
  jupiter.position.set(350, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      jupiter.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// saturn

loader.load( 'saturn.glb', function ( gltf ) {
  console.log(gltf)
  let saturn = gltf.scene;
  saturn.scale.set(0.07, 0.07, 0.07);
  saturn.position.set(530, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      saturn.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// uranus

loader.load( 'uranus.glb', function ( gltf ) {
  console.log(gltf)
  let uranus = gltf.scene;
  uranus.scale.set(0.05, 0.05, 0.05);
  uranus.position.set(700, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      uranus.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// neptune

loader.load( 'neptune.glb', function ( gltf ) {
  console.log(gltf)
  let neptune = gltf.scene;
  neptune.scale.set(0.045, 0.045, 0.045);
  neptune.position.set(850, 0, 0);
  function animate() {
    requestAnimationFrame(animate);
      neptune.rotation.y += 0.002;
    renderer.render(scene, camera);
  }
    scene.add( gltf.scene );
  animate()
}, undefined, function ( error ) {

    console.error( error );
} );

// stars

function addstar() {
  const geometry = new THREE.SphereGeometry(0.25, 24, 24);
  const material = new THREE.MeshStandardMaterial({ color: 0xffffff })
  const star = new THREE.Mesh(geometry, material);
  
  const [x, y, z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(3000));

  star.position.set(x,y,z);
  scene.add(star)

}

Array(1000).fill().forEach(addstar)

// background

const background = new THREE.TextureLoader().load('background.jpg')

scene.background = background

//controls

let controls = new OrbitControls(camera, renderer.domElement)
controls.update()

// lighting

let light = new THREE.AmbientLight(0xffffff, 2)
scene.add(light)

// Resize

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}



// Event Listener

window.addEventListener( 'resize', onWindowResize, false );


// animate

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}

animate();

Answer 1

针对场景中模型/网格的光线投射在各种 threejs 示例中得到了很好的记录。 查看raycaster 文档，特别是 raycast against meshes 示例。

另外，作为一个改进建议：尝试从一开始就构建你的代码，否则所有的 threejs 东西很快就会变得混乱。 尝试创建一个通用的 function 来加载模型并避免大块的复制和粘贴代码。

另外，请始终分享您迄今为止为做自己想做的事情所做的努力。 在这种情况下，您应该提供光线投射代码片段以及错误消息等。