网站开发用软件,flash 网站开发教程,搜索引擎广告形式有哪些,湖南建设人力资源网 登录demo演示地址
FlyControls 是 THREE.js 中用于实现飞行控制的类#xff0c;它用于控制摄像机在三维空间中的飞行。
入参#xff1a;
object#xff1a;摄像机对象#xff0c;即要控制的摄像机。domElement#xff1a;用于接收用户输入事件的 HTML 元素#xff0c;通常…
demo演示地址
FlyControls 是 THREE.js 中用于实现飞行控制的类它用于控制摄像机在三维空间中的飞行。
入参
object摄像机对象即要控制的摄像机。domElement用于接收用户输入事件的 HTML 元素通常是渲染器的 DOM 元素。
出参
FlyControls 类本身没有直接返回出参但通过修改传入的摄像机对象的位置和方向从而影响场景中的摄像机视角。
使用示例
// 初始化摄像机、控制器、场景和渲染器
function init() {camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);controls new FlyControls(camera, renderer.domElement);scene new THREE.Scene();renderer new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 设置摄像机初始位置camera.position.set(0, 0, 5);// 添加一个立方体到场景中const geometry new THREE.BoxGeometry();const material new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube new THREE.Mesh(geometry, material);scene.add(cube);// 渲染场景animate();
}// 动画循环
function animate() {requestAnimationFrame(animate);// 更新飞行控制器controls.update();// 渲染场景renderer.render(scene, camera);
}在这个示例中我们创建了一个 FlyControls 实例并将摄像机和渲染器的 DOM 元素传递给它。然后在动画循环中我们调用 controls.update() 来更新控制器状态以响应用户的输入事件并通过 renderer.render() 渲染场景。
import * as THREE from three; // 导入主 THREE.js 库import Stats from three/addons/libs/stats.module.js; // 导入性能监控模块 Statsimport { FlyControls } from three/addons/controls/FlyControls.js; // 导入飞行控制器 FlyControls
import { EffectComposer } from three/addons/postprocessing/EffectComposer.js; // 导入后期处理特效组件 EffectComposer
import { RenderPass } from three/addons/postprocessing/RenderPass.js; // 导入渲染通道 RenderPass
import { FilmPass } from three/addons/postprocessing/FilmPass.js; // 导入胶片特效 FilmPass
import { OutputPass } from three/addons/postprocessing/OutputPass.js; // 导入输出通道 OutputPass// 行星及其环境属性的常量定义
const radius 6371; // 地球半径
const tilt 0.41; // 行星倾斜角度
const rotationSpeed 0.02; // 行星旋转速度const cloudsScale 1.005; // 云层纹理比例
const moonScale 0.23; // 月球比例const MARGIN 0; // 场景边距
let SCREEN_HEIGHT window.innerHeight - MARGIN * 2; // 计算屏幕高度
let SCREEN_WIDTH window.innerWidth; // 计算屏幕宽度let camera, controls, scene, renderer, stats; // 摄像机、控制器、场景、渲染器和性能监控模块的全局变量声明
let geometry, meshPlanet, meshClouds, meshMoon; // 几何体和代表行星、云层和月球的网格变量声明
let dirLight; // 光源的声明let composer; // 后期处理特效的 Composer 声明const textureLoader new THREE.TextureLoader(); // 创建纹理加载器实例let d, dPlanet, dMoon; // 距离计算的变量声明
const dMoonVec new THREE.Vector3(); // 月球距离计算的向量const clock new THREE.Clock(); // 创建时钟用于计时创建透视摄像机,初始化场景
function init() {// 创建透视摄像机camera new THREE.PerspectiveCamera(25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7);camera.position.z radius * 5; // 设置摄像机位置scene new THREE.Scene(); // 创建场景scene.fog new THREE.FogExp2(0x000000, 0.00000025); // 添加雾效dirLight new THREE.DirectionalLight(0xffffff, 3); // 创建定向光源dirLight.position.set(-1, 0, 1).normalize(); // 设置光源位置scene.add(dirLight); // 将光源添加到场景中// 创建具有法线贴图的材质const materialNormalMap new THREE.MeshPhongMaterial({specular: 0x7c7c7c, // 设置镜面高光颜色shininess: 15, // 设置光泽度map: textureLoader.load(textures/planets/earth_atmos_2048.jpg), // 设置漫反射贴图specularMap: textureLoader.load(textures/planets/earth_specular_2048.jpg), // 设置镜面高光贴图normalMap: textureLoader.load(textures/planets/earth_normal_2048.jpg), // 设置法线贴图normalScale: new THREE.Vector2(0.85, -0.85) // 设置法线贴图缩放});materialNormalMap.map.colorSpace THREE.SRGBColorSpace; // 设置贴图颜色空间// 创建行星geometry new THREE.SphereGeometry(radius, 100, 50);meshPlanet new THREE.Mesh(geometry, materialNormalMap);meshPlanet.rotation.y 0;meshPlanet.rotation.z tilt;scene.add(meshPlanet);// 创建云层const materialClouds new THREE.MeshLambertMaterial({map: textureLoader.load(textures/planets/earth_clouds_1024.png), // 设置云层贴图transparent: true // 开启透明});materialClouds.map.colorSpace THREE.SRGBColorSpace; // 设置贴图颜色空间meshClouds new THREE.Mesh(geometry, materialClouds);meshClouds.scale.set(cloudsScale, cloudsScale, cloudsScale);meshClouds.rotation.z tilt;scene.add(meshClouds);// 创建月球const materialMoon new THREE.MeshPhongMaterial({map: textureLoader.load(textures/planets/moon_1024.jpg) // 设置月球贴图});materialMoon.map.colorSpace THREE.SRGBColorSpace; // 设置贴图颜色空间meshMoon new THREE.Mesh(geometry, materialMoon);meshMoon.position.set(radius * 5, 0, 0);meshMoon.scale.set(moonScale, moonScale, moonScale);scene.add(meshMoon);// 创建星星const r radius,starsGeometry [new THREE.BufferGeometry(), new THREE.BufferGeometry()];const vertices1 [];const vertices2 [];const vertex new THREE.Vector3();for (let i 0; i 250; i) {vertex.x Math.random() * 2 - 1;vertex.y Math.random() * 2 - 1;vertex.z Math.random() * 2 - 1;vertex.multiplyScalar(r);vertices1.push(vertex.x, vertex.y, vertex.z);}for (let i 0; i 1500; i) {vertex.x Math.random() * 2 - 1;vertex.y Math.random() * 2 - 1;vertex.z Math.random() * 2 - 1;vertex.multiplyScalar(r);vertices2.push(vertex.x, vertex.y, vertex.z);}starsGeometry[0].setAttribute(position, new THREE.Float32BufferAttribute(vertices1, 3));starsGeometry[1].setAttribute(position, new THREE.Float32BufferAttribute(vertices2, 3));const starsMaterials [new THREE.PointsMaterial({ color: 0x9c9c9c, size: 2, sizeAttenuation: false }),new THREE.PointsMaterial({ color: 0x9c9c9c, size: 1, sizeAttenuation: false }),new THREE.PointsMaterial({ color: 0x7c7c7c, size: 2, sizeAttenuation: false }),new THREE.PointsMaterial({ color: 0x838383, size: 1, sizeAttenuation: false }),new THREE.PointsMaterial({ color: 0x5a5a5a, size: 2, sizeAttenuation: false }),new THREE.PointsMaterial({ color: 0x5a5a5a, size: 1, sizeAttenuation: false })];for (let i 10; i 30; i) {const stars new THREE.Points(starsGeometry[i % 2], starsMaterials[i % 6]);stars.rotation.x Math.random() * 6;stars.rotation.y Math.random() * 6;stars.rotation.z Math.random() * 6;stars.scale.setScalar(i * 10);stars.matrixAutoUpdate false;stars.updateMatrix();scene.add(stars);}// 创建 WebGL 渲染器renderer new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);document.body.appendChild(renderer.domElement);// 创建飞行控制器controls new FlyControls(camera, renderer.domElement);controls.movementSpeed 1000;controls.domElement renderer.domElement;controls.rollSpeed Math.PI / 24;controls.autoForward false;controls.dragToLook false;// 创建性能监控模块stats new Stats();document.body.appendChild(stats.dom);window.addEventListener(resize, onWindowResize); // 添加窗口调整事件监听器// 添加后期处理特效const renderModel new RenderPass(scene, camera);const effectFilm new FilmPass(0.35);const outputPass new OutputPass();composer new EffectComposer(renderer);composer.addPass(renderModel);composer.addPass(effectFilm);composer.addPass(outputPass);
}更新屏幕高度和宽度 function onWindowResize() {// 更新屏幕高度和宽度SCREEN_HEIGHT window.innerHeight;SCREEN_WIDTH window.innerWidth;// 更新摄像机的纵横比并更新投影矩阵camera.aspect SCREEN_WIDTH / SCREEN_HEIGHT;camera.updateProjectionMatrix();// 更新渲染器和后期处理特效组件的尺寸renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);composer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
}function animate() {// 请求下一帧动画requestAnimationFrame(animate);// 渲染场景并更新性能监控模块render();stats.update();
}旋转行星和云层 function render() {// 旋转行星和云层const delta clock.getDelta(); // 获取时间间隔meshPlanet.rotation.y rotationSpeed * delta; // 根据时间间隔旋转行星meshClouds.rotation.y 1.25 * rotationSpeed * delta; // 根据时间间隔旋转云层// 当接近表面时减慢速度dPlanet camera.position.length(); // 计算摄像机到行星的距离dMoonVec.subVectors(camera.position, meshMoon.position); // 计算摄像机到月球的向量距离dMoon dMoonVec.length(); // 计算摄像机到月球的距离if (dMoon dPlanet) {d (dMoon - radius * moonScale * 1.01); // 如果接近月球则减速} else {d (dPlanet - radius * 1.01); // 如果接近行星则减速}controls.movementSpeed 0.33 * d; // 根据距离更新控制器的移动速度controls.update(delta); // 更新控制器的状态composer.render(delta); // 渲染场景并应用后期处理效果
}完整源码 !DOCTYPE html
html langenheadtitlethree.js webgl - fly controls - earth/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, user-scalableno, minimum-scale1.0, maximum-scale1.0link typetext/css relstylesheet hrefmain.cssstylebody {background:#000;color: #eee;}a {color: #0080ff;}b {color: orange}/style/headbodydiv idinfoa hrefhttps://threejs.org target_blank relnoopenerthree.js/a - earth [fly controls]br/bWASD/b move, bR|F/b up | down, bQ|E/b roll, bup|down/b pitch, bleft|right/b yaw/divscript typeimportmap{imports: {three: ../build/three.module.js,three/addons/: ./jsm/}}/scriptscript typemoduleimport * as THREE from three;import Stats from three/addons/libs/stats.module.js;import { FlyControls } from three/addons/controls/FlyControls.js;import { EffectComposer } from three/addons/postprocessing/EffectComposer.js;import { RenderPass } from three/addons/postprocessing/RenderPass.js;import { FilmPass } from three/addons/postprocessing/FilmPass.js;import { OutputPass } from three/addons/postprocessing/OutputPass.js;const radius 6371;const tilt 0.41;const rotationSpeed 0.02;const cloudsScale 1.005;const moonScale 0.23;const MARGIN 0;let SCREEN_HEIGHT window.innerHeight - MARGIN * 2;let SCREEN_WIDTH window.innerWidth;let camera, controls, scene, renderer, stats;let geometry, meshPlanet, meshClouds, meshMoon;let dirLight;let composer;const textureLoader new THREE.TextureLoader();let d, dPlanet, dMoon;const dMoonVec new THREE.Vector3();const clock new THREE.Clock();init();animate();function init() {camera new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );camera.position.z radius * 5;scene new THREE.Scene();scene.fog new THREE.FogExp2( 0x000000, 0.00000025 );dirLight new THREE.DirectionalLight( 0xffffff, 3 );dirLight.position.set( - 1, 0, 1 ).normalize();scene.add( dirLight );const materialNormalMap new THREE.MeshPhongMaterial( {specular: 0x7c7c7c,shininess: 15,map: textureLoader.load( textures/planets/earth_atmos_2048.jpg ),specularMap: textureLoader.load( textures/planets/earth_specular_2048.jpg ),normalMap: textureLoader.load( textures/planets/earth_normal_2048.jpg ),// y scale is negated to compensate for normal map handedness.normalScale: new THREE.Vector2( 0.85, - 0.85 )} );materialNormalMap.map.colorSpace THREE.SRGBColorSpace;// planetgeometry new THREE.SphereGeometry( radius, 100, 50 );meshPlanet new THREE.Mesh( geometry, materialNormalMap );meshPlanet.rotation.y 0;meshPlanet.rotation.z tilt;scene.add( meshPlanet );// cloudsconst materialClouds new THREE.MeshLambertMaterial( {map: textureLoader.load( textures/planets/earth_clouds_1024.png ),transparent: true} );materialClouds.map.colorSpace THREE.SRGBColorSpace;meshClouds new THREE.Mesh( geometry, materialClouds );meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );meshClouds.rotation.z tilt;scene.add( meshClouds );// moonconst materialMoon new THREE.MeshPhongMaterial( {map: textureLoader.load( textures/planets/moon_1024.jpg )} );materialMoon.map.colorSpace THREE.SRGBColorSpace;meshMoon new THREE.Mesh( geometry, materialMoon );meshMoon.position.set( radius * 5, 0, 0 );meshMoon.scale.set( moonScale, moonScale, moonScale );scene.add( meshMoon );// starsconst r radius, starsGeometry [ new THREE.BufferGeometry(), new THREE.BufferGeometry() ];const vertices1 [];const vertices2 [];const vertex new THREE.Vector3();for ( let i 0; i 250; i ) {vertex.x Math.random() * 2 - 1;vertex.y Math.random() * 2 - 1;vertex.z Math.random() * 2 - 1;vertex.multiplyScalar( r );vertices1.push( vertex.x, vertex.y, vertex.z );}for ( let i 0; i 1500; i ) {vertex.x Math.random() * 2 - 1;vertex.y Math.random() * 2 - 1;vertex.z Math.random() * 2 - 1;vertex.multiplyScalar( r );vertices2.push( vertex.x, vertex.y, vertex.z );}starsGeometry[ 0 ].setAttribute( position, new THREE.Float32BufferAttribute( vertices1, 3 ) );starsGeometry[ 1 ].setAttribute( position, new THREE.Float32BufferAttribute( vertices2, 3 ) );const starsMaterials [new THREE.PointsMaterial( { color: 0x9c9c9c, size: 2, sizeAttenuation: false } ),new THREE.PointsMaterial( { color: 0x9c9c9c, size: 1, sizeAttenuation: false } ),new THREE.PointsMaterial( { color: 0x7c7c7c, size: 2, sizeAttenuation: false } ),new THREE.PointsMaterial( { color: 0x838383, size: 1, sizeAttenuation: false } ),new THREE.PointsMaterial( { color: 0x5a5a5a, size: 2, sizeAttenuation: false } ),new THREE.PointsMaterial( { color: 0x5a5a5a, size: 1, sizeAttenuation: false } )];for ( let i 10; i 30; i ) {const stars new THREE.Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );stars.rotation.x Math.random() * 6;stars.rotation.y Math.random() * 6;stars.rotation.z Math.random() * 6;stars.scale.setScalar( i * 10 );stars.matrixAutoUpdate false;stars.updateMatrix();scene.add( stars );}renderer new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );document.body.appendChild( renderer.domElement );//controls new FlyControls( camera, renderer.domElement );controls.movementSpeed 1000;controls.domElement renderer.domElement;controls.rollSpeed Math.PI / 24;controls.autoForward false;controls.dragToLook false;//stats new Stats();document.body.appendChild( stats.dom );window.addEventListener( resize, onWindowResize );// postprocessingconst renderModel new RenderPass( scene, camera );const effectFilm new FilmPass( 0.35 );const outputPass new OutputPass();composer new EffectComposer( renderer );composer.addPass( renderModel );composer.addPass( effectFilm );composer.addPass( outputPass );}function onWindowResize() {SCREEN_HEIGHT window.innerHeight;SCREEN_WIDTH window.innerWidth;camera.aspect SCREEN_WIDTH / SCREEN_HEIGHT;camera.updateProjectionMatrix();renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );composer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );}function animate() {requestAnimationFrame( animate );render();stats.update();}function render() {// rotate the planet and cloudsconst delta clock.getDelta();meshPlanet.rotation.y rotationSpeed * delta;meshClouds.rotation.y 1.25 * rotationSpeed * delta;// slow down as we approach the surfacedPlanet camera.position.length();dMoonVec.subVectors( camera.position, meshMoon.position );dMoon dMoonVec.length();if ( dMoon dPlanet ) {d ( dMoon - radius * moonScale * 1.01 );} else {d ( dPlanet - radius * 1.01 );}controls.movementSpeed 0.33 * d;controls.update( delta );composer.render( delta );}/script/body
/html
本内容来源于小豆包想要更多内容请跳转小豆包 》
