[英]outline a 3d object in three.js
在许多视频游戏中,我看到一种模式,当您将鼠标悬停在对象上时,它将在对象的2D形式周围显示漂亮的渐变高光。 我建立了一个基本的Three.js场景,其中包含一个球体
首先,我设置我的raycaster变量:
var projector = new THREE.Projector();
var mouse2D = new THREE.Vector2(0, 0);
var mouse3D = new THREE.Vector3(0, 0, 0);
然后我做一个raycaster函数
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;
}
}
这将使我获得他们当前正在悬停的对象。 现在,人们将如何实际上围绕对象绘制轮廓?
您需要在编码中使用OutlinePass
。
在init()
函数中创建outlinepass
outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass( outlinePass );
然后设置选定对象的轮廓。
if (intersects.length > 0) {
var obj = intersects[0].object; // the object that was intersected
rotate = false;
outlinePass.selectedObjects = obj;
} else {
rotate = true;
}
看一下这个例子: https : //threejs.org/examples/?q = out #webgl_postprocessing_outline
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.