利用ThreeJS實現(xiàn)孔明燈效果
1.效果圖
2.實現(xiàn)思路
使用three.js的套路幾乎是固定的:
1 初始化場景(scene)
2.創(chuàng)建透 視相機(jī)(camera)
3.設(shè)置相機(jī)位置(position)
4.創(chuàng)建紋理加載器對象(texture)
5.創(chuàng)建著色器材質(zhì)(Material)
6.初始化渲染器(WebGLRenderer)
7.設(shè)置渲染尺寸大?。⊿ize)
8.將渲染器添加到body(appendChild)
9.初始化控制器(controls)
10.設(shè)置控制器阻尼(enableDamping)
11.不停地調(diào)用渲染(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"; // 目標(biāo):認(rèn)識shader //創(chuàng)建gui對象 const gui = new dat.GUI(); // console.log(THREE); // 初始化場景 const scene = new THREE.Scene(); // 創(chuàng)建透 視相機(jī) const camera = new THREE.PerspectiveCamera( 90, window.innerHeight / window.innerHeight, 0.1, 1000 ); // 設(shè)置相機(jī)位置 // object3d具有position,屬性是1個3維的向量 camera.position.set(0, 0, 2); // 更新攝像頭 camera.aspect = window.innerWidth / window.innerHeight; // 更新攝像機(jī)的投影矩陣 camera.updateProjectionMatrix(); scene.add(camera); // 加入輔助軸,幫助我們查看3維坐標(biāo)軸 // const axesHelper = new THREE.AxesHelper(5); // scene.add(axesHelper); // 加載紋理 // 創(chuàng)建紋理加載器對象 const rgbeLoader = new RGBELoader(); rgbeLoader.loadAsync("./assets/2k.hdr").then((texture) => { texture.mapping = THREE.EquirectangularReflectionMapping; scene.background = texture; scene.environment = texture; }); // 創(chuàng)建著色器材質(zhì); 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); } }); // 設(shè)置渲染尺寸大小 renderer.setSize(window.innerWidth, window.innerHeight); // 監(jiān)聽屏幕大小改變的變化,設(shè)置渲染的尺寸 window.addEventListener("resize", () => { // console.log("resize"); // 更新攝像頭 camera.aspect = window.innerWidth / window.innerHeight; // 更新攝像機(jī)的投影矩陣 camera.updateProjectionMatrix(); // 更新渲染器 renderer.setSize(window.innerWidth, window.innerHeight); // 設(shè)置渲染器的像素比例 renderer.setPixelRatio(window.devicePixelRatio); }); // 將渲染器添加到body document.body.appendChild(renderer.domElement); // 初始化控制器 const controls = new OrbitControls(camera, renderer.domElement); // 設(shè)置控制器阻尼 controls.enableDamping = true; // 設(shè)置自動旋轉(zhuǎn) 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); // 使用渲染器渲染相機(jī)看這個場景的內(nèi)容渲染出來 renderer.render(scene, camera); } animate();
到此這篇關(guān)于利用ThreeJS實現(xiàn)孔明燈效果的文章就介紹到這了,更多相關(guān)ThreeJS孔明燈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳談js中window.location.search的用法和作用
下面小編就為大家?guī)硪黄斦刯s中window.location.search的用法和作用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02javascript 自動標(biāo)記來自搜索結(jié)果頁的關(guān)鍵字
使用javascript自動標(biāo)記來自搜索結(jié)果頁的關(guān)鍵字的實現(xiàn)代碼。2010-01-01怎樣使用?JavaScript?轉(zhuǎn)義字符串中的引號
要轉(zhuǎn)義字符串中的單引號或雙引號,需要在字符串內(nèi)容中的每個單引號或雙引號之前使用反斜杠?\?字符,例如?‘that’s?it’,這篇文章主要介紹了如何使用?JavaScript?轉(zhuǎn)義字符串中的引號,需要的朋友可以參考下2023-11-11JavaScript遍歷數(shù)組和對象的元素簡單操作示例
這篇文章主要介紹了JavaScript遍歷數(shù)組和對象的元素簡單操作,結(jié)合實例形式分析了javascript數(shù)組與對象元素遍歷相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-07-07JavaScript選擇排序算法原理與實現(xiàn)方法示例
這篇文章主要介紹了JavaScript選擇排序算法原理與實現(xiàn)方法,簡單分析了選擇排序算法的概念、原理并結(jié)合實例形式分析了JavaScript選擇排序算法的相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2018-08-08