three的後處理接口相較於cesium來說複雜的多,
要引入5個js,這些js具體是幹啥的,還沒去看,先實現吧
<script src="../../plugins/EffectComposer.js"></script> <script src="../../plugins/CopyShader.js"></script> <script src="../../plugins/RenderPass.js"></script> <script src="../../plugins/ShaderPass.js"></script> <script src="../../plugins/OutlinePass.js"></script>
function initThree(elid,options) {
let scene,camera ,renderer,viewer
viewer={}
el = document.getElementById(elid)
const width = el.offsetWidth, height = el.offsetHeight,asp = width / height
renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setSize(width, height);
el.append(renderer.domElement);
renderer.setClearColor('#000')
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(45, asp, 1, 10000)
camera.position.set(10,10,10)
camera.lookAt(0,0,0)
scene.add(camera)
viewer.scene=scene
viewer.camera=camera
viewer.renderer=renderer
const controls = new THREE.OrbitControls( camera, renderer.domElement );
// 如果使用animate方法時,將此函數刪除
controls.addEventListener( 'change', ()=>{
renderer.render( scene, camera );
});
viewer.controls=controls
renderer.render( scene, camera );
return viewer
}
let app=new initThree('box')
let scene=app.scene
let renderer=app.renderer
let camera=app.camera
let controls=app.controls
const clock = new THREE.Clock()
//add light
const directionalLight = new THREE.DirectionalLight( '#fff' )
directionalLight.position.set( 30, 30, 30 ).normalize()
scene.add( directionalLight )
const ambientLight = new THREE.AmbientLight('#fff',0.3) // obj 唯一 id
scene.add(ambientLight)
/* **** **** **** ****/
renderer.setPixelRatio( window.devicePixelRatio )
renderer.shadowMap.enabled = true
const box = new THREE.Mesh(new THREE.BoxBufferGeometry(2,2,2) ,new THREE.MeshBasicMaterial({color:'red'}))
box.position.set(0,1,-2)
scene.add(box)
const box2 = new THREE.Mesh(new THREE.BoxBufferGeometry(2,2,2) ,new THREE.MeshBasicMaterial({color:'yellow'}))
scene.add(box2)
box2.position.set(0,1,2)
const group = new THREE.Group()
group.add(box,box2)
group.name = 'oneGroup'
scene.add(group)
//球
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20)
const sphereMaterial = new THREE.MeshLambertMaterial({color: 'red'})
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.position.set(-10,0,-10)
scene.add(sphere)
/* ***********/
//
const composer = new THREE.EffectComposer(renderer)
composer.setSize( el.offsetWidth, el.offsetHeight )
//
const renderPass = new THREE.RenderPass( scene, camera );
composer.addPass( renderPass )
//
const loader = new THREE.TextureLoader()
function initOutlinePass(color, url) {
const outlinePass = new THREE.OutlinePass( new THREE.Vector2( el.offsetWidth, el.offsetHeight ), scene, camera )
if(url) {
loader.load( url, texture => {
outlinePass.patternTexture = texture
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
});
}
outlinePass.edgeStrength = 3 //粗
outlinePass.edgeGlow = 1 //發光
outlinePass.edgeThickness = 1 //光暈粗
outlinePass.pulsePeriod = 1 //閃爍
outlinePass.usePatternTexture = false //true
outlinePass.visibleEdgeColor.set( color );
outlinePass.hiddenEdgeColor.set( '#190a05' );
composer.addPass( outlinePass )
return outlinePass
}
const outlinePass2 = initOutlinePass('yellow')
let selectedObjects2 = []
outlinePass2.selectedObjects = selectedObjects2
selectedObjects2.push(sphere)
function render() {
controls.update(clock.getDelta())
composer.render()
requestAnimationFrame(render)
}
render()