three实现三维原子围绕原子核旋转动画效果代码-html代码-BFW代码库

three实现三维原子围绕原子核旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维原子围绕原子核旋转动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        @import "https://fonts.googleapis.com/css?family=Oswald:300,400,700";
        
        html,
        body {
        	font-family: "Oswald", sans-serif;
        	margin: 0;
        	width: 100%;
        	height: 100%;
        	background-color: hsla(240, 81%, 8%, 0.81);
        }
        h1,
        h3 {
        	margin: 0;
        }
        canvas {
        	mix-blend-mode: screen;
        	cursor: move;
        }
        .linebox {
        	position: fixed;
        	width: calc(100% - 30px);
        	height: calc(100% - 30px);
        	border: 4px solid #ddd;
        	left: 50%;
        	top: 50%;
        	transform: translate(-50%, -50%);
        }
        .texts {
        	position: fixed;
        	color: #eee;
        	left: 2rem;
        	top: 0.8rem;
        	padding: 0.8rem;
        }
        .texts h1 {
        	font-size: 7rem;
        	letter-spacing: 0.24rem;
        }
        .texts h3 {
        	letter-spacing: 0.08rem;
        	width: 24rem;
        	font-weight: normal;
        }
    </style>



</head>

<body>
    <div class="texts">
        <h1>ATOM</h1>
        <h3>
            An atom is the smallest constituent unit of ordinary matter that has the properties of a chemical element.
        </h3>
    </div>
    <div class="linebox"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.143.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.143.js"></script>
    <script>
        let camera, scene, renderer, cameraControl;
        
        let group;
        let el1, el2, el3;
        
        function init() {
          scene = new THREE.Scene();
          scene.fog = new THREE.Fog(0x090b33, 5, 50);
        
          renderer = new THREE.WebGLRenderer({
            antialias: true });
        
          renderer.setSize(innerWidth, innerHeight);
          renderer.shadowMap.enable = true;
        
          document.body.appendChild(renderer.domElement);
        
          camera = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, 100);
          camera.position.set(16, 10, 12);
          camera.lookAt(scene.position);
        
          group = new THREE.Object3D();
          scene.add(group);
        
          function generateBall(r, color, name, x, y, z) {
            let sphereGeometry = new THREE.SphereGeometry(r, 32, 32);
            let sphereMaterial = new THREE.MeshLambertMaterial({ color });
            let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.name = name;
            sphere.position.set(x ?? 0, y ?? 0, z ?? 0);
            group.add(sphere);
        
            return sphere;
          }
          // generateBall(5, "#f24", "test");
          // generateBall(5, "#24f", "test", -5);
          // gen.........完整代码请登录后点击上方下载按钮下载查看