three.js从入门到精通系列教程052 - 制作立方体添加重影特效

最新推荐文章于 2024-04-26 16:47:03 发布

smartsmile2012

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量376

点赞数 8

分类专栏： three.js从入门到精通系列教程文章标签： javascript 开发语言 ecmascript three.js 数字孪生前端

本文链接：https://blog.csdn.net/smartsmile2012/article/details/135776497

版权

three.js从入门到精通系列教程专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程052 - 制作立方体添加重影特效</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
    <script src="ThreeJS/EffectComposer.js"></script>
    <script src="ThreeJS/RenderPass.js"></script>
    <script src="ThreeJS/ShaderPass.js"></script>
    <script src="ThreeJS/RGBShiftShader.js"></script>
</head>

<body>
    <p><button id="myButton1">添加重影特效</button>
        <button id="myButton2">保持原状</button>
    </p>
    <div id="myContainer"></div>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor('white', 1.0);
        $("#myContainer").append(myRenderer.domElement);
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 0.1, 1000);
        myCamera.position.set(71, 121, 44);
        myCamera.lookAt(new THREE.Vector3(0, 0, 0));
        var myScene = new THREE.Scene();
        //创建立方体
        var myGeometry = new THREE.BoxBufferGeometry(50, 50, 50);
        var myMap = THREE.ImageUtils.loadTexture("images/img073.jpg");
        var myMaterial = new THREE.MeshBasicMaterial({ map: myMap });
        var myMesh = new THREE.Mesh(myGeometry, myMaterial);
        myMesh.position.y = 2;
        myScene.add(myMesh);
        //在场景中实现后期特效(添加重影特效)
        var myEffectComposer = new THREE.EffectComposer(myRenderer);
        myEffectComposer.addPass(new THREE.RenderPass(myScene, myCamera));
        var myShaderPass = new THREE.ShaderPass(THREE.RGBShiftShader);
        myShaderPass.uniforms['amount'].value = 0.005;
        myEffectComposer.addPass(myShaderPass);
        //渲染添加重影特效之后的图形
        animate();
        function animate() {
            requestAnimationFrame(animate);
            myEffectComposer.render();
        }
        //响应单击“添加重影特效”按钮
        $("#myButton1").click(function () {
            myEffectComposer.addPass(myShaderPass);
        });
        //响应单击“保持原状”按钮
        $("#myButton2").click(function () {
            myEffectComposer.addPass(new THREE.RenderPass(myScene, myCamera));
        });
    </script>
</body>

</html>