封装three.js工具库

已于 2024-01-15 10:05:27 修改
阅读量690 收藏 11
点赞数 15
文章标签： javascript 开发语言 ecmascript
于 2024-01-12 10:13:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56809390/article/details/135545349
版权
本文介绍了如何在JavaScript中使用THREE.js库构建一个3D场景，包括初始化场景、相机、灯光、控制器，以及加载GLTF模型和HDR环境贴图。代码示例展示了如何动态调整模型和贴图的加载方式。
摘要由CSDN通过智能技术生成 
import * as THREE from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
/**
 * @class 
 * @param {String} domID 
 * @param {Object} options 
 
 * 
 * */
class ini1{
    constructor(options,domID ) {
       
        this.aac=aac;
        this.init(options)
     }
    //  初始化
     init(){
        // 初始化场景
       
       this.scene = this.createScene() 
       let scene = this.scene 
    //    初始化灯光
       let ambientLight = this.createLight({
        'type':'Directional', 
        'color':0xFFFFFF
       })
       
       scene.add(ambientLight)
     
    //    初始化相机
       this.camera = this.createCamera({
        'type':'Perspective',
       
       })
       scene.add(this.camera)
       this.camera.position.set(- 1.8, 0.6, 2.7)
      //  初始化控制器
      this.createControls()
    //    初始化渲染
       this.initRenderer()
       this.renders()
// 加载模型
     this.models=this.loadModel({
      'type':'gltf'
     }); 
     scene.add(this.models)
    //  
   this.rLoade= this.createRgbel({
    'type':'hdr'
   })
   scene.add(this.rLoade)
    window.addEventListener('resize', this.onWindowResize.bind(this));
     }
 // 创建场景
     createScene () {
       return new THREE.Scene()
     }
    //  创建相机
    createCamera(options) {
      
        // 透视相机
        if(options.type=='Perspective'){
          return new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.25,200);
        }
        // 正交相机
        if(options.type == 'Orthographic'){
          return new THREE.OrthographicCamera(left, right, top, bottom, near, 2000)
        }
      }
    
     //创建灯光
     createLight(options) {
      // 基础光
        if(options.type == 'Ambient'){
            return new THREE.AmbientLight(options.color);
        }
        // 环境光
        if(options.type == 'Hemisphere'){
            return new THREE.HemisphereLight();
        }
        // 点光源
        if(options.type == 'Point'){
          const pointLight = new THREE.PointLight(options.color)
          pointLight.position.set(0, 100, 100)
          return pointLight
        }
        // 方向光
        if(options.type == 'Directional'){
          const directionalLight = new THREE.DirectionalLight(options.color, 1) // 创建方向光
          // directionalLight.position.set(100,100,100)
          // // 是否产生阴影
          directionalLight.castShadow = true
          // directionalLight.shadow.camera.far = 1000
          // directionalLight.shadow.camera.near = 0.5
          // directionalLight.shadow.camera.left = 1000
          // directionalLight.shadow.camera.right = -1000
          // directionalLight.shadow.camera.top = 1000
          // directionalLight.shadow.camera.bottom = -1000
          return directionalLight
        }
       
      }
// 控制器
createControls(){
  this.controls = new OrbitControls(this.camera, this.aac)
    return this.controls
    
}
//这边被的大佬说了渲染、模型、和环境贴图的参数要在init方法调用的时候写才会更好点，不然每次调用的时候都要跑到下面
    //   渲染
      initRenderer() {
        this.renderer = new THREE.WebGLRenderer({
          antialias: true,
          alpha:true
        })
        this.renderer.setClearColor(0xEEEEEE, 0.0) 
        this.renderer.setPixelRatio( window.devicePixelRatio );
        this.renderer.setSize( window.innerWidth, window.innerHeight );
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
				this.renderer.toneMappingExposure = 1;
				this.renderer.outputEncoding = THREE.sRGBEncoding;
        aac.appendChild(this.renderer.domElement)

      }
      // 模型

      loadModel(options) {
        if(options.type=='gltf'){
          const loader = new GLTFLoader();
          loader.load(
            'models/gltf/feiji.glb',
            (gltf) => {
              gltf.scene.scale.set(0.05,0.05,0.05)
              this.scene.add(gltf.scene);
            },
            undefined,
            (error) => {
              console.error(' hhhhhh ', error);
            }
          );
          return loader
          }
       
      }
      // 环境贴图
      createRgbel(options){
        if(options.type=='hdr'){
          const rLoader = new RGBELoader().setPath('textures/equirectangular/')
          rLoader.load(
            'royal_esplanade_1k.hdr',
            (texture) => {
              texture.mapping = THREE.EquirectangularReflectionMapping;
              scene.environment = texture;
            },
            undefined,
            (error) => {
              console.error(' hhhhhh ', error);
            }
          );
          return rLoader
          }
      }
      renders(){
        this.scene.rotation.x += 0.01; 
        this.scene.rotation.y += 0.01; 
        this.renderer.render(this.scene,this.camera)
        requestAnimationFrame(this.renders.bind(this))
      }

      onWindowResize() {
        const width = window.innerWidth;
        const height = window.innerHeight;
      
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
      
        this.renderer.setSize(width, height);
      }
   

}
export default ini1;

