I have several objects in the scene leaving the outcome of the .mesh of Three.js ... I separate ways but not how.
I want to put a boundary to clearly see the shapes. http://www.subirimagenes.com/imagen-captura-9427322.html
extrude_geometria[i]=new THREE.ExtrudeGeometry(forma_figura[i],datos_extrusion);
materialFront[i] = new THREE.MeshBasicMaterial( { color: "#FF0000"} );
municipios[i] = new THREE.Mesh( extrude_geometria[i], materialFront[i] );
Composer and Outline pass are needed. See my example below which is a simplification of the official example at https://threejs.org/examples/?q=out#webgl_postprocessing_outline
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - post processing - Outline Pass</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="three.js"></script>
<script src="CopyShader.js"></script>
<script src="FXAAShader.js"></script>
<script src="EffectComposer.js"></script>
<script src="RenderPass.js"></script>
<script src="ShaderPass.js"></script>
<script src="OutlinePass.js"></script>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Outline Pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
</div>
<script>
var container, camera, scene, renderer, composer, effectFXAA, outlinePass;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var width = window.innerWidth || 1;
var height = window.innerHeight || 1;
renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
camera.position.z = 8;
camera.position.x = 0;
scene = new THREE.Scene();
var light = new THREE.DirectionalLight(0xddffdd, 0.4);
light.position.z = 1;
light.position.y = 1;
light.position.x = 1;
scene.add(light);
var floorMaterial = new THREE.MeshLambertMaterial();
floorMaterial.side = THREE.DoubleSide;
var floorGeometry = new THREE.PlaneBufferGeometry(12, 12);
var floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
floorMesh.rotation.x -= Math.PI * 0.5;
floorMesh.position.y -= 1.5;
scene.add(floorMesh);
// postprocessing
composer = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass(outlinePass);
effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
effectFXAA.renderToScreen = true;
composer.addPass(effectFXAA);
window.addEventListener('mousemove', onTouchMove);
window.addEventListener('touchmove', onTouchMove);
function onTouchMove(event) {
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects([scene], true);
if (intersects.length > 0) {
var selectedObject = intersects[0].object;
outlinePass.selectedObjects = [selectedObject];
}
}
}
function animate() {
requestAnimationFrame( animate );
composer.render();
}
</script>
</body>
</html>
查看THREE.js中内置的WireframeHelper和edgeHelper实用程序-它们可以添加您所描述的内容。
There is the THREE.BoundingBoxHelper()
that can help you. It shows the bounding box for an object. An example is:
# hexadecimal value to define color
var hex = 0xff0000;
var bbox = new THREE.BoundingBoxHelper( your_mesh, hex );
bbox.update();
scene.add( bbox );
Where your_mesh is the object3D to show the boundingbox.
A roughly way to render only the outline of a mesh is render your mesh twice with a flat color using frontface culling and a specific shader that offset each vertex along its normal. An example would be:
var vertexShader =
"void main(){"+
"float offset = 2.0;"+
"vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );"+
"gl_Position = projectionMatrix * pos;"+
"}\n";
var fragmentShader =
"void main(){"+
"gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );"+
"}\n";
You could use EdgesGeometry, worked great in my case. Insert this after you added the mesh:
const geometry = new THREE.PlaneBufferGeometry(200, 200) // whatever geometry you use
const line = new THREE.LineSegments(new THREE.EdgesGeometry(geometry), new THREE.LineBasicMaterial({color: 0x00000}))
scene.add(line)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.