three三维发光宇宙天体圆环旋转动画效果代码

代码语言:html

所属分类:动画

代码描述:three三维发光宇宙天体圆环旋转动画效果代码

代码标签: three 三维 发光 宇宙 天体 圆环 旋转 动画

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

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


</head>
<body>
<!-- partial:index.partial.html -->
<style>
* {
 
margin: 0;
 
padding: 0;
 
box-sizing: border-box;
 
overflow: hidden;
}

#container {
 
width: 100vw;
 
height: 100vh;
 
background: radial-gradient(circle at center, #0a1527 0%, #02050a 100%);
 
position: fixed;
 
top: 0;
 
left: 0;
}

canvas
{
 
position: fixed;
 
top: 0;
 
left: 0;
}
</style>

<div id="container"></div>


       
<script type="importmap">
               
{
           
"imports": {
               
"three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
               
"three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
           
}
       
}
   
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.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,
    powerPreference: "high-performance"
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
document.getElementById('container').appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.maxDistance = 20;
controls.minDistance = 3;

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const.........完整代码请登录后点击上方下载按钮下载查看

网友评论0