three+gsap实现三维小球下落弹跳动画效果代码-html代码-BFW代码库

three+gsap实现三维小球下落弹跳动画效果代码

代码语言：html

所属分类：三维

代码描述：three+gsap实现三维小球下落弹跳动画效果代码

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

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

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

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chroma.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
    <script >
        console.clear();

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x7C71FF, 10, 30);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 12;
camera.position.y = 7;
camera.position.z = 12;
camera.lookAt(new THREE.Vector3());

const size = 20;
const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x7C71FF);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(size, 0.2, size);
const material = new THREE.MeshStandardMaterial({ color: 0x6557ff });
const ground = new THREE.Mesh(geometry, material);
ground.receiveShadow = true;
ground.castShadow = true;
scene.add(ground);

var colors = chroma.scale(['#F83FDE','#FF43A9','#FF717A','#FFA359','#FFD153','#F9F871','#FFD153','#FFA359','#FF717A','#FF43A9','#F83FDE']);

const light = new THREE.HemisphereLight(0xF9F871, 0x7C71FF, 1);
scene.add( light );
const light2 = new THREE.DirectionalLight(0xffffff, 0.5);
light2.castShadow = true;
light2.position.y = 40;
light2.shadow.mapSize.width = 1024;
light2.shadow.mapSize.height = 1024;
light2.shadow.camera.near = 0.5;
light2.shadow.camera.far = 100;
light2.shadow.camera.top = size / 1.5;
light2.shadow.camera.left = -(size / 1.5);
light2.shadow.camera.right = size / 1.5;
light2.shadow.camera.bottom = -(size / 1.5);
scene.add(light2);

const boomMats = [
  new THREE.SpriteMaterial({ depthTest: false, map: new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/images/360/boom1.png') }),
  new THREE.SpriteMaterial({ depthTest: false, map: new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/images/360/boom2.png') }),
  new THREE.SpriteMaterial({ depthTest: false, map: new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/images/360/boom3.png') }),
  new THREE.SpriteMaterial({ depthTest: false, map: new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/images/360/boom4.png') })
];

const sphereGeom = new THREE.IcosahedronGeometry(1, 3);
function createSphere (.........完整代码请登录后点击上方下载按钮下载查看