threejs 反锯齿，raser，特效发光

Posted 2022-03-21 qianbo_insist

反锯齿

反锯齿本来是在threejs中比较容易的，加上 antialias: true,alpha :true 以后确实效果好很多，但是问题是很多都是要用后期处理来做这个场景，而懂得opengl的人知道后期处理使用离屏表面来做的，和实时渲染的参数不一致，这样可能就使用FXAAShaderPass 等去做，最好是用glsl语言去做了。

raser如何计算

在鼠标的点击事件中，计算二维或者三维变量vector: mouse
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

如何计算的，以下是其推导过程：
假定鼠标点击的点为 (x,y), 则 (x,y) = (e.clintX, e.clientY)
设该点在opengl坐标中的坐标值为 (x’,y’);那么怎么计算该值呢？

在浏览器中点的坐标值原点以屏幕左上角为(0,0)点，要推导以屏幕中心为原点的鼠标点击值的计算公式为：
       x = x1 - innerWidth/2
       y = innerHeight/2 - y1
x1,y1 为当时鼠标点下去的点。

一般来说opengl世界坐标的范围是[-1,1],当然，学过opengl基础的人知道，其实这个值只是归一化，并不一定是这样子，归一化有很多好处，这里不一一说明，把计算所得的x，y归一化，我们将得到
      x’ = (x1 -innerWidth/2)/(innerwidth/2) = (x1/innerWidth)*2-1
       *y’ = -(y1/innerHeight)2 +1

发光

点击某个物体发光，如何做？

 function outlineObj() 
            var width = window.innerWidth; //全屏状态对应窗口宽度
            var height = window.innerHeight; //全屏状态对应窗口高度
            composer = new THREE.EffectComposer(renderer); // 特效组件
            var renderPass = new THREE.RenderPass(scene, camera);
            composer.addPass(renderPass); // 特效渲染

            outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
            composer.addPass(outlinePass); // 加入高光特效

            outlinePass.pulsePeriod = 2; //数值越大，律动越慢
            outlinePass.visibleEdgeColor.set(0xff0000); // 高光颜色
            outlinePass.hiddenEdgeColor.set(0x000000);// 阴影颜色
            outlinePass.usePatternTexture = false; // 使用纹理覆盖？
            outlinePass.edgeStrength = 5; // 高光边缘强度
            outlinePass.edgeGlow = 1; // 边缘微光强度
            outlinePass.edgeThickness = 1; // 高光厚度

            outlinePass.selectedObjects = selectedObjects; // 需要高光的obj
        

鼠标点击事件：

 document.onmousedown = function (event) 
            // make sure we don't access anything else
            event.preventDefault();

            // get the mouse positions
            var mouse_x = (event.clientX / window.innerWidth) * 2 - 1;
            var mouse_y = -(event.clientY / window.innerHeight) * 2 + 1;

            // get the 3D position and create a raycaster
            var vector = new THREE.Vector3(mouse_x, mouse_y, 0.5);
            vector.unproject(camera);
            var raycaster = new THREE.Raycaster(camera.position,
                vector.sub(camera.position).normalize());
            var intersects = raycaster.intersectObjects(scene.children);
            //outlineObj(intersects[0].object);
            if(intersects)
            
                console.log(intersects[0].object);
                selectedObjects.length =0;
                selectedObjects.push(intersects[0].object);
                //outlineObj(selectedObjects);
            
        

效果

效果就是点击哪个哪个发光，后面会使用glsl语言来做