基于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场景中模型局部辉光效果
背景之前写过一个关于辉光的文章,全场景辉光(传送门),但是有些时候,我们的场景只需要一部分模型辉光,这就是本文的背景.还是基于ThreeJS实现. 原理简单来说,就是做两个合成器(Composer ...
基于ThreeJS修改模型材质
基于ThreeJS修改模型材质示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在模型上改变构件的材质.材质和几何体构成网格,决定几何体是否像金属,透明与否,是否展 ...
基于threejs的商品VR展示平台的设计与实现思路
目录基于threejs的商品VR展示平台的设计与实现思路前言总体开发方案设计总体开发设计思维导图模型制作模块前端展示模块存储模块后端管理模块后台管理实现商品模型制作商品模型前期准 ...
这是一个基于Threejs的商品VR展示系统的 VR模型展示Demo
vr-cake-demo 这是一个基于Threejs的商品VR展示系统的 VR模型展示Demo Demo界面示意图 Demo蛋糕实物图片 Demo蛋糕VR效果图研究意义 2020年,已经进入了5G时 ...
基于ThreeJS实现3D模型上的室内灯光效果模拟
基于ThreeJS实现3D模型上的室内灯光效果模拟示例描述与操作指南示例效果展示实现步骤示例描述与操作指南当前示例用于展示室内灯光的多角度光影效果. 示例效果展示实现步骤第一步创建聚光 ...
基于Threejs构建的3D立体空间实战入门
在现实生活中,我们有许多场景需要对真实世界进行还原,仿真.因此会有很多3D的展示需求,同时要求可以基于浏览器就可以深度交互浏览.这里关于3D方面的内容不进行赘述,同时关于opengl和webgl的发展 ...
基于Threejs火焰烟雾动画功能代码
利用Threejs进行三维可视化的应用项目开发,我们经常回遇到需要加入一些动画效果,粒子效果等.所以本片利用此详细的例子进行介绍在Threejs中如何使用. 1,首先需要对三维场景进行初始化 func ...
基于Threejs的jQuery 3d图片旋转木马特效插件
这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件.该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置. 浏览器兼容: Firefox - 3 ...
基于ThreeJS为3D模型添加贴图
基于ThreeJS为3D模型添加贴图示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在三维立体构件六个面上添加贴图示例效果展示实现方式添加贴图:在模型的多个 ...

基于threeJS实现圣诞节孔明灯效果

1.效果图

2.实现思路

3.核心代码

基于threeJS实现圣诞节孔明灯效果相关推荐

最新文章

热门文章