three.js - 鼠标悬停时无法更改网格颜色
问题描述
当鼠标悬停时,我正在尝试更改网格的颜色。当鼠标“离开”网格时,网格应返回其正常颜色。
这是我尝试过的:
init();
animate(); //calling function that does all the rendering
//GLOBAL VARS
var scene, camera, renderer;
var raycaster, mouse;
// once everything is loaded, we run our Three.js stuff.
function init() {
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
//SET CAMERA
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5;
// create a render and set the size
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor("#e5e5e5"); //background color
renderer.setSize(window.innerWidth, window.innerHeight); //size of renderer
//bind rendered to the dom element
document.getElementById("WebGL-output").appendChild(renderer.domElement);
//RAYCASTER
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
// create a cube
var cubeGeometry = new THREE.BoxGeometry(20, 0.00001, 20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffff00
}); //0xF7F7F7 = gray
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// position the cube
cube.position.x = 0;
cube.position.y = 3;
cube.position.z = 0;
/*
//USEFUL METHODS
cube.rotation.x +=0.5
cube.scale.x +=0.5
*/
// add the cube to the scene
scene.add(cube);
/* RENDERING A PLANE
var geometry = new THREE.PlaneGeometry( 20, 20);
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
plane.rotation.set(80,0,0);
scene.add( plane );
//plane.position.x = 2;
*/
//ADDING LIGHTS
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// when the mouse moves, call the given function
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onDocumentMouseMove(event) {
// the following line would stop any other event handler from firing
// (such as the mouse's TrackballControls)
// event.preventDefault();
// update the mouse variable
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
function animate() {
render();
}
function render() {
// update the picking ray with the camera and mouse position
raycaster.setFromCamera(mouse, camera);
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects(scene.children);
for (var i = 0; i < intersects.length; i++) {
intersects[i].object.material.color.set(0xff0000);
}
requestAnimationFrame(animate); //pauses when user switches tab
renderer.render(scene, camera);
}
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
<div id="WebGL-output"></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.min.js"></script>
不幸的是,当渲染场景时,网格被渲染为红色,而不是初始颜色为黄色。
解决方案
当您创建时mouse = new THREE.Vector2()
,您的鼠标坐标将在 处启动(0, 0)
。这意味着第一次渲染帧时,会在屏幕中心触发光线投射,并将材质更改为0xff0000
.
如果您希望光线投射“离屏”,您应该使用[-1, 1]
范围之外的值启动该向量:THREE.Vector2(100, 100)
,这样您就不会冒意外击中对象并将其变为红色的风险。
推荐阅读
- java - Android java更新所有类中的相同数组对象
- google-sheets - 计算 Google 电子表格中特定单词的出现次数
- angular - Angular TypeScript 最佳实践
- c# - 删除文本文件中包含 C# 中另一个文件中的文本的所有行
- javascript - 使用 tmdb api 加载页面非常缓慢
- html - 对于像 Windows 10 这样的响应式计算器布局,Grid 可以同时用于宽度和高度吗?
- javascript - 寻找 Netflix 视频中的某个点
- node.js - Node Express Handlebars 和高 CPU 使用率
- c - 对包含字符串的链表进行排序
- android - 在Android中使用客户端ID和客户端密钥的Retrofit2 OAuth2 - 401未经授权的错误