I'm a beginner at Three JS and have some issues with my code. My problem is I don't get the shadow properly in every object I attached. Here's the picture:
Here's my code in the sandbox:
https://codesandbox.io/s/threejs-code-3rlk8b
import React, { Suspense, useRef } from 'react';
import { Canvas, useFrame } from '#react-three/fiber';
import { ContactShadows, OrbitControls, useGLTF } from '#react-three/drei'
import './PartOne.css';
import { RoomOne } from '../assets/Room1';
import { Room2 } from '../assets/Room2';
import { Room3 } from '../assets/Room3';
import { Room4 } from '../assets/Room4';
import { Room5 } from '../assets/Room5';
import { Room6 } from '../assets/Room6';
import { Room7 } from '../assets/Room7';
import { Room8 } from '../assets/Room8';
const PartOne = () => {
return (
<div className='wrapper' >
<Canvas shadows camera={{ fov:70, position: [0,0,30] }} >
<Suspense fallback={null} >
<ambientLight intensity={0.3} />
<directionalLight castShadow receiveShadow intensity={2} position={[80,80,80]} />
{/* <spotLight castShadow receiveShadow intensity={2} position={[80,80,80]} /> */}
<RoomOne />
<Room2 />
<Room3 />
<Room4 />
<Room5 />
<Room6 />
<Room7 />
<Room8 />
<ContactShadows />
</Suspense>
<OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
</Canvas>
</div>
)
}
export default PartOne
Please help me with this problem. Or tell me if there is any solution to get rid of it.
The default setting of the orthographic shadow camera is -5 for left and bottom and 5 for right and top (see DirectionalLightShadow). This range is not big enough for your scene. You need to adjust the view volume of the orthographic shadow camera. e.g.:
<directionalLight
castShadow receiveShadow intensity={2} position={[80,80,80]}
shadow-normalBias={0.1}
shadow-camera-left={-12}
shadow-camera-right={12}
shadow-camera-top={12}
shadow-camera-bottom={-12}
shadow-camera-near={0.5}
shadow-camera-far={200}
/>
Related
import { Stats,OrbitControls,Circle } from '#react-three/drei'
import { Canvas,useLoader } from '#react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
export default function App() {
const gltf = useLoader(GLTFLoader,'./models/monkey.glb')
return (
<Canvas camera={{ position: [-0.5,1,2] }} shadows>
<directionalLight position={[3.3,1.0,4.4]} castShadow />
<primitive
object={gltf.scene}
position={[0,1,0]} />
<primitive
object={gltf.scene}
position={[0,1,0]} />
<Circle args={[10]} rotation-x={-Math.PI / 2} receiveShadow>
<meshStandardMaterial />
</Circle>
<OrbitControls target={[0,0,0]} />
<axesHelper args={[5]} />
<Stats />
</Canvas>
)
}
so I want to insert a model and want to copy it to 2, so I add 2 primitives but can't, is there any other way to duplicate the same model to 2?
I'm trying to do something similar to this example https://codesandbox.io/s/svg-maps-with-html-annotations-forked-p8bgbk this is inside a group and I don't know how I can work on the mesh attributes HELP!
`
import React, { useRef, useState } from 'react'
import { useGLTF, useCursor } from '#react-three/drei'
import {useSpring} from '#react-spring/three'
import { useSnapshot, useProxy } from "valtio";
import state from './Status';`your text`
export default function Model(props) {
const { nodes, materials } = useGLTF('models/capital_city.glb')
const ref = useRef();
const snap = useSnapshot(state)
const [hovered, hover] = useState(false)
useCursor(hovered)
return (
<group ref={ref} {...props} dispose={null} rotateX={Math.PI/2} scale={0.2}
//onPointerOver={(e) => console.log(e.object.material.name) }
onPointerOver={(e) => {e.stopPropagation(), hover(e.object.material.name)}}
onPointerOut={(e) => hover(false)}
>
<mesh geometry={nodes.Proyectos_01.geometry } material={materials.lambert49 } />
<mesh geometry={nodes.Proyectos_02.geometry} material={materials.lambert14}/>
<mesh geometry={nodes.Proyectos_03.geometry} material={materials.lambert77} />
<mesh geometry={nodes.Proyectos_04.geometry} material={materials.lambert4} />
<mesh geometry={nodes.Proyectos_05.geometry} material={materials.lambert38} />
<mesh geometry={nodes.Proyectos_06.geometry} material={materials.lambert53} />
<mesh geometry={nodes.Proyectos_07.geometry} material={materials.lambert65} />
<mesh geometry={nodes.Proyectos_08.geometry} material={materials.lambert73} />
<mesh geometry={nodes.Proyectos_09.geometry} material={materials.lambert45} />
<mesh geometry={nodes.Proyectos_10.geometry} material={materials.lambert116} />
<mesh geometry={nodes.Proyectos_100.geometry} material={materials.lambert59} />
</group>
)
}
//useGLTF.preload('/models/capital_city.glb')
`
I'm new to React and I'm trying to incorporate viewSwitching from https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/guides/view-switching/ into my project. The issue I'm facing is that this view has class components and I've written my code in functional components, is there any way to implement the code given below into functional components so that viewSwitching may work?
import * as React from 'react';
import Paper from '#material-ui/core/Paper';
import { ViewState } from '#devexpress/dx-react-scheduler';
import {
Scheduler,
WeekView,
Appointments,
Toolbar,
ViewSwitcher,
MonthView,
DayView,
} from '#devexpress/dx-react-scheduler-material-ui';
import { appointments } from '../../../demo-data/month-appointments';
export default class Demo extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
data: appointments,
currentViewName: 'work-week',
};
this.currentViewNameChange = (currentViewName) => {
this.setState({ currentViewName });
};
}
render() {
const { data, currentViewName } = this.state;
return (
<Paper>
<Scheduler
data={data}
height={660}
>
<ViewState
defaultCurrentDate="2018-07-25"
currentViewName={currentViewName}
onCurrentViewNameChange={this.currentViewNameChange}
/>
<WeekView
startDayHour={10}
endDayHour={19}
/>
<WeekView
name="work-week"
displayName="Work Week"
excludedDays={[0, 6]}
startDayHour={9}
endDayHour={19}
/>
<MonthView />
<DayView />
<Toolbar />
<ViewSwitcher />
<Appointments />
</Scheduler>
</Paper>
);
}
}
Any help at all will be appreciated :)
import * as React from 'react';
import Paper from '#material-ui/core/Paper';
import { ViewState } from '#devexpress/dx-react-scheduler';
import {
Scheduler,
WeekView,
Appointments,
Toolbar,
ViewSwitcher,
MonthView,
DayView,
} from '#devexpress/dx-react-scheduler-material-ui';
import { appointments } from '../../../demo-data/month-appointments';
const Demo = () => {
const [state, setState] = useState({
data: appointments,
currentViewName: 'work-week'
})
const currentViewNameChange = (currentViewName) => {
setState({ currentViewName });
};
return (
<Paper>
<Scheduler
data={state.data}
height={660}
>
<ViewState
defaultCurrentDate="2018-07-25"
currentViewName={state.currentViewName}
onCurrentViewNameChange={currentViewNameChange}
/>
<WeekView
startDayHour={10}
endDayHour={19}
/>
<WeekView
name="work-week"
displayName="Work Week"
excludedDays={[0, 6]}
startDayHour={9}
endDayHour={19}
/>
<MonthView />
<DayView />
<Toolbar />
<ViewSwitcher />
<Appointments />
</Scheduler>
</Paper>
);
}
export default Demo;
Just update state and function like this
const Demo = (props) => {
const [data, useData] = useState(appointments);
const [currentViewName, setCurrentViewName] = useState("work-week");
const currentViewNameChange = (currentViewName) => {
setCurrentViewName(currentViewName);
};
return (
<Paper>
<Scheduler data={data} height={660}>
<ViewState
defaultCurrentDate="2018-07-25"
currentViewName={currentViewName}
onCurrentViewNameChange={currentViewNameChange}
/>
<WeekView startDayHour={10} endDayHour={19} />
<WeekView
name="work-week"
displayName="Work Week"
excludedDays={[0, 6]}
startDayHour={9}
endDayHour={19}
/>
<MonthView />
<DayView />
<Toolbar />
<ViewSwitcher />
<Appointments />
</Scheduler>
</Paper>
);
};
I have tried using react-three-fiber and react-drei to make a model but the target of the OrbitControl is making it appear to high
import React, { useRef, useState, Suspense, useEffect } from 'react'
import { Canvas, useFrame, useLoader, useThree} from '#react-three/fiber'
import { ContactShadows, Environment, useGLTF, OrbitControls, PerspectiveCamera } from "#react-three/drei"
import { proxy, useSnapshot } from 'valtio'
import {HexColorPicker} from "react-colorful"
...
export default function App() {
return (
<>
<Picker/>
<Canvas camera>
<PerspectiveCamera makeDefault position={[0.1, 0.9, 1.8]} fov={60} zoom={0.9}/>
<OrbitControls target={-0.061775 , 10, 0} />
<ambientLight intensity={1} />
<spotLight intensity={1} angle={0.1} penumbra={1} position={[10, 15, 10]} castShadow />
<Suspense fallback={null}>
<Bike />
<Environment preset="city" />
<ContactShadows rotation-x={Math.PI / 2} position={[0, -0.8, 0]} opacity={0.25} width={10} height={10} blur={1.5} far={0.8} />
</Suspense>
</Canvas>
</>
)
}
I have tried to change it using target variable in OrbitControls imported from #react-three/drei but the x and y axis is not working and z axis is nuts.
Should I use anothe OrbitControl for React.Please help.
In order to change the initial target for OrbitControls, you need to wrap the prop in an array like the following:
<OrbitControls target={[-0.061775 , 10, 0]} />
thanks to r3f "Set" shortcut
Alternatively, if you wanted to declare target.x, target.y, or target.z separately, you could use the following dashed syntax:
<OrbitControls target-x={-0.061775} />
thanks to r3f "Piercing into nested properties"
I am having a hard time using React StackNavigator, and passing parameters down to a screen. I am just in the stages of learning how React Native works, so maybe this is not the best practice so I am open to other suggestions if there is a better way.
function SetupsStack(props) {
console.log(props.route.params.Setup,"route is") // This has what I want
return (
<Stack.Navigator
initialRouteName="IndivdualSetup"
mode="card"
headerMode="screen"
>
<Stack.Screen
name="IndivdualSetup"
component={IndivualScreen}
//component={<IndividualScreen individual={props.route.params.Setup} />} thought this was it but its not
options={{
header: ({ navigation, scene }) => (
<Header
title="IndivdualSetup"
tabs
tabTitleSizeRight={10}
tabRightIcon={"shape-star"}
scene={scene}
navigation={navigation}
/>
),
}}
/>
</Stack.Navigator>
);
}
The component:
import React from "react";
import { ScrollView, StyleSheet, Dimensions } from "react-native";
import { Block, Text, theme } from "galio-framework";
const { width } = Dimensions.get("screen");
const thumbMeasure = (width - 48 - 32) / 3;
export default class IndivualScreen extends React.Component {
render() {
// const {
// navigation,
// route,
// } = this.props;
// const { product } = route.params;
console.log(this.props,"props are")
return (
<Block flex center>
<ScrollView
style={styles.components}
showsVerticalScrollIndicator={false}
>
<Block flex>
<Text bold size={30} style={styles.title}>
Text here
</Text>
</Block>
</ScrollView>
</Block>
);
}
}
The console log in this component does not have route as a parameter just navigation, but this only has has setParams (looks like the removed getParams in v5 and newer. However if I do:
component={<IndividualScreen individual={props.route.params.Setup} />}
I get:
Blockquote Error: Got an invalid value for 'component' prop for the screen 'IndivdualSetup'. It must be a valid React Component.
My syntax looks correct everywhere so not exactly sure what my problem is, or if it isn't working cause there is a better practice I should be following.
Thanks in advance!
instead of
component={<IndividualScreen individual={props.route.params.Setup} />}
you have to do this:
component={(props)=> <IndividualScreen individual={props.route.params.Setup} />}