给渲染对象加描边

2019-10-15  本文已影响0人  不决书

关键的实现思路就是将渲染模式设置为BackSide,然后将图形放大,看上去就是我们要实现的描边

1550475702080-301de951-cba0-4545-8973-ee62a5b1290d.png

https://stemkoski.github.io/Three.js/Outline.html

 var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.BackSide } );
 
 var outlineMesh1 = new THREE.Mesh( sphereGeometry, outlineMaterial1 );
 
 outlineMesh1.position = sphere.position;
 
 outlineMesh1.scale.multiplyScalar(1.05);
 
 scene.add( outlineMesh1 );
 
 var cubeGeometry = new THREE.CubeGeometry( 80, 80, 80 );
 
 var cube = new THREE.Mesh( cubeGeometry, material );
 
 cube.position.set(60, 60, 0);
 
 scene.add( cube );  
 
 var outlineMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.BackSide } );
 
 var outlineMesh2 = new THREE.Mesh( cubeGeometry, outlineMaterial2 );
 
 outlineMesh2.position = cube.position;
 
 outlineMesh2.scale.multiplyScalar(1.05);
 
 scene.add( outlineMesh2 );

上一篇 下一篇

猜你喜欢

热点阅读