网站建设树状图,想做网站哪个公司比较好,谷歌浏览器下载安装2022最新版,使用dw设计个人简历网页模板近期在开发过程中#xff0c;因为项目已经接近尾声#xff0c;就需要对项目中的数据进行整合#xff0c;而数据看板不失为一个比较直观的展现形式。在数据看板中3D的展现形式是比较流行的展现形式#xff0c;那么如何在项目引入一个大的场景#xff0c;并且能够和后台发生… 近期在开发过程中因为项目已经接近尾声就需要对项目中的数据进行整合而数据看板不失为一个比较直观的展现形式。在数据看板中3D的展现形式是比较流行的展现形式那么如何在项目引入一个大的场景并且能够和后台发生交互呢。 我们首先想到的肯定是大型团队都使用的ue4(虚幻)和unity3d但是在没有个专门的团队的帮助下谈这些技术都是扯最后我还是决定使用three.js这个技术虽然有一定的上手难度但是最起码前端配合ui就能玩的转一些小的场景。 我使用的是vue3项目的vben框架如果有不同的前端技术我想差别应该不大。 一、项目位置 我想我们的项目位置在src/components/Scene创建一个vue页面用于展示页面在需要展示的地方引入该页面即可 二、首先我们来看一下threejs运行的四个条件 scene场景、renderer渲染器、camera相机、object对象在我的项目中是是如何使用的呢
来看具体代码
script langts setupimport { onMounted, onUnmounted, ref, watch } from vue;// 导入场景import scene from //threes/scene;//相机import cameraModule from //threes/camera;// 导入控制器import controls from //threes/controls;// 导入辅助坐标轴import axesHelper from //threes/axesHelper;// 导入渲染器import renderer from //threes/renderer;// 初始化调整屏幕import //three/init;// 导入添加物体函数import createMesh from //threes/createMesh;// 导入每一帧的执行函数import animate from //threes/animate;//绑定交互事件import eventHub from //utils/eventHub;// 场景元素divlet sceneDiv ref(null);// 添加相机scene.add(cameraModule.activeCamera);// 添加辅助坐标轴// scene.add(axesHelper);// 创建物体createMesh();// 创建事件的问题const props defineProps([eventList]);const onmousedown (e) {eventHub.emit(mouseDown, e);};onMounted(() {sceneDiv.value.appendChild(renderer.domElement);addEventListener(click, onmousedown, false);animate();});watch(() props.eventList,() {console.log(触发事件列表更新2);eventHub.emit(setEventList, props.eventList);},{ deep: true },);onUnmounted(() {console.log(销毁);removeEventListener(click, onmousedown, false);// removeEventListener(mousedown, onmousedown, false);});
/script
scene.js文件主要创建了一个场景并添加了平行光当然天气等条件都能加入进来
import * as THREE from three;
import { RGBELoader } from three/examples/jsm/loaders/RGBELoader.js;
// 初始化场景
const scene new THREE.Scene();// 添加雾霾
// const fog new THREE.Fog(0x000000, 0, 1000);
// scene.fog fog;// 导入hdr纹理
const hdrLoader new RGBELoader();
hdrLoader.loadAsync(./textures/023.hdr).then((texture) {scene.background texture;scene.environment texture;scene.environment.mapping THREE.EquirectangularReflectionMapping;
});// 添加平行光
const light new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 100, 10);
scene.add(light);export default scene;
cameraModule.js文件主要设置了相机的位置新增相机和切换相机的方法当然这个的命名是根据你的场景里相机的位置来决定的
import * as THREE from three;
import eventHub from //utils/eventHub;
// 创建透视相机
const camera new THREE.PerspectiveCamera(75, window.innerHeight / window.innerHeight, 1, 100000);
// 设置相机位置
camera.position.set(10, 80, 0);
class CameraModule {constructor() {this.activeCamera camera;this.collection {default: camera,};eventHub.on(toggleCamera, (name) {this.setActive(name);});}add (name, camera) {this.collection[name] camera;}setActive (name) {this.activeCamera this.collection[name];}
}
export default new CameraModule();renderer.js渲染器主要是设置了webGL的一些参数使你的场景不那么假
import * as THREE from three;
// 初始化渲染器
const renderer new THREE.WebGLRenderer({// 设置抗锯齿antialias: true,// depthbufferlogarithmicDepthBuffer: true,physicallyCorrectLights: true,alpha: true,
});
// 设置渲染尺寸大小
// renderer.setSize(window.innerWidth, window.innerHeight);
setTimeout(() {const container document.getElementById(sceneDiv);renderer.setSize(container.offsetWidth, container.offsetHeight);renderer.setClearAlpha(0);renderer.shadowMap.enabled true;renderer.toneMapping THREE.ACESFilmicToneMapping;renderer.toneMappingExposure 1.5;
}, 40);export default renderer;
我的object对象的加载放在了createMesh.js这个文件里面能够让分清他们的职责。
import scene from ./scene;
import City from ./mesh/City;
let city;
export default function createMesh () {// 创建城市city new City(scene);
}export function updateMesh (time) {city.update(time);
}当然在city.js里面我也加入了加载的方法能让public的glb数据文件能够加载到场景中。 this.loader.load(./screen/earth.glb, (gltf) {scene.add(gltf.scene);// targetList.push(gltf.scene);// 场景子元素遍历this.gltf gltf;this.floor1Group gltf.scene;});
好了基本的数据结构就是这样的那么就让我们来看看实际的效果图吧 希望对大家学习使用three.js有用有什么不懂的都可以问我哦
