我是 Threejs 的新手，现在正在尝试让这项工作开始......
我正在将带有映射（jpg）的 GLTF 加载到 Threejs 中。
我找不到使加载的模型可点击的方法。
您能否展示如何使该模型可点击（单击或双击并触摸） 并调用 js 函数？
这是我的场景：
function sendMail() {
//$('#myModal').modal('show');
alert('click');
}
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/loaders/GLTFLoader.js';
let model;
let object = new THREE.Object3D();
let raycaster, mouse, intersects, gltfobject;
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas , antialias: true});
const fov = 60;
const aspect = 1; // the canvas default
const near = 0.6;
const far = 1200;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 10, 20);
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 5, 0);
controls.update();
const scene = new THREE.Scene();
scene.background = new THREE.Color('black');
//raycaster = new THREE.Raycaster();
//mouse = new THREE.Vector2();
//let pickableMeshes = [];
{
const skyColor = 0xB1E1FF; // light blue
const groundColor = 0xFFFFFF; // brownish orange
const intensity = 0.9;
const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
scene.add(light);
}
{
const color = 0xFFFFFF;
const intensity = 0.3;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(5, 10, 2);
scene.add(light);
scene.add(light.target);
}
function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
// compute a unit vector that points in the direction the camera is now
// in the xz plane from the center of the box
const direction = (new THREE.Vector3())
.subVectors(camera.position, boxCenter)
.multiply(new THREE.Vector3(1, 0, 1))
.normalize();
// move the camera to a position distance units way from the center
// in whatever direction the camera was from the center already
camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));
// pick some near and far values for the frustum that
// will contain the box.
camera.near = boxSize / 100;
camera.far = boxSize * 100;
camera.updateProjectionMatrix();
// point the camera to look at the center of the box
camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
}
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight); // Update size
camera.aspect = window.innerWidth / window.innerHeight; // Update aspect ratio
camera.updateProjectionMatrix(); // Apply changes
});
{
const gltfLoader = new GLTFLoader();
gltfLoader.load('my_test_id_card_app.gltf', (gltf) => {
const root = gltf.scene;
scene.add(root);
// compute the box that contains all the stuff
// from root and below
const box = new THREE.Box3().setFromObject(root);
const boxSize = box.getSize(new THREE.Vector3()).length();
const boxCenter = box.getCenter(new THREE.Vector3());
// set the camera to frame the box
frameArea(boxSize * 2, boxSize, boxCenter, camera);
scene.rotation.z = 20;
//scene.rotation.x -= 0.002;
scene.rotation.y = 20;
// update the Trackball controls to handle the new size
controls.maxDistance = boxSize * 10;
controls.target.copy(boxCenter);
controls.update();
});
}
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render() {
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.setPixelRatio(window.devicePixelRatio);
// Update trackball controls
controls.update();
// Constantly rotate box
scene.rotation.z -= 0.002;
scene.rotation.x -= 0.004;
scene.rotation.y -= 0.006;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
您需要使用像
pointerupRaycaster这是相关代码：
renderer.domElement.addEventListener('pointerup', (event) => {
mouse.x = (event.clientX / renderer.domElement.clientWidth - renderer.domElement.getBoundingClientRect().x) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.clientHeight + renderer.domElement.getBoundingClientRect().y) * 2 + 1;
console.log(mouse.x, mouse.y);
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
console.log("Model clicked.")
}
});
它基于这个 ThreeJS 示例。
首先我们需要将鼠标坐标映射到 (1,1) (1, -1) (-1, -1) 和 (-1, 1) 之间的矩形。
然后我们使用映射的鼠标坐标到
setFromCamera之后使用光线投射器找到与光线相交的所有物体
raycaster.intersectObjects(scene.children, true)recursive中的true设置为
intersectObjects，因为我们还想检测嵌套对象上的点击。
最后这是一个完整的 JSFiddle。
这是使用最新版本的 Three.js 加载 gltf 模型并在选择该模型时显示消息的最快方法。
<!DOCTYPE html>
<html>
<head>
<title>Three.js GLTF Model and Raycaster Example</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/examples/js/loaders/GLTFLoader.js"></script>
<script>
// Set up the scene, camera, and renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a grid
var gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);
// Create a raycaster for interaction
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// Load GLTF model
var loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', function (gltf) {
var model = gltf.scene;
scene.add(model);
// Position and scale the model
model.position.set(0, 0, 0);
model.scale.set(1, 1, 1);
});
// Handle mouse click
function onMouseClick(event) {
// Calculate mouse position in normalized device coordinates
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// Update the picking ray with the camera and mouse position
raycaster.setFromCamera(mouse, camera);
// Check for intersections
var intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
alert('Clicked on the model!');
}
}
// Add event listener for mouse click
window.addEventListener('click', onMouseClick, false);
// Position the camera
camera.position.z = 5;
// Render the scene
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>