three打造规格三维起伏的圈圈动画效果代码-html代码-BFW代码库

three打造规格三维起伏的圈圈动画效果代码

代码语言：html

所属分类：动画

代码描述：three打造规格三维起伏的圈圈动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">





    <style>
        html {
            scroll-behavior: smooth;
            font-family: Georgia;
        }

        body {
            background: black;
            margin: 0;
            padding: 0;
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>



</head>

<body>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
    <script>
        let mouseX = window.innerWidth / 2;
        let mouseY = window.innerHeight / 2;
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100);
        camera.position.set(0, 0, 25);
        var renderer = new THREE.WebGLRenderer({
            antialias: true
        });

        renderer.shadowMap.enabled = true;
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('mousemove', e => {
            mouseX = e.pageX - window.innerWidth / 2;
            mouseY = e.pageY - window.innerHeight / 2;
            tissue.rotation.y = mouseX * 0.0008;
            tissue.rotation.x = mouseY * 0.001;
        });

        const ambientLight = new THREE.AmbientLight('#ffffff', .5);
        const spotLight = new THREE.SpotLight('#ffffff', .9);
        const spotLight2 = new THREE.SpotLight('#ffffff', .7);
        scene.add(ambientLight);
        scene.add(spotLight);
        scene.add(spotLight2);
        spotLight.position.set(10, -8, 16);
        spotLight.castShadow = true;
        spotLight.shadow.mapSize.height = 1800;
        spotLight.shadow.mapSize.width = 1800;
        spotLight.target.position.set(0, 0, 0);
        spotLight2.position.set(-5, 15, 18);
        spotLight2.castShadow = true;
        spotLight2.shadow.mapSize.height = 1800;
        spotLight2.shadow.mapSize.width = 1800;
        spotLight2.target.position.set(0, 0, 0);
        // const.........完整代码请登录后点击上方下载按钮下载查看