three打造一个三维3d多彩水晶球效果代码-html代码-BFW代码库

three打造一个三维3d多彩水晶球效果代码

代码语言：html

所属分类：三维

代码描述：three打造一个三维3d多彩水晶球效果代码

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

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

<head>
  <meta charset="UTF-8">
<style>
    html,body{
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#info{
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgba(80,80,80,0.7);
  color: #fff;
  padding: 8px;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
}
#info:hover{
  cursor: default;
}
</style>
</head>

<body>

  <div id="info">
  Double-Click inside the Canvas to Re-Generate<br>
  <hr>
  Drag and Scroll around to move Camera
</div>
<div id="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TrackballControls.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OBJLoader.min.js"></script>

  

    <script >
        var container, stats, camera, controls, scene, renderer, cross;

cols = [
  [0x00bfff, 0x444444, 0xffffff, 0x00ffe9],
  [0xf4ce42, 0xffec1c, 0x84ff2b, 0x2affc6],
  [0xc4316e, 0x7c025a, 0xa40ace, 0x6d26c9],
  [0xff2e00, 0xe56b00, 0xffae00, 0x2d1000],
  [0xf2999b, 0xd54d87, 0x7b2a95, 0x461865],
  [0xc5e2f6, 0x86e7e1, 0xfcb5bb, 0xfac6ff],
  [0xF44336, 0x1E88E5, 0xFDD835, 0xffffff]
];
specs = [
  [0x94e2fc, 0x666666, 0xffffff, 0xa3fff7],
  [0xf9e69f, 0xfcf6b3, 0xd1fcb2, 0xb5ffeb],
  [0xc6658d, 0xaf3f90, 0xbe5fd8, 0xbf8eff],
  [0xff9077, 0xf7a45b, 0xffcc60, 0x2d211b],
  [0xffbfc0, 0xce7da0, 0xb780c9, 0x755689],
  [0xdeeef9, 0xaef2ee, 0xf7c5ca, 0xf6d4f9],
  [0xF44336, 0x1E88E5, 0xFDD835, 0xffffff]
];
alpha = [
  [0.8, 1.0, 0.3, 0.7],
  [0.5, 0.4, 0.6, 0.7],
  [0.4, 0.6, 0.8, 0.9],
  [0.8, 0.7, 0.4, 1.0],
  [0.4, 0.6, 0.8, 1.0],
  [0.7, 0.5, 0.6, 0.7],
  [0.6, 0.6, 0.6, 0.4]
];

count = 200;
offmax = 50;
offmin = -50;
xWi = 10; nWi = 2;
xLe = 10; nLe = 2;
colRow = 0;

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 350;

  controls = new THREE.TrackballControls(camera);
  controls.rotateSpeed = 2.0;
  controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;
  controls.noPan = true;
  controls.staticMoving = false;
  controls.dynamicDampingFactor = 0.2;
  controls.keys = [65, 83, 68];
  controls.addEventListener("change", render);
  
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2(0x000000, 0.002);

  draw();
  
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setClearColor(scene.fog.color);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  container = document.getElementById("container");
  container.appendChild(renderer.domElement);

  window.addEventListener("resize", onWindowResize, false);
  render();
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  controls.handleResize();
  render();
}

function animate() {
  requestAnimationFrame(animate);
  controls.update();
}

function render() {
  renderer.render(scene, camera);
}

function ran(max, min) {
  return Math.random() * (max - min + 1) + min;
}

funct.........完整代码请登录后点击上方下载按钮下载查看