基于threeJS实现圣诞节孔明灯效果
Posted 接着奏乐接着舞。
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于threeJS实现圣诞节孔明灯效果相关的知识,希望对你有一定的参考价值。
1.效果图
2.实现思路
使用three.js的套路几乎是固定的:
1 初始化场景(scene)
2.创建透视相机(camera)
3.设置相机位置(position)
4.创建纹理加载器对象(texture)
5.创建着色器材质(Material)
6.初始化渲染器(WebGLRenderer)
7.设置渲染尺寸大小(Size)
8.将渲染器添加到body(appendChild)
9.初始化控制器(controls)
10.设置控制器阻尼(enableDamping)
11.不停地调用渲染(animate)
ps:万事的开头,你都得先下载引入并初始化three对象
3.核心代码
import * as THREE from "three";
import OrbitControls from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap";
import * as dat from "dat.gui";
import vertexShader from "../shaders/flylight/vertex.glsl";
import fragmentShader from "../shaders/flylight/fragment.glsl";
import RGBELoader from "three/examples/jsm/loaders/RGBELoader";
import GLTFLoader from "three/examples/jsm/loaders/GLTFLoader";
// 目标:认识shader
//创建gui对象
const gui = new dat.GUI();
// console.log(THREE);
// 初始化场景
const scene = new THREE.Scene();
// 创建透视相机
const camera = new THREE.PerspectiveCamera(
90,
window.innerHeight / window.innerHeight,
0.1,
1000
);
// 设置相机位置
// object3d具有position,属性是1个3维的向量
camera.position.set(0, 0, 2);
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
scene.add(camera);
// 加入辅助轴,帮助我们查看3维坐标轴
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);
// 加载纹理
// 创建纹理加载器对象
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("./assets/2k.hdr").then((texture) =>
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
);
// 创建着色器材质;
const shaderMaterial = new THREE.ShaderMaterial(
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms: ,
side: THREE.DoubleSide,
// transparent: true,
);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer( alpha: true );
// renderer.shadowMap.enabled = true;
// renderer.shadowMap.type = THREE.BasicShadowMap;
// renderer.shadowMap.type = THREE.VSMShadowMap;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
// renderer.toneMapping = THREE.LinearToneMapping;
// renderer.toneMapping = THREE.ReinhardToneMapping;
// renderer.toneMapping = THREE.CineonToneMapping;
renderer.toneMappingExposure = 0.2;
const gltfLoader = new GLTFLoader();
let LightBox = null;
gltfLoader.load("./assets/model/flyLight.glb", (gltf) =>
console.log(gltf);
LightBox = gltf.scene.children[1];
LightBox.material = shaderMaterial;
for (let i = 0; i < 150; i++)
let flyLight = gltf.scene.clone(true);
let x = (Math.random() - 0.5) * 300;
let z = (Math.random() - 0.5) * 300;
let y = Math.random() * 60 + 25;
flyLight.position.set(x, y, z);
gsap.to(flyLight.rotation,
y: 2 * Math.PI,
duration: 10 + Math.random() * 30,
repeat: -1,
);
gsap.to(flyLight.position,
x: "+=" + Math.random() * 5,
y: "+=" + Math.random() * 20,
yoyo: true,
duration: 5 + Math.random() * 10,
repeat: -1,
);
scene.add(flyLight);
);
// 设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 监听屏幕大小改变的变化,设置渲染的尺寸
window.addEventListener("resize", () =>
// console.log("resize");
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器的像素比例
renderer.setPixelRatio(window.devicePixelRatio);
);
// 将渲染器添加到body
document.body.appendChild(renderer.domElement);
// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼
controls.enableDamping = true;
// 设置自动旋转
controls.autoRotate = true;
controls.autoRotateSpeed = 0.1;
controls.maxPolarAngle = (Math.PI / 3) * 2;
controls.minPolarAngle = (Math.PI / 3) * 2;
const clock = new THREE.Clock();
function animate(t)
controls.update();
const elapsedTime = clock.getElapsedTime();
requestAnimationFrame(animate);
// 使用渲染器渲染相机看这个场景的内容渲染出来
renderer.render(scene, camera);
animate();
利用threejs基于万有引力公式模拟宇宙三体
纯利用万有引力公式计算宇宙中三体 的加速度,速度,位置,用threejs实现3D空间绘制,在屏幕上触摸(鼠标按)划动,可以360度旋转看三体运行。
先上效果,点击下方“阅读原文”直达交互...
以上是关于基于threeJS实现圣诞节孔明灯效果的主要内容,如果未能解决你的问题,请参考以下文章