立方体内粒子运动效果-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：立方体内粒子运动效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*{
    margin: 0;
    padding: 0;
}

html,body{
    overflow: hidden;
}
</style>

</head>
<body translate="no">
<div id="webgl"></div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<script src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script>
<script id="rendered-js">
class Camera {
  constructor() {
    this.fovy = 60;
    this.aspect = window.innerWidth / window.innerHeight;
    this.near = .1;
    this.far = 30;
    this.x = 0;
    this.y = 4;
    this.z = 8;
    this.lookAt = new THREE.Vector3(0, 0, 0);
  }}


class PointLight {
  constructor() {
    this.color = 0xffffff;
    this.intensity = 1;
    this.x = 5;
    this.y = 5;
    this.z = 10;
  }}


class AmbientLight {
  constructor() {
    this.color = 0xffffff;
    this.intensity = .2;
  }}


class Material {
  constructor() {
    this.color = 0xffffff;
    this.color02 = 0x74afcb;
    this.color03 = 0x1579c1;
  }}


class Renderer {
  constructor() {
    this.clearcolor = 0x2a3a42; // 背景をクリアする色
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }}


class Scene {
  constructor() {
    this.fogColor = 0x000000; // フォグの色
    this.fogNear = 10.0; // フォグの掛かり始めるカメラからの距離
    this.fogFar = 50.0; // フォグが完全に掛かるカメラからの距離
  }}
;

//無名関数で全体を囲んで外部から参照されないようにする。
(() => {
  //ページが読み込まれたとき
  window.addEventListener('load', () => {
    init();

    // リサイズイベントの定義
    window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    }, false);

    render();
  });

  //各種変数を作成
  let width = window.innerWidth,
  height = window.innerHeight,
  wrapper,
  scene,sceneparam,
  camera,cameraparam,
  renderer,rendererparam,
  boxwiregeometry,boxwiregeometry02,edges,edges02,boxgeometry,boxgeometry02,spheregeometry,
  boxmesh,boxmesh02,boxwireframe,boxwireframe02,spheremesh,spheremeshArray = [],
  boxwirematerial,materialparam,boxmaterial,boxmaterial02,spherematerial,ball,
  pointLight,pointlightparam,ambientLight,ambientlightparam,
  axesHelper,controls,group,
  scalar,scalarArray = [],velocity,angle;

  //各種インスタンスを作成
  sceneparam = new Scene();
  rendererparam = new Renderer();
  cameraparam = new Camera();
  materialparam = new Material();
  pointlightparam = new PointLight();
  ambientlightparam = new AmbientLight();

  //初期化処理
  function init() {
    //シーンを作成
    scene = new THREE.Scene();

    //レンダラーを作成
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(new THREE.Color(rendererparam.clearcolor));
    renderer.setSize(rendererparam.width, rendererparam.height);
    renderer.sortObjects = false;
    wrapper = document.querySelector('#webgl');
    wrapper.appendChild(renderer.domElement);

    //カメラを作成
    camera = new THREE.PerspectiveCamera(
    cameraparam.fovy,
    cameraparam.aspect,
    cameraparam.near,
    cameraparam.far);

    camera.position.set(cameraparam.x, cameraparam.y, cameraparam.z);
    camera.lookAt(cameraparam.lookAt);

    //ジオメトリを作成
    boxwiregeometry = new THREE.BoxBufferGeometry(5.0, 5.0, 5.0);
    edges = new THREE.EdgesGeometry(boxwiregeometry);
    //マテリアルを作成
    boxwirematerial = new THREE.LineBasicMaterial({ color: materialparam.color });
    boxwireframe = new THREE.LineSegments(edges, boxwirematerial);

    //ジオメトリを作成
    boxwiregeometry02 = new THREE.BoxBufferGeometry(3.0, 3.0, 3.0);
    .........完整代码请登录后点击上方下载按钮下载查看