three实现三维发光天体沿轨道运行动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维发光天体沿轨道运行动画效果代码
代码标签: three 三维 发光 天体 沿 轨道 运行 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body translate="no"> <style> * { margin: 0; padding: 0; overflow: hidden; background-color: #000; } canvas { width: 100%; height: 100vh; display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.162.0/build/three.module.js", "three/addons/controls/OrbitControls.js": "https://unpkg.com/three@0.162.0/examples/jsm/controls/OrbitControls.js", "three/addons/postprocessing/EffectComposer.js": "https://unpkg.com/three@0.162.0/examples/jsm/postprocessing/EffectComposer.js", "three/addons/postprocessing/RenderPass.js": "https://unpkg.com/three@0.162.0/examples/jsm/postprocessing/RenderPass.js", "three/addons/postprocessing/UnrealBloomPass.js": "https://unpkg.com/three@0.162.0/examples/jsm/postprocessing/UnrealBloomPass.js" } } </script> <script type="module"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); controls.en.........完整代码请登录后点击上方下载按钮下载查看
网友评论0