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 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0