问题描述
限时送ChatGPT账号..在许多视频游戏中,我看到一种模式,当您将鼠标悬停在一个对象上时,它会在对象的 2D 形式周围显示一个漂亮的渐变高光.我设置了一个相当基本的 Three.js 场景,其中有一个球体
In many video games, I see a pattern where, when you mouse over an object, it will show a nice gradient highlight around the 2D form of the object. I set up a fairly basic Three.js scene with a sphere in it
首先,我设置了我的 raycaster 变量:
To begin, I set up my raycaster variables:
var projector = new THREE.Projector();
var mouse2D = new THREE.Vector2(0, 0);
var mouse3D = new THREE.Vector3(0, 0, 0);
然后我做一个raycaster函数
Then I make a raycaster function
document.body.onmousemove = function highlightObject(event) {
mouse3D.x = mouse2D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse3D.y = mouse2D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse3D.z = 0.5;
projector.unprojectVector(mouse3D, camera);
var raycaster = new THREE.Raycaster(camera.position, mouse3D.sub(camera.position).normalize());
var intersects = raycaster.intersectObject(mesh);
if (intersects.length > 0) {
var obj = intersects[0].object; //the object that was intersected
rotate = false;
} else {
rotate = true;
}
}
这将使我获得他们当前悬停的 OBJECT.现在如何在对象周围实际绘制轮廓?
This will get me the OBJECT they are currently hovering hover. Now how would one actually make an outline around the object?
推荐答案
您需要在编码中使用 OutlinePass
.
You need to use OutlinePass
in your coding.
在您的 init()
函数中创建大纲传递
Create outlinepass inside your init()
function
outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass( outlinePass );
然后设置选定对象的轮廓.
And then set the outline selected objects.
if (intersects.length > 0) {
var obj = intersects[0].object; // the object that was intersected
rotate = false;
outlinePass.selectedObjects = obj;
} else {
rotate = true;
}
看看这个例子:https://threejs/examples/?q=out#webgl_postprocessing_outline
这篇关于在 Three.js 中勾勒出一个 3d 对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论