更新了环境贴图和模型导入的部分

import * as THREE from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
/**
 * @class 
 * @param {String} domID 
 * @param {Object} options 
 
 * 
 * */
class ini1{
    constructor(options,domID ) {
       
        this.aac=aac;
        this.init(options)
     }
    //  初始化
     init(){
// 初始化场景
    this.scene = this.createScene() 
    let scene = this.scene 


//    初始化灯光
    let ambientLight = this.createLight({
    'type':'Directional', 
    'color':0xFFFFFF
    })      
    scene.add(ambientLight)


//    初始化相机
    this.camera = this.createCamera({
    'type':'Perspective',
    
    })
    scene.add(this.camera)
    this.camera.position.set(- 1.8, 0.6, 2.7)


//  初始化控制器
    this.createControls()

//    初始化渲染
    this.renderer=this.initRenderer()//调用封装的方法
    this.renderer.setClearColor(0xEEEEEE, 0.0) //设置颜色和透明度
    this.renderer.setPixelRatio( window.devicePixelRatio );
    this.renderer.setSize( window.innerWidth, window.innerHeight );
    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
    this.renderer.toneMappingExposure = 1;
    this.renderer.outputEncoding = THREE.sRGBEncoding;
    aac.appendChild(this.renderer.domElement)
    this.renders()


// 加载模型
    this.models=this.loadModel({
      'type':'gltf'
    }); 
    this.models.load(
      'models/gltf/feiji.glb',
      (gltf) => {
        gltf.scene.scale.set(0.05,0.05,0.05)
        this.scene.add(gltf.scene);
      },
      undefined,
      (error) => {
        console.error(' cuolalalal ', error);
      }
    );
    scene.add(this.models)


//  环境贴图
   this.rLoade= this.createRgbel({
      'type':'hdr',
   })
   this.rLoade.setPath('textures/equirectangular/')
    this.rLoade.load(
      'royal_esplanade_1k.hdr',
      (texture) => {
        texture.mapping = THREE.EquirectangularReflectionMapping;
        scene.environment = texture;
      },
      undefined,
      (error) => {
        console.error(' hhhhhh ', error);
      }
    );
   scene.add(this.rLoade)
   console.log(this.rLoade)

// 监听窗口大小
    window.addEventListener('resize', this.onWindowResize.bind(this));
    }


 // 创建场景
     createScene () {
       return new THREE.Scene()
     }
    //  创建相机
    createCamera(options) {
      
        // 透视相机
        if(options.type=='Perspective'){
          return new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.25,200);
        }

        // 正交相机
        if(options.type == 'Orthographic'){
          return new THREE.OrthographicCamera(left, right, top, bottom, near, 2000)
        }
      }
    
     //创建灯光
     createLight(options) {
      // 基础光
        if(options.type == 'Ambient'){
            return new THREE.AmbientLight(options.color);
        }
        // 环境光
        if(options.type == 'Hemisphere'){
            return new THREE.HemisphereLight();
        }
        // 点光源
        if(options.type == 'Point'){
          return new THREE.PointLight(options.color)
          // pointLight.position.set(0, 100, 100)
          // return pointLight
        }
        // 方向光
        if(options.type == 'Directional'){
         return new THREE.DirectionalLight(options.color, 1) // 创建方向光
          // directionalLight.position.set(100,100,100)
          // // 是否产生阴影
          // directionalLight.castShadow = true
        }
       
      }
// 控制器
createControls(){
  this.controls = new OrbitControls(this.camera, this.aac)
    return this.controls
    
}
    //   渲染
      initRenderer() {
        return new THREE.WebGLRenderer({
          antialias: true,
          alpha:true
        })
        

      }
      // 模型
      loadModel(options) {
        if(options.type=='gltf'){
          return new GLTFLoader();
          }
       
      }
      // 环境贴图
      createRgbel(options){
        if(options.type=='hdr'){
          return new RGBELoader()
          }
      }
      renders(){
        this.renderer.render(this.scene,this.camera)
        requestAnimationFrame(this.renders.bind(this))
      }

      onWindowResize() {
        const width = window.innerWidth;
        const height = window.innerHeight;
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(width, height);
      }
   

}
export default ini1;

大佬说上面的写的不好给我改了







init(){
// 加载模型
    this.models=this.loadModel({
      'type':'gltf',
      'src':'models/gltf/feiji.glb',
      'callback':function(data){
        data.scene.scale.set(0.05,0.05,0.05)
        scene.add(data.scene);
      }
    }); 
    scene.add(this.models)



//  环境贴图
   this.rLoade= this.createRgbel({
      'type':'hdr',
      'path':'textures/equirectangular/',
      'src':'royal_esplanade_1k.hdr',
      'callback':function(data){
        data.mapping = THREE.EquirectangularReflectionMapping;
        scene.environment = data;
      }
   })
   
   scene.add(this.rLoade)
}

 // 模型
      loadModel(options) {

        if(options.type=='gltf'){
          const mo = new GLTFLoader();
          mo.load(
            options.src,
            (gltf) => {
              options.callback(gltf)

            }
          );
          }
       
      }
      // 环境贴图
      createRgbel(options){
        if(options.type=='hdr'){
          const ro = new RGBELoader()
          ro.setPath(options.path)
      ro.load(
      options.src,
      (texture) => {
        options.callback(texture)
       
      }
    );
          }
      }

vue中

<template>
  <div id="3dmap">
    <div id="aac" ref="aac"></div>
  </div>
</template>

<script>
import * as THREE from 'three';
import ini1 from '../common/mapLib/Map/ini1.js';

export default {
  name: 'map3d1',
  data() {
    return {};
  },
  mounted() {
    const ma = this.$refs.aac;

    let map;
    map = new ini1(ma);
    console.log(map)
//前面封装的时候我已经从外部导入模型了，下面可以自己创建模型
    // const geometry = new THREE.BoxGeometry(5, 5, 5);
    // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00
    //  });
    // const cube = new THREE.Mesh(geometry, material);
    
    // map.scene.add(cube);
    // map.camera.lookAt(cube.position)
    // console.log(map.scene)
  },
};
</script>

糕冷小美h
关注
three.js封装
weixin_46002223的博客
03-26 405
three.js封装快速上手工具
把threejs的STLLoader封装成React组件
08-10
把threejs的STLLoader封装成React组件
Three.js机器人与星系动态场景（四）：封装Threejs业务组件
最新发布
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
07-08 606
实际在写业务的时候不会在每个组件里都写几十行的threejs的初始化工作。我们可以 将通用的threejs的场景、相机、render、轨道控制器等进行统一初始化。同时将非主体的函数提到组件外部，通过import导入进组件。将业务逻辑主体更清晰一些。下面的代码是基于react+threejs开发，感兴趣可以看看之前的博客关于这部分详细的介绍。
threejs 初始化封装
王小二的博客
08-27 1132
threejs 初始化封装 对threejs场景进行初始封装，以便多项目复用。自用学习记录仅供参考，欢迎留言。 初始化包括以下： 场景初始化 相机初始化 灯光初始化，点光源，平行光，环境光 初始化渲染器 初始化鼠标控制器 通过new Web3DRenderer() 实例化以后可以拿到以上所有初始化对象。 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' const THREE = require('thr
three.js粒子系统封装
LBY_XK的博客
06-02 285
【代码】three.js粒子系统封装。
CesiumJS整合ThreeJS插件封装
奔跑的痕迹的博客
06-20 854
最近做项目有一个三维需求使用CesiumJS比较难以实现，发现THREEJS中效果比较合适，于是准备将THREEJS整合到CesiumJS中为实现效果所需我们找到官方博客，于是根据该博客提供的思路去实现整合。
Three.js是基于原生WebGL封装运行的三维引擎-three.js
07-27
Three.js 是一个强大的JavaScript库，它为WebGL提供了一个易用的接口，使得开发者无需深入理解复杂的WebGL底层API就能创建交互式的3D图形。WebGL是一种在浏览器中实现硬件加速3D图形的标准，但其本身的API相对复杂，...
three-building:three.js+vue 3D建筑
08-04
Three.js是一个流行的JavaScript库，它为Web浏览器提供了丰富的3D图形功能，使得在网页上构建复杂的3D场景变得容易。Vue则是一个轻量级的前端JavaScript框架，以其易用性和灵活性著称，用于构建用户界面。 【描述】...
three.js 智慧城市模型
07-06
Three.js 是一款基于 WebGL 的 JavaScript 库，用于在浏览器中创建三维图形和动画，它在构建智慧城市模型中扮演了核心角色。本文将深入探讨如何利用 three.js 来创建智慧城市的虚拟表示，并介绍与之相关的技术知识点...
three.js资源包
09-15
Three.js 是一个基于 WebGL 的开源 JavaScript 库，它允许开发者在浏览器中创建交互式的3D图形。WebGL 是一种在网页上实现硬件加速的3D图形渲染技术，而Three.js 则是这个技术的友好封装，简化了WebGL的使用，使得非...
three-full:著名的ThreeJs库，带有集成示例作为es6模块
05-17
三满 弃用说明： 自从Three在JSM文件夹下发布他的示例文件以来，我感到非常高兴，应该避免使用此存储库。 该存储库的首要目标是在迁移过程中提供替代解决方案。 从现在开始，即使我出于个人用途维护该存储库，也请考虑改用Three.module.js。 谢谢大家！ Itee ... 28.0.2版本现在可以在三个r0.113.2下获得 扩展的三个JavaScript 3D库 Three.js附带了许多示例文件，目前这些示例文件不能用作ES6模块。 该项目的目的是转换所有示例文件，并将它们作为库的一部分包含在内。 设置 假设已经安装了npm和node。 安装： npm install --save three-full 用法 像Three.js一样，但是有越来越多的可用东西。 使用ES6： import { WhatIWant } from 'node_modules/thre
基于Threejs的3D框架
08-10
基于Three.js的3D框架
threegeo是一个基于threejs的地理可视化库
08-10
three-geo 是一个基于 three.js 的地理可视化库。 使用three-geo，我们可以通过简单地指定地球上任何地方的GPS坐标，轻松地近实时地建立卫星纹理的3D地形模型。 地形的几何形状基于Mapbox Maps API提供的RGB编码DEM（数字高程模型）。
Three.js（三）通过简单使用光源提供一个基础封装类
天空影
01-21 797
这篇文章主要是为了提供一个基础的封装类，但是因为直接硬生生的代码会感觉很不友好，所以就是把简单使用光源的这部分作为这个类的简单demo了。 效果图 附带功能 摄像头控制器 环境光和平行光的使用 网格的创建 网格辅助功能 性能监测工具 坐标轴辅助 自适应 创建地板 以上功能都是提供到能够使用的程度，至于实现其他的效果就要自己去看api了，毕竟我这篇文章的本意是提供一个可以开箱即用的类。 代码 ...
Three.js的轻量级封装框架Sim.js解析（1）
KingW
03-13 3494
这段事件在看《WebGL入门指南》，其中使用的Three.js的轻量级封装框架，本来使用Three.js框架就有点困难，还要使用Three.js的框架，OMG~~~发牢骚归发牢骚，不看是不会懂的。初看书本上的Sim.js写出的代码，第一感觉，这都写的是啥啊。的确，要看懂这些，要求对js的面向对象的思想有一定的了解。下面是本人先学先卖总结的有关js面向对象的知识，仅供参考： http://blog.
封装一个基于ThreeJS渲染基础模型的类，非常简单，可拖动可缩放
qq_44980680的博客
11-22 569
工作需求要求threeJS渲染一个模型以供可视化大屏展示，抛出模型精度不谈，只说业务实现
二、【DS-SDK封装】基于ThreeJS的三维场景开发库-核心Viewer封装
差不多先生的博客
10-16 750
viewer核心库的封装主要是针对threejs场景进行初始封装，以便多项目复用。具体细节我就不多写了，网上一大堆，但是我发现网上的例子都比较雷同，所以我的这一篇文档会着重从我做过的项目上遇到的一些问题来具体描写，详细请看第七、第八小节，主要是第一我们真实项目中，其实你的渲染页面不是整个页面，而且其中的一小块div，所以你的宽高是div而不是windws的（如下图）；第二对于页面大小变化的监视，以我的知识结构来说，还没有很好的解决方案来监视div的大小变化。
three.js vue仓库
11-03
three.js vue仓库是一个在Vue框架中使用three.js库的代码仓库。Vue.js是一种用于构建用户界面的JavaScript框架，而three.js是一个用于在Web浏览器中创建3D图形的JavaScript库。将这两者结合起来，可以在Vue应用程序中轻松地创建丰富的3D图形和交互效果。 在three.js vue仓库中，开发者可以找到与Vue框架集成的three.js组件，这些组件具有用于创建和渲染各种3D对象的功能。例如，开发者可以使用这些组件方便地创建立方体、球体、平面等3D物体，并在Vue模板中使用这些组件来展示它们。 除了基本的3D对象创建和渲染功能，three.js vue仓库还提供了其他有用的功能，例如相机控制、光照效果、动画等等。通过使用这些功能，开发者可以轻松地实现自定义的3D场景和动画效果。 使用three.js vue仓库的好处是，它为开发者提供了在Vue框架中集成three.js的封装和工具，使得创建复杂的3D效果变得更加简单和高效。开发者可以通过Vue的组件化开发方式，将three.js的功能模块化，并结合Vue的状态管理和生命周期钩子，实现更好的代码组织和可维护性。 总而言之，three.js vue仓库是一个方便开发者在Vue框架中使用three.js库创建3D图形和交互效果的仓库。它提供了与Vue框架集成的three.js组件和功能，使得开发者可以更轻松地实现各种复杂的3D场景和动画效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值