three打造一个彩虹超立方体三维转动动画效果代码

代码语言:html

所属分类:三维

代码描述:three打造一个彩虹超立方体三维转动动画效果代码

代码标签: 彩虹 立方体 三维 转动 动画 效果

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  overflow: hidden;
  margin: 0;
}
</style>



</head>

<body translate="no" >
  <div id="p5"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.r118.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
      <script>
console.clear();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000);


var renderer = new THREE.WebGLRenderer({
  antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var group = new THREE.Group();

var light = new THREE.PointLight(0xffffff, 1.8, 80);
scene.add(light);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 100, 0);
scene.add(spotLight);

var geometry = new THREE.CubeGeometry(30, 30, 30);
var texture = new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/5f802dbc07a14.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
gsap.to(texture.offset, {
  y: 1,
  dur.........完整代码请登录后点击上方下载按钮下载查看

网友评论0