我需要在悬停时放大对象苏...</desc> <question vote="0"> <p>我想要这样的东西：</p> <p><a href="https://drive.google.com/file/d/1v_4M59Ny93QwT52unfM9N_tfzo3xRAq1/view?usp=share_link" rel="nofollow noreferrer">https://drive.google.com/file/d/1v_4M59Ny93QwT52unfM9N_tfzo3xRAq1/view?usp=share_link</a></p> <p>这是我的代码</p> <pre><code><!DOCTYPE html> <html> <head> <title>Three.js JPG Background with Custom Position</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script> <script src="./js/tween.js/dist/tween.umd.js"></script>  <style> body { overflow: hidden; } canvas { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } </style> </head> <body> <script> // Initialize Three.js scene var scene = new THREE.Scene(); var camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1,); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Load the Main BG texture var mainBg = new THREE.TextureLoader().load("http://127.0.0.1:5500/img/main-bg.jpg"); // Create a full-screen plane to display the texture var geometry1 = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight); var material1 = new THREE.MeshBasicMaterial({ map: mainBg }); var plane1 = new THREE.Mesh(geometry1, material1); plane1.position.set(0, 0, 0) scene.add(plane1); // Create a full-screen plane to display the texture var frame1 = new THREE.TextureLoader().load("http://127.0.0.1:5500/img/frame1.png"); var geometry2 = new THREE.PlaneGeometry(90, 110); var material2 = new THREE.MeshBasicMaterial({ map: frame1 }); var plane2 = new THREE.Mesh(geometry2, material2); plane2.position.set(-190, 130, .1); scene.add(plane2); // Check if mouse is over the child asset var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); var zoomed = false; // Mouse move function function onMouseMove(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects([plane2]); if (intersects.length > 0 && !zoomed) { zoomed = true; camera.position.set(plane2.position.x, plane2.position.y, plane2.position.z); camera.lookAt(plane2.position.x, plane2.position.y, plane2.position.z); } else if (intersects.length === 0 && zoomed) { zoomed = false; camera.position.set(0, 0, 5); camera.lookAt(new THREE.Vector3(0, 0, 0)); } } // Mouse move function calling on moving mouse document.addEventListener('mousemove', onMouseMove, false); window.addEventListener('mousedown', function () { gsap.to(camera.position, { z: 15, duration: 15 }); }) // Render loop function render() { camera.position.z = 5; requestAnimationFrame(render); renderer.render(scene, camera); } render(); </script> </body> </html> </code></pre> <p>资产： <a href="https://i.stack.imgur.com/lBvK8.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2xCdks4LnBuZw==" alt="frame1"/></a></p> <p>和</p> <p><a href="https://i.stack.imgur.com/Lwkcz.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0x3a2N6LmpwZw==" alt="main-bg"/></a></p> <p>我通过悬停在屏幕中央制作了第 1 帧，但无法让相机放大它。我试过 tween，但我认为我的代码基础有问题抱歉，我是新手，这是我的第一个 threejs 项目</p> </question> <answer tick="false" vote="0"> <p>您可以在画布上应用<pre><code>mousemove</code></pre>事件并使用<pre><code>event.clientX</code></pre>或<pre><code>event.clientY</code></pre>读取实时鼠标指针值。然后可以在侦听器中使用这些值来更新 <pre><code>camera.position.z</code></pre> 的值以更改缩放。</p> </answer> </body></html> - three.js - SO中文参考