我正在使用 Three.js 尝试 WebGL。我是初学者,我决定尝试类似于 this 的东西.我已经能够实现其中的大部分。我目前面临的问题是在向左移动 Canvas 后更新光线转换器和对象。每当我在 Canvas 移动后悬停时,它不会反射(reflect)在球体上,除非我将鼠标向东移动,离球体有一段距离。我查看了几篇文章,我尝试移动相机和球体位置但无济于事。
代码如下:
let scene, camera, renderer;
var raycaster, mouse, INTERSECTED;
let SCREEN_WIDTH = window.innerWidth
let SCREEN_HEIGHT = window.innerHeight
let canvas = document.getElementById('scene')
let objects = []
init();
animate();
$(".hamburger").on("click", function () {
$(".hamburger").toggleClass("active");
$("#scene").toggleClass("slide-left");;
});
function init() {
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setClearColor(0x000000);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
100, SCREEN_WIDTH / SCREEN_HEIGHT, .1, 10000);
camera.position.set(0, 0, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var geometry = new THREE.SphereGeometry(5, 32, 32);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
sphere = new THREE.Mesh(geometry, material);
objects.push(sphere)
scene.add(sphere);
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mousemove', onHover, false);
document.addEventListener('click', onClick, false);
window.addEventListener('resize', render, false);
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.set(50, 3, 5);
scene.add(light);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX / SCREEN_WIDTH) * 2 - 1;
mouse.y = - (event.clientY / SCREEN_HEIGHT) * 2 + 1;
}
function onClick() {
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
console.log("I was click: ", intersects)
}
function onHover() {
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
if (INTERSECTED) INTERSECTED.remove(INTERSECTED.sphere);
INTERSECTED = intersects[0].object//.geometry;
var geometry = new THREE.SphereGeometry(5.1, 32, 32);
var material = new THREE.MeshBasicMaterial({
color: 0xff5521,
opacity: 0.01
});
sphere1 = new THREE.Mesh(geometry, material);
INTERSECTED.sphere = sphere1
INTERSECTED.add(sphere1);
}
} else {
if (INTERSECTED) INTERSECTED.remove(INTERSECTED.sphere);
INTERSECTED = null;
}
}
function render() {
sphere.rotation.x += 0.01
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
};
body {
height: 100%;
padding: 0;
margin: 0;
}
#scene {
position: relative;
height: 100%;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.bar {
display: block;
height: 3px;
width: 30px;
background-color: #00ff00;
margin: 5px auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.hamburger {
position: fixed;
right: 40px;
top: 20px;
z-index: 3;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.hamburger.active .top {
-webkit-transform: translateY(7px) rotateZ(45deg);
-moz-transform: translateY(7px) rotateZ(45deg);
-ms-transform: translateY(7px) rotateZ(45deg);
-o-transform: translateY(7px) rotateZ(45deg);
transform: translateY(7px) rotateZ(45deg);
}
.hamburger.active .bottom {
-webkit-transform: translateY(-10px) rotateZ(-45deg);
-moz-transform: translateY(-10px) rotateZ(-45deg);
-ms-transform: translateY(-10px) rotateZ(-45deg);
-o-transform: translateY(-10px) rotateZ(-45deg);
transform: translateY(-10px) rotateZ(-45deg);
}
.hamburger.active .middle {
width: 0;
}
.slide-left {
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
<canvas id="scene"></canvas>
<div class="hamburger">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
最佳答案
1) 请包含您的 fiddle 的完整代码。当(不是如果)你的 fiddle 消失时,你的问题的上下文和这个答案也会消失。
2) 您将鼠标事件附加到文档,而不是移动的部分。改用这个:
canvas.addEventListener('mousemove', onDocumentMouseMove, false);
canvas.addEventListener('mousemove', onHover, false);
3) clientX
/clientY
不要表现得像你期望的那样。使用 offsetX
/offsetY
获取相对于 Canvas 的坐标(前提是您遵循了步骤 2)。 (不要担心 MDN 说它是实验性的,它在支持 WebGL 的浏览器中工作得很好。)
mouse.x = (event.offsetX / SCREEN_WIDTH) * 2 - 1;
mouse.y = - (event.offsetY / SCREEN_HEIGHT) * 2 + 1;
关于javascript - CSS 转换后更新 Three.js Raycaster,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45535513/