当前位置:   article > 正文

第七章、精讲投射光线实现三维物体交互;

第七章、精讲投射光线实现三维物体交互;

一、什么是光线投射 Raycaster?

       光线投射用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体)。

二、完整代码;

  1. // 目标:raycaster 射线投射器
  2. // 一、导入第三方类库
  3. // 导入three.js
  4. import * as THREE from "three";
  5. // 导入轨道控制器
  6. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  7. // 二、创建场景、相机
  8. // 1.创建场景
  9. const scene = new THREE.Scene();
  10. // 2、创建相机
  11. const camera = new THREE.PerspectiveCamera(
  12. 75,
  13. window.innerWidth / window.innerHeight,
  14. 0.1,
  15. 300
  16. );
  17. // 3.设置相机位置
  18. camera.position.set(0, 0, 20);
  19. scene.add(camera);
  20. // 三、创建1000个立方几何体
  21. // 1.正方体几何体
  22. const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
  23. // 2.几何体材质
  24. const material = new THREE.MeshBasicMaterial({
  25. wireframe: true,
  26. });
  27. // 3.选中物体的几何体材质
  28. const redMaterial = new THREE.MeshBasicMaterial({
  29. color: "#ff0000",
  30. });
  31. // 4、创建1000个立方体
  32. let cubeArr = [];
  33. for (let i = -5; i < 5; i++) {
  34. for (let j = -5; j < 5; j
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/在线问答5/article/detail/926332?site
推荐阅读
相关标签
  

闽ICP备14008679号