How to i change camera angle?

[destiny0114]

how do i adjust cAzimuthAngle and cPolarAngle because is not workng.

[ruucm]

Could you share your issue with a codesandbox link?

it looks working on my side.

https://codesandbox.io/p/devbox/optimistic-roentgen-fwxv4x

[destiny0114]

i fixed by using ShaderGradientCanvas. Your example not working even i added cPolarAngle.

[itsbppradhan]

However upon launching the nextjs app router sample sandbox and resizing the webpage (yes the webpage), the camera pos resets suddenly.

I tried using the shader gradient and shader canvas as recommended in Readme canvas in a new next.js project but in vain for I this time got not but 2 broken gradients side by side

[anonymousRecords]

@itsbppradhan

However upon launching the nextjs app router sample sandbox and resizing the webpage (yes the webpage), the camera pos resets suddenly.

I tried using the shader gradient and shader canvas as recommended in Readme canvas in a new next.js project but in vain for I this time got not but 2 broken gradients side by side

Thank you for reporting this issue. To help us better understand and resolve the problem, could you please provide:

• More specific code snippets showing how you're using the ShaderGradient and ShaderGradientCanvas components
• Any error messages or console logs related to the issue

This additional information will greatly help in diagnosing and fixing the problem. Thanks for your cooperation!

[itsbppradhan]

I have encountered several issues with the original Next.js template using the app router. Specifically, the object resets to its original size when the window is resized (please refer to video 1). https://drive.google.com/file/d/1tvdYB7NuH2N8hWLSYl4n3GpGikjo_xVB/view?usp=sharing

After downloading the code and making modifications to achieve a full-screen display, the problem persisted (see video 2). https://drive.google.com/file/d/1471Cq4PaHrpBnGVTgSS6ID5OYxqi-V92/view?usp=sharing

Additionally, I created a new next.js app and implemented the shader canvas method as described in the README.md file and placed it within a screen-sized div. However, this resulted in broken colors, and when scrolling the mouse over the gradient, the size changes unexpectedly(but this time resizing the window didn't affect the gradient). Surprisingly, there are two instances for no apparent reason (video 3). here the gradient used was this hover it was showing up black in colour. https://drive.google.com/file/d/1CwH7NJBi7SMt4dlYSzoBMPzxVWZueVw2/view?usp=sharing

'use client'

import React, { Children } from 'react'
import { ShaderGradientCanvas, ShaderGradient } from 'shadergradient'
import * as reactSpring from '@react-spring/three'
import * as drei from '@react-three/drei'
import * as fiber from '@react-three/fiber'

function Waitlist() {
  return (
    <ShaderGradientCanvas
      importedFiber={{ ...fiber, ...drei, ...reactSpring }}
      style={{
        position: 'absolute',
        top: 0,
      }}
    >
      <ShaderGradient
        control='query'
        urlString='https://www.shadergradient.co/customize?animate=on&axesHelper=off&brightness=1.2&cAzimuthAngle=180&cDistance=3.6&cPolarAngle=90&cameraZoom=1&color1=%23ff5005&color2=%23dbba95&color3=%23d0bce1&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=45&frameRate=10&gizmoHelper=hide&grain=on&lightType=3d&pixelDensity=1&positionX=-1.4&positionY=0&positionZ=0&range=enabled&rangeEnd=40&rangeStart=0&reflection=0.1&rotationX=0&rotationY=10&rotationZ=50&shader=defaults&type=plane&uDensity=1.3&uFrequency=5.5&uSpeed=0.4&uStrength=4&uTime=0&wireframe=false'
      />

    </ShaderGradientCanvas>
  )
}

export default Waitlist;

I would appreciate any assistance or guidance you can provide to resolve these issues.

Thank you for your time and support.

[destiny0114]

@itsbppradhan this is the way I use shadergradient u can tweak the settings.

import { ShaderGradientCanvas, ShaderGradient } from 'shadergradient';
import * as reactSpring from '@react-spring/three';
import * as drei from '@react-three/drei';
import * as fiber from '@react-three/fiber';

export const CanvasShaderGradient = () => {
  return (
    <ShaderGradientCanvas
      importedFiber={{ ...fiber, ...drei, ...reactSpring }}
      style={{
        position: 'absolute',
        top: 0,
        width: '100vw',
        height: '100vh',
        pointerEvents: 'none',
      }}
      pixelDensity={1}
      fov={40}
    >
      <ShaderGradient
        type="waterPlane"
        color1="#ff7300"
        color2="#b03182"
        color3="#b03182"
        frameRate={10}
        cameraZoom={1}
        brightness={1.2 * Math.PI}
        lightType="3d"
        envPreset="city"
        cDistance={3.9}
        cAzimuthAngle={180}
        cPolarAngle={115}
        range="disabled"
        uAmplitude={0}
        uDensity={1.1}
        uFrequency={5.5}
        uStrength={2.4}
        uSpeed={0.1}
        uTime={0.2}
        grain="off"
        reflection={0.1}
        positionX={-1}
        positionZ={-1}
        rotationZ={235}
        enableTransition={false}
      />
    </ShaderGradientCanvas>
  );
};```

[itsbppradhan]

Did you use the example or scaffolded a new Next.js project?

Edit: Aha! I just discovered that shadergradient is dependent on older version of three.js due to lightning changes but with the help of the template and the code (thanks @destiny0114) now the background is rendering without any issues.

I was wondering if the view and canvas component in the src folder in the example codebox is related to v1?

[itsbppradhan]

Is the colour scheme majestic ...

[destiny0114]

@itsbppradhan I think so because we've been same case using their example codebox not working

[itsbppradhan]

{
  "name": "lounge",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-three/fiber": "^8.17.10",
    "framer-motion": "^11.11.9",
    "next": "14.2.15",
    "react": "^18",
    "react-dom": "^18",
    "shadergradient": "^1.2.14",
    "three": "^0.169.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/three": "^0.169.0",
    "eslint": "^8",
    "eslint-config-next": "14.2.15",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

this is my package.json in my new next.js app which works without any three-mesh-bvh error

[ruucm]

This one looks like resolved.

Also I've added an example of using cAzimuthAngle, cPolarAngle props at apps/example-nextjs-dev/app/page.tsx

Closing.