在使用THREE.js库创建立方体时,可以通过以下步骤实现在悬停时高亮显示立方体表面:
以下是一个示例代码,演示了如何使用THREE.js在悬停时高亮显示立方体表面:
// 引入THREE.js库
import * as THREE from 'three';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // 原始材质
const highlightMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // 高亮材质
// 创建立方体并添加到场景中
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 5);
scene.add(light);
// 监听鼠标移动事件
document.addEventListener('mousemove', onMouseMove, false);
// 鼠标移动事件处理函数
function onMouseMove(event) {
// 计算鼠标在屏幕上的位置
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// 创建一个射线(Raycaster)从相机位置发射,检测与立方体相交的表面
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(cube);
// 如果与立方体相交,则将相交的表面的材质设置为高亮材质,否则恢复为原始材质
if (intersects.length > 0) {
cube.material = highlightMaterial;
} else {
cube.material = material;
}
}
// 渲染函数,每帧调用一次,更新场景和相机
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
这个示例代码使用THREE.js库创建了一个立方体,并在鼠标悬停时高亮显示立方体表面。你可以根据需要修改材质、光源和动画效果来适应你的项目。同时,你可以参考腾讯云的云计算产品文档来了解更多关于云计算的知识和相关产品。
领取专属 10元无门槛券
手把手带您无忧上云