three实现三维立方体表面小立方体移动动画效果代码-html代码-BFW代码库

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">
  <script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/165/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/165/jsm/"
    }
  }
</script>
  
      <script type="module">
// https://discourse.threejs.org/t/mesh-into-face-of-mesh/67200/3

import * as THREE from "three";
import {
OrbitControls } from
"three/addons/controls/OrbitControls.js";
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

class BoxedBox extends THREE.Mesh {
  constructor(amount) {
    let g = new THREE.BoxGeometry();
    let m = new THREE.MeshStandardMaterial({
      metalness: 0.9,
      roughness: 0.1 });

    super(
    g.clone(),
    m.clone());

    this.material.color.set(0x0088ff);
    this.amount = amount;
    this.boxes = [];
    this.raycaster = new THREE.Raycaster();
    this.intersects = [];

    let scaleVal = 0.075;
    this.instMesh = new THREE.InstancedMesh(g.clone().translate(0, 0, 0.5).scale(scaleVal, scaleVal, scaleVal), m.clone(), amount);
    this.instMesh.name = "instMesh";
    this.instMesh.material.color.set(0xff8800);

    scene.add(this.instMesh);

    this.init();
    console.log(this);
  }

  init() {
    this.boxes = Array.from({ length: this.amount }, _ => {
      let dir = new THREE.Vector3().randomDirection();
      return {
        rayPos: dir.clone().multiplyScalar(5),
        rayDir: dir.clone().negate(),.........完整代码请登录后点击上方下载按钮下载查看