@ridp/threejs

@ridp/threejs

Hooks

• useThreeJs 声明:

  /**
  * 
  * @param {String} selector  ID  '#xxxx'
  * @param {Object} option - 初始化参数
  * @property {Boolean} option.css3d - 模型
  * @returns any
  */
  function useThreeJs(selector, option)
  

  使用:

  import { useThreeJs } from '@ridp/threejs'
  
  const { scene, camera, renderer, control, domWidth, domHeight, isReady, addAnimate, frameArea } = useThreeJs("#InsId", )
  
  

  返回变量：

  • scene

     THREE.Scene     
    
    

  • camera:

     THREE.PerspectiveCamera 
    

  • renderer

     const renderer = new WebGLRenderer({
        antialias: true,
        alpha: true,
        precision: "mediump",
        logarithmicDepthBuffer: true,
    })
    

  • control

    THREE.OrbitControls
    

  • domWidth

        ref(Number)
    

  • domHeight

        ref(Number)
    

  • isReady

        ref(Boolean)
    

  返回方法:

  • addAnimate

    /**
        * 循环帧中添加执行函数
        * @param {*} animate 
    */
    function addAnimate(animate): void
    
    

  • frameArea

    /**物体视窗自动适应
        *
        * @param {Object3D} model
        * @param {Number} scale
        * @param {Camera} camera
        * @param {OrbitControls} controls
        * @param {Vector3} offset
    */
    function frameArea(model, scale, camera, controls, offset): void
    

• useRaycaster

• useObb

• useGLTFLoader

Instance 实例

Utils 工具