outline

by YeongCY

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/OutlinePass.js"></script>
<div id="container">

</div>

JavaScript

init();
animate();
    var mouse = new THREE.Vector2(0,0), raycaster = new THREE.Raycaster();;
function init() {
    container = document.getElementById('container');

    camera= new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -500, 1000);
    // camera.position.x = 200;
    // camera.position.y = 100;
    // camera.position.z = 200;
    camera.position.set(0, 500, 0);
    camera.lookAt(new THREE.Vector3(0,0,0));


    var light = new THREE.PointLight(0xffffff, 0.8);
    light.position.set(0, 100, 0);



    scene = new THREE.Scene();

    scene.add(light);

    scene.add(camera);
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(0x444444);
    renderer.setSize(window.innerWidth, window.innerHeight);

    // controls.enabled=false;

//efect ayarı
    composer = new THREE.EffectComposer(renderer);
    renderPass = new THREE.RenderPass(scene, camera);
    composer.addPass(renderPass);
    outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
    outlinePass.visibleEdgeColor = new THREE.Color(1, 0, 0);
    // outlinePass.hiddenEdgeColor = new THREE.Color(1, 0, 0);
    outlinePass.pulsePeriod = 0;
    outlinePass.edgeGlow = 1;
    outlinePass.edgeThickness = 1;
    outlinePass.edgeStrength = 3;
    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);



    var texture = new...