drcmda Github contribution chart
drcmda Github Stats
drcmda Most Used Languages

Activity

05 Oct 2022

Drcmda

feat: add OnDragStartProps to onDragStart of PivotControls (#1076)

  • feat: add dragged component info to onDragStart

  • feat: more info for OnDragStartProps

Pushed On 05 Oct 2022 at 05:36:55
Pull Request

Drcmda

feat: add OnDragStartProps to onDragStart of PivotControls

Created On 05 Oct 2022 at 05:36:54

Drcmda

fix: make onChange an optional props in KeyboardControls (#1082)

Co-authored-by: itsuka 10559297-itsuka_dev@users.noreply.gitlab.com

Pushed On 05 Oct 2022 at 07:23:07
Pull Request

Drcmda

fix: make onChange an optional props in KeyboardControls

Created On 05 Oct 2022 at 07:23:06

Drcmda

fix: object parenting

Pushed On 04 Oct 2022 at 05:38:06
Create Branch

Drcmda

Description not entered by the user.

On 03 Oct 2022 at 02:59:38

Drcmda

Description not entered by the user.

On 03 Oct 2022 at 02:58:49
Issue Comment

Drcmda

Textures from `useTexture` don’t receive options applied in `useEffect`

  • three version: 0.140.2
  • @react-three/fiber version: 8.0.7
  • @react-three/drei version: 9.7.1
  • node version:
  • npm (or yarn) version:

Problem description:

Textures from useTexture don’t receive the repeat property when it’s set in a useEffect. It does work when set in a useLayoutEffect.

This is probably due to the internal useEffect here https://github.com/pmndrs/drei/blob/6964043afe2c30af7cb5e07411c49aca2de79a2c/src/core/useTexture.tsx#L16 overriding the setting.

Relevant code:

Suggested solution:

Not sure, maybe to change the internal useEffect to a useLayoutEffect

Forked On 02 Oct 2022 at 07:54:45

Drcmda

i bumped into this today @FarazzShaikh i think we should revert. this most likely isn't about useEffect, but just threejs not being able to set certain properties without needsUpdate, which isn't a bug.

this works

 useEffect(() => {
    tex.wrapS = tex.wrapT = RepeatWrapping;
    tex.repeat.setScalar(2);
    tex.needsUpdate = true
  }, [tex]) 

the onload imo just leads to bad coding practices.

Commented On 02 Oct 2022 at 07:54:45

Drcmda

fix: metaballs center position

Pushed On 01 Oct 2022 at 01:39:29

Drcmda

Merge branch 'master' of https://github.com/pmndrs/drei

Pushed On 01 Oct 2022 at 01:39:29
Issue Comment

Drcmda

Can't load potsdamer-platz/potsdamer_platz_1k.hdr

It's always easy to fail to load when I use controllers and renderers potsdamer-platz/potsdamer_platz_1k.hdr,The full resource link is https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/potsdamer-platz/potsdamer_platz_1k.hdr;This is not mandatory, but basically it is very easy to encounter this problem when opening the page for the first time;Below is my code and error message:

import React, { Suspense, useLayoutEffect, useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, Stage } from '@react-three/drei'
import useStore from '@/utils/store'

export default function Viewer({ shadows, contactShadow, autoRotate, environment, preset, intensity } : any) {
  const scene: any = useStore((store) => store.scene)
  const ref = useRef()
  useLayoutEffect(() => {
    scene.traverse((obj: any) => {
      if (obj.isMesh) {
        obj.castShadow = obj.receiveShadow = shadows
        obj.material.envMapIntensity = 0.8
      }
    })
  }, [scene, shadows])

  return (
    <Canvas style={{ width: '100%', height: '100%' }} gl={{ preserveDrawingBuffer: true }} shadows dpr={[1, 1.5]} camera={{ position: [0, 0, 150], fov: 50 }}>
      <ambientLight intensity={0.25} />
      <Suspense fallback={null}>
        <Stage
          // @ts-ignore
          controls={ref}
          preset={preset}
          intensity={intensity}
          contactShadow={contactShadow}
          shadows
          adjustCamera
          environment={environment}
        >
          <primitive object={scene} />
        </Stage>
      </Suspense>
      {/* @ts-ignore */}
      <OrbitControls ref={ref} autoRotate={autoRotate} />
    </Canvas>
  )
} 
import React, { useEffect, useState } from 'react';
import useStore from '@/utils/store';
import { useControls } from 'leva';
import { Mask } from 'antd-mobile';
import { useLocation } from 'react-router-dom';
import Viewer from './Viewer';
import './index.less';

const Rotate = (props: any) => {

    const [visible, setVisible] = useState(true);
    const { scene, animations, generateScene, isLoading, clearScene } = useStore();

    const location: any = useLocation();
    console.log('location', location);
    const { model_url, back_image } = location.state;

    const [config, setConfig] = useControls(() => ({
        types: { value: false, hint: 'Add Typescript definitions' },
        shadows: { value: true, hint: 'Let meshes cast and receive shadows' },
        instanceall: { label: 'instance all', value: false, hint: 'Instance every geometry (for cheaper re-use)' },
        instance: { value: false, hint: ' Instance re-occuring geometry' },
        verbose: { value: false, hint: 'Verbose output w/ names and empty groups' },
        keepnames: { value: false, label: 'keep names', hint: 'Keep original names' },
        keepgroups: { value: false, label: 'keep groups', hint: 'Keep (empty) groups' },
        aggressive: { value: false, hint: 'Aggressively prune the graph (empty groups, transform overlap)' },
        meta: { value: false, hint: 'Include metadata (as userData)' },
        precision: { value: 2, min: 1, max: 8, step: 1, hint: 'Number of fractional digits (default: 2)' },
      }))

    const preview = useControls(
        'preview',
        {
            autoRotate: true,
            contactShadow: true,
            intensity: { value: 1, min: 0, max: 2, step: 0.1, label: 'light intensity' },
            preset: {
            value: 'rembrandt',
            options: ['rembrandt', 'portrait', 'upfront', 'soft'],
            },
            environment: {
            value: 'city',
            options: ['', 'sunset', 'dawn', 'night', 'warehouse', 'forest', 'apartment', 'studio', 'city', 'park', 'lobby'],
            },
        },
        { collapsed: true }
    )

    useEffect(() => {
        setConfig({ verbose: animations })
    }, [animations]);

    useEffect(() => {
        generateScene(model_url)
      }, [model_url]);

    useEffect(() => {
        setVisible(isLoading)
    }, [isLoading]);

    useEffect(() => {
        window.onpopstate = function () {
            console.log('begin');
            clearScene();
        };
        return () => {
          // 回退事件只用于当前组件,则需要在组件销毁时把回退事件销毁
          window.onpopstate = null;
        };
      }, []);

    return (
        <div className="rotate-page">
            {
                !isLoading && <div className="animation">
                    {scene && <Viewer scene={scene} {...config} {...preview} />}
                </div>
            }
            {/* <div className="stage">
                <img src="http://static-d.iqiyi.com/nft/stage.png" alt="" />
            </div> */}
            <Mask visible={visible}>
                <div className="mask">
                    <img src="https://static-d.iqiyi.com/nft/rotatewebp.webp" alt="" className="image" />
                    <p className="desc">资源加载中...</p>
                </div>
            </Mask>
        </div>
    )
}

export default Rotate; 
import create from 'zustand';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { Toast } from 'antd-mobile';

const loader = new GLTFLoader();

export const appKAndSaltKey: any = {
  12: 'KCDNoS3gmjypqi1k',
  10: 'YZ6YzcnjfFdtw81u',
}

const useStore = create((set: any, get: any) => ({
  fileName: '',
  buffer: null,
  textOriginalFile: '',
  animations: false,
  code: '',
  scene: null,
  isLoading: true,
  modal_url: '',
  generateScene: async (source_url: string) => {
    try {
      const { modal_url } = get();
      const result: any = await new Promise((resolve, reject) => loader.load(source_url || modal_url, (gltf: any) => {
          const scene = gltf.scene;
          const animations = gltf.animations;
          set({ scene: scene, animations: !!animations.length,});
      }, (xhr: any) => {
        if(xhr.loaded === xhr.total) {
          set({ isLoading: false })
        }
      }, reject))
    } catch(err: any) {
      console.log('GLTFLoader Error:', err);
      Toast.show({
        content: '解析动画资源出错,请重试'
      })
      set({ isLoading: false })
    }
  },
  clearScene: () => {
    set({ scene: null })
  },
  setModalUrl: (modal_url: string | null) => {
    set({ modal_url });
  }
}))

export default useStore 

Forked On 01 Oct 2022 at 06:53:50

Drcmda

the file loads for me. cdn's are always shaky, in a safe prod environment i would copy the hdr's into /public to make sure the site functions self contained.

Commented On 01 Oct 2022 at 06:53:50

Drcmda

fix: allow passing constructor params to materials created with shaderMaterial (#1055) (#1056)

Pushed On 01 Oct 2022 at 06:50:46
Pull Request

Drcmda

fix: allow passing constructor params to materials created with shaderMaterial (#1055)

Created On 01 Oct 2022 at 06:50:46

Drcmda

Couple spelling and syntax errors (#1061)

Pushed On 01 Oct 2022 at 06:49:40
Pull Request

Drcmda

Couple spelling and syntax errors

Created On 01 Oct 2022 at 06:49:39

Drcmda

fix: remove unwanted log (#1068)

Pushed On 01 Oct 2022 at 06:49:12
Pull Request

Drcmda

fix #1067 (unwanted log)

Created On 01 Oct 2022 at 06:49:11

Drcmda

fix: line broken with just numbers

Pushed On 30 Sep 2022 at 10:13:26
Issue Comment

Drcmda

fix transparent list.inactiveSelectionBackground

This PR fixes the transparent inactive selection background color for lists, include the file explorer.

Forked On 29 Sep 2022 at 02:41:04

Drcmda

the thing is, i removed light themes because it didn't really fit in. i started with a dark theme, then people suggested a light variant. i made it but it had little to do with the distinct pmndrs look, it was basically just some light theme. eventually i deleted the files and decide to only ship the dark variant.

Commented On 29 Sep 2022 at 02:41:04

Drcmda

V3

Downloads Discord Shield

:japanese_castle: React-Three-Next starter

A minimalist starter for React, React-three-fiber and Threejs.

  • TTL ~ 100ms
  • First load JS ~ 85Kb
  • Lighthouse score of 100 (Performance, Accessibility, Best Practices, SEO)

This starter allows you to navigate seamlessly between pages with dynamic dom and/or canvas content without reloading or creating a new canvas every time.

⚫ Demo :

image

How to use

Installation

Tailwind is the default style. styled-components (styled) is also available.

yarn create r3f-app next my-app
# yarn create r3f-app <next> my-app <tailwind|styled>? -ts? 

or

npx create-r3f-app next my-app 

:passport_control: Typescript

For typescript add the parameter -ts or --typescript:

yarn create r3f-app next my-app -ts 

or

npx create-r3f-app next my-app -ts 

:mount_fuji: Features

  • [x] GLSL imports
  • [x] Template for meta data and header
  • [x] Clean code using ESlint and Prettier
  • [x] VSCode debug profiles for the server, Chrome, and Firefox
  • [x] PWA Support

:bullettrain_side: Architecture

Inform the nextjs page that the component is a Threejs component. For that, simply add the canvas property to the parent component.

export default function Page(props) {
  return <div>Hello !</div>
}
// Canvas contents go here
// It will receive same props as Page component (from getStaticProps, etc.)
Page.canvas = (props) => (
  <mesh>
    <boxGeometry />
    <meshBasicMaterial color='hotpink' />
  </mesh>
) 

:control_knobs: Available Scripts

  • yarn dev - Next dev
  • yarn analyze - Generate bundle-analyzer
  • yarn lint - Audit code quality
  • yarn build - Next build
  • yarn start - Next start
  • yarn export - Export to static HTML

⬛ Stack

How to contribute :

git clone https://github.com/pmndrs/react-three-next
&& cd react-three-next && yarn install 

Maintainers :

Forked On 29 Sep 2022 at 02:28:24

Drcmda

references are guaranteed inside effects/useframe. if you do this: ```jsx const ref = useRef<THREE.Mesh>(null!) useEffect(() => { console.log(ref.current) }, []) return <mesh ref={ref} /> ``` then it won't cause a type error.
On 29 Sep 2022 at 02:28:24

Drcmda

V3

Downloads Discord Shield

:japanese_castle: React-Three-Next starter

A minimalist starter for React, React-three-fiber and Threejs.

  • TTL ~ 100ms
  • First load JS ~ 85Kb
  • Lighthouse score of 100 (Performance, Accessibility, Best Practices, SEO)

This starter allows you to navigate seamlessly between pages with dynamic dom and/or canvas content without reloading or creating a new canvas every time.

⚫ Demo :

image

How to use

Installation

Tailwind is the default style. styled-components (styled) is also available.

yarn create r3f-app next my-app
# yarn create r3f-app <next> my-app <tailwind|styled>? -ts? 

or

npx create-r3f-app next my-app 

:passport_control: Typescript

For typescript add the parameter -ts or --typescript:

yarn create r3f-app next my-app -ts 

or

npx create-r3f-app next my-app -ts 

:mount_fuji: Features

  • [x] GLSL imports
  • [x] Template for meta data and header
  • [x] Clean code using ESlint and Prettier
  • [x] VSCode debug profiles for the server, Chrome, and Firefox
  • [x] PWA Support

:bullettrain_side: Architecture

Inform the nextjs page that the component is a Threejs component. For that, simply add the canvas property to the parent component.

export default function Page(props) {
  return <div>Hello !</div>
}
// Canvas contents go here
// It will receive same props as Page component (from getStaticProps, etc.)
Page.canvas = (props) => (
  <mesh>
    <boxGeometry />
    <meshBasicMaterial color='hotpink' />
  </mesh>
) 

:control_knobs: Available Scripts

  • yarn dev - Next dev
  • yarn analyze - Generate bundle-analyzer
  • yarn lint - Audit code quality
  • yarn build - Next build
  • yarn start - Next start
  • yarn export - Export to static HTML

⬛ Stack

How to contribute :

git clone https://github.com/pmndrs/react-three-next
&& cd react-three-next && yarn install 

Maintainers :

Merged On 29 Sep 2022 at 02:28:25

Drcmda

Commented On 29 Sep 2022 at 02:28:25

Drcmda

fix: white bg for stage story

Pushed On 29 Sep 2022 at 01:58:35

Drcmda

fix: stage story env light

Pushed On 29 Sep 2022 at 01:56:28
Issue Comment

Drcmda

fix transparent list.inactiveSelectionBackground

This PR fixes the transparent inactive selection background color for lists, include the file explorer.

Forked On 27 Sep 2022 at 07:49:54

Drcmda

it's a bit odd, there are no light themes any longer. updating the json isn't correct bc these will be overwritten by a script. the right place is theme.js, but again, light fell out long ago.

Commented On 27 Sep 2022 at 07:49:54

Drcmda

typos

Pushed On 27 Sep 2022 at 12:47:49

Drcmda

box -> blob

Pushed On 27 Sep 2022 at 12:36:11
Issue Comment

Drcmda

TypeError: Cannot redefine property: _currentRenderer

Build fails with Cannot redefine property: _currentRenderer

Next Version: 12.3.1 @react-three/fiber: ^8.8.3 Three: ^0.144.0

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true
}

const withTM = require('next-transpile-modules')(['three'])
module.exports = withTM(nextConfig) 
<div style={{ width: '100vw', height: '100vh', color: 'black' }} className='box'>
  <Canvas>
	  <ambientLight intensity={0.1} />
	  <directionalLight color='blue' position={[0, 0, 5]} />
	  <mesh>
		  <boxGeometry />
		  <meshStandardMaterial />
	  </mesh>
  </Canvas>
</div> 

Forked On 27 Sep 2022 at 12:12:07

Drcmda

doesn't look related to me.

Commented On 27 Sep 2022 at 12:12:07

Drcmda

update fiber

Pushed On 27 Sep 2022 at 12:11:25