import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";
/**
* Base
*/
// Debug
const gui = new dat.GUI();
// Canvas
const canvas = document.querySelector("canvas.webgl");
// Scene
const scene = new THREE.Scene();
/**
* Objects
*/
const object1 = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 16, 16),
new THREE.MeshBasicMaterial({ color: "#ff0000" })
);
object1.position.x = -2;
const object2 = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 16, 16),
new THREE.MeshBasicMaterial({ color: "#ff0000" })
);
const object3 = new THREE.Mesh(
new THREE.SphereGeometry(0.5, 16, 16),
new THREE.MeshBasicMaterial({ color: "#ff0000" })
);
object3.position.x = 2;
scene.add(object1, object2, object3);
//光线投射Raycaster
// 这个类用于进行raycasting(光线投射)。 光
threejs — 19 raycaster 实现
于 2022-10-18 07:19:44 首次发布
本文深入探讨了如何在 Three.js 中使用 Raycaster 进行3D交互,从基本概念到实际应用,包括点击检测、鼠标移动事件处理等关键步骤。
摘要由CSDN通过智能技术生成