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>
  


  
      <script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
import { RoundedBoxGeometry } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/geometries/RoundedBoxGeometry";
import { mergeBufferGeometries } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/utils/BufferGeometryUtils";

import { RoomEnvironment } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/environments/RoomEnvironment";

console.clear();

class NewtonsCradle extends THREE.Group {
  constructor() {
    super();
    // base
    let baseG = new RoundedBoxGeometry(14, 1, 7, 3, 0.25).translate(0, 0.5, 0);
    let baseM = new THREE.MeshLambertMaterial({
      color: new THREE.Color(0, 0.75, 1).multiplyScalar(0.5) });

    let base = new THREE.Mesh(baseG, baseM);
    this.add(base);

    // frame
    let frameR = 0.25;
    let frameRound = 1.5;
    let frameW = 12;
    let frameH = 14;
    let frameD = 5;
    let radialSegs = 16;
    let gs = [];
    let cornerRound = new THREE.QuadraticBezierCurve3(
    new THREE.Vector3(-frameRound, 0, 0),
    new THREE.Vector3(-frameRound, -frameRound, 0),
    new THREE.Vector3(0, -frameRound, 0));

    let tubeG = new THREE.TubeGeometry(cornerRound, 10, frameR, radialSegs);
    let vertG = new THREE.CylinderGeometry(
    frameR,
    frameR,
    frameH - frameRound,
    radialSegs,
    1,
    true).
    translate(0, (frameH - frameRound) * 0.5, 0);
    gs.push(
    tubeG.
    clone().
    rotateZ(Math.PI * -0.5).
    translate(
    -frameW * 0.5 + frameRound,
    frameH - frameRound,
    frameD * 0.5),

    tubeG.
    clone().
    rotateZ(Math.PI).
    translate(
    frameW * 0.5 - frameRound,
    frameH - frameRound,
    frameD * 0.5),

    vertG.clone().translate(-frameW * 0.5, 0, frameD * 0.5),
    vertG.clone().translate(frameW * 0.5, 0, frameD * 0.5),
    new THREE.CylinderGeometry(
    frameR,
    frameR,
    frameW - frameRound * 2,
    radialSegs,
    1,
    true).

    rotateZ(Math.PI * 0.5).
    translate(0, frameH, frameD * 0.5));


    let g = mergeBufferGeometries(gs);
    g = mergeBufferGeometries([g.clone(), g.clone().translate(0, 0, -frameD)]);
    let tubeM = new THREE.MeshLambertMaterial();
    let frame = ne.........完整代码请登录后点击上方下载按钮下载查看