关键的实现思路就是将渲染模式设置为BackSide,然后将图形放大,看上去就是我们要实现的描边
1550475702080-301de951-cba0-4545-8973-ee62a5b1290d.pnghttps://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 );
网友评论