给渲染对象加描边
2019-10-15 本文已影响0人
不决书
关键的实现思路就是将渲染模式设置为BackSide,然后将图形放大,看上去就是我们要实现的描边

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 );