对ThreeJS使用透明画布纹理

对ThreeJS使用透明画布纹理

示例

对ThreeJS使用透明画布纹理

HTML

<html>

<head>
    <script src="https://unpkg.com/three@0.85.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.85.0/examples/js/Detector.js"></script>
    <script src="https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>

<body>

</body>

</html>

CSS

body {
    background-color: #1E2630;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

JS

console.clear();

window.addEventListener('load', function() {
    if (!Detector.webgl) Detector.addGetWebGLMessage();
    
    function shuffleArray(arr) {
        var j, x, i;
        for (i = arr.length; i; i--) {
            j = Math.floor(Math.random() * i);
            x = arr[i - 1];
            arr[i - 1] = arr[j];
            arr[j] = x;
        }
    }

    function lerp(a, b, pct) {
        return (1 - pct) * a + b * pct;
    }

    var camera, scene, renderer, canvas, ctx, tex, mesh;

    (function initTexture() {
        canvas = document.createElement('canvas');
        canvas.width = canvas.height = 128;
        ctx = canvas.getContext('2d');
        // document.body.appendChild( canvas );
        // canvas.style.position = 'absolute';
        tex = new THREE.Texture(canvas);
    })();

    (function animTexture(t) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#FB3550';

        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, -2);
        ctx.lineTo(-2, canvas.height + 2);
        ctx.lineTo(lerp(canvas.width / 4 - 2, canvas.width / 2, Math.sin(t / 323 + 2 * Math.PI / 3) / 2 + 0.5), canvas.height / 2);
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, -2);
        ctx.lineTo(canvas.width + 2, canvas.height + 2);
        ctx.lineTo(lerp(3 * canvas.width / 4 - 2, canvas.width / 2, Math.sin(t / 343 + 4 * Math.PI / 3) / 2 + 0.5), canvas.height / 2);
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, lerp(canvas.height + 2, canvas.height / 2, Math.sin(t / 333) / 2 + 0.5));
        ctx.lineTo(-2, canvas.height + 2);
        ctx.lineTo(canvas.width + 2, canvas.height + 2);
        ctx.fill();

        tex.needsUpdate = true;

        requestAnimationFrame(animTexture);
    })(0);

    (function init() {
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x1E2630);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.sortObjects = false;

        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
        camera.position.z = 13;
        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        scene = new THREE.Scene();

        var material = new THREE.MeshPhongMaterial({
            map: tex,
            transparent: true,
            opacity: 0.99,
            side: THREE.DoubleSide,
            alphaTest: 0.1
        });

        var geometry = new THREE.IcosahedronGeometry(10, 4);

        for (var i = 0; i < geometry.faceVertexUvs[0].length; i++) {
            var arr = [
                new THREE.Vector2(0.5, 1),
                new THREE.Vector2(0, 0),
                new THREE.Vector2(1, 0)
            ];
            shuffleArray(arr);
            geometry.faceVertexUvs[0][i] = arr;
        }
        geometry.uvsNeedUpdate = true;

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        var light = new THREE.HemisphereLight(0xffffff, 0x666666, 1);
        scene.add(light);

        function onWindowResize() {
            var w = window.innerWidth;
            var h = window.innerHeight;

            camera.aspect = w / h;
            camera.updateProjectionMatrix();
            renderer.setSize(w, h);
        }
        window.addEventListener('resize', onWindowResize, false);
    })();

    (function animate() {
        requestAnimationFrame(animate);

        mesh.rotation.x += 0.001;
        mesh.rotation.y += 0.001;

        renderer.render(scene, camera);
    })();
}, false);
更多有趣示例 尽在 小红砖社区https://xhz.bos.xyz
上一篇:threejs 限制物件只能在指定平面上拖拽


下一篇:3d学习网