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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0