three实现三维一堆小球立体旋转动画效果代码-html代码-BFW代码库

three实现三维一堆小球立体旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现三维一堆小球立体旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">


  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
  
<style>
body {
  overflow: hidden;
}
</style>


  
  
</head>

<body translate="no">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
      <script >
container = document.createElement('div');
document.body.appendChild(container);



// サイズを指定
const width = window.innerWidth;
const height = window.innerWidth;

// レンダラーを作成
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
container.appendChild(renderer.domElement);

// シーンを作成
const scene = new THREE.Scene();

// カメラを作成
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);

// 平行光源
// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.2)
// directionalLight.position.set(0, 0, 40)
// scene.add(directionalLight)
// ポイント光源
const pointLight = new THREE.PointLight(0xFFFFFF, 2.5, 1000);
scene.add(.........完整代码请登录后点击上方下载按钮下载查看