effectnode-3dworld

    0.0.20 • Public • Published

    effectnode-3dworld

    create 3d world with markers in userData

    NPM JavaScript Style Guide

    Screenshot

    Demo

    Install

    npm install --save effectnode-3dworld

    Usage

    import React, { Suspense, useEffect } from 'react'
    import { Canvas, useThree } from '@react-three/fiber'
    import { useGLTF, PerspectiveCamera, useTexture } from '@react-three/drei'
    import {
      Map3D,
      UserContorls,
      TailCursor,
      SimpleBloomer,
      StarSky,
      TheHelper,
      useComputeEnvMap
    } from 'effectnode-3dworld'
    
    // needs trailing slash
    export const BASE_URL =
      process.env.NODE_ENV === 'production'
        ? `https://wonglok.github.io/effectnode-3dworld/`
        : `/`
    
    const App = () => {
      return (
        <Canvas dpr={[0, 1.5]} style={{ width: '100%', height: '100%' }}>
          <Suspense fallback={<LoadingScreen></LoadingScreen>}>
            <Content3D></Content3D>
          </Suspense>
        </Canvas>
      )
    }
    
    function Content3D() {
      let gltf = useGLTF(`${BASE_URL}map/demo-map-000.glb`)
    
      return (
        <group>
          {gltf.scene && (
            <Map3D object={gltf.scene}>
              {({ Now }) => {
                return (
                  <group>
                    <UserContorls
                      higherCamera={1.5}
                      avatarSpeed={2}
                      Now={Now}
                    ></UserContorls>
                    <TailCursor Now={Now} color={'#bababa'}></TailCursor>
                    <TheHelper Now={Now}></TheHelper>
                  </group>
                )
              }}
            </Map3D>
          )}
    
          <SimpleBloomer></SimpleBloomer>
    
          {/* Optional */}
          <ShaderEnvLight imageURL={`${BASE_URL}image/sky.png`}></ShaderEnvLight>
    
          {/* Optional */}
          <StarSky></StarSky>
        </group>
      )
    }
    
    function ShaderEnvLight({ imageURL }) {
      let tex = useTexture(imageURL)
      let { get } = useThree()
      let envMap = useComputeEnvMap(
        /* glsl */ `
          const mat2 m = mat2( 0.80,  0.60, -0.60,  0.80 );
    
          float noise( in vec2 p ) {
            return sin(p.x)*sin(p.y);
          }
    
          float fbm4( vec2 p ) {
              float f = 0.0;
              f += 0.5000 * noise( p ); p = m * p * 2.02;
              f += 0.2500 * noise( p ); p = m * p * 2.03;
              f += 0.1250 * noise( p ); p = m * p * 2.01;
              f += 0.0625 * noise( p );
              return f / 0.9375;
          }
    
          float fbm6( vec2 p ) {
              float f = 0.0;
              f += 0.500000*(0.5 + 0.5 * noise( p )); p = m*p*2.02;
              f += 0.250000*(0.5 + 0.5 * noise( p )); p = m*p*2.03;
              f += 0.125000*(0.5 + 0.5 * noise( p )); p = m*p*2.01;
              f += 0.062500*(0.5 + 0.5 * noise( p )); p = m*p*2.04;
              f += 0.031250*(0.5 + 0.5 * noise( p )); p = m*p*2.01;
              f += 0.015625*(0.5 + 0.5 * noise( p ));
              return f/0.96875;
          }
    
          float pattern (vec2 p) {
            float vout = fbm4( p + time + fbm6(  p + fbm4( p + time )) );
            return abs(vout);
          }
    
          uniform sampler2D textureBG;
    
          vec4 mainImage (vec2 uv) {
            vec4 bg = texture2D(textureBG, uv);
    
            vec3 rainbow = vec3(
              0.35 + pattern(uv * 1.70123 + -0.17 * cos(time * 0.05)),
              0.35 + pattern(uv * 1.70123 +  0.0 * cos(time * 0.05)),
              0.35 + pattern(uv * 1.70123 +  0.17 * cos(time * 0.05))
            );
    
            return vec4(rainbow.xyz, 1.0);
          }
      `.trim(),
        {
          textureBG: { value: tex }
        },
        128
      )
    
      useEffect(() => {
        let { scene } = get()
        scene.environment = envMap
        return () => {
          scene.environment = null
        }
      }, [envMap, get])
    
      return null
    }
    
    function LoadingScreen() {
      return (
        <group>
          <group rotation-x={Math.PI * 0}>
            <gridHelper args={[150, 50, 0x232323, 0xbababa]}></gridHelper>
          </group>
    
          <PerspectiveCamera
            position={[0, 30, 30]}
            rotation-x={Math.PI * -0.25}
            makeDefault={true}
          ></PerspectiveCamera>
        </group>
      )
    }
    
    export default App
    
    //

    Blender Custom Properties

    Custom Properties Feature / Function
    startAt = 1 Make its world position as starting point of map
    enableBloom = 1 Make it Glow
    enableDarken = 1 Make it Draken to prevent Glow overlaying
    isFloor = 1 Make it as floor so that we can walk on staris
    isHoverable = 1 Make it Hoverable by 3d Pointer
    website = wonglok.com Open website iframe
    tooltip = "My Name" Display Tooltip when hovered
    hoverColor = "#ff0000" Hover color for tail

    Blender Demo File

    Blender Demo File

    Blender GLTF Export Settings

    Export Blender GLTF

    License

    MIT © wonglok

    Keywords

    none

    Install

    npm i effectnode-3dworld

    DownloadsWeekly Downloads

    35

    Version

    0.0.20

    License

    MIT

    Unpacked Size

    452 kB

    Total Files

    9

    Last publish

    Collaborators

    • wonglok831