This is the versions of aframe and physics libraries I'm using:
"#belivvr/aframe-react": "^0.4.2",
"aframe": "^1.4.1",
"aframe-extras": "^6.1.1",
"aframe-physics-extras": "^0.1.3",
"aframe-physics-system": "^4.0.2"
I am using aframe-react and the collision between the camera and other objects is working fine but when I try to step on an Object the camera freezes and I'm getting the following error:
Uncaught TypeError: ray._updateDirection is not a function
at NewComponent.raycastToGround (kinematic-body.js:197:9)
at module.exports.AFRAME.registerComponent.step (kinematic-body.js:161:34)
at NewSystem.tick (system.js:154:25)
at AScene.tick (aframe-master.js:27725:36)
at AScene.render (aframe-master.js:27768:12)
at bound (aframe-master.js:32718:17)
at onAnimationFrame (aframe-master.js:37704:95)
at onAnimationFrame (aframe-master.js:36968:545)
The following is my code:
// #ts-nocheck
import "aframe";
import { Entity, Scene, Sky, Plane } from "#belivvr/aframe-react";
import "aframe-physics-system";
import "aframe-physics-extras";
import "aframe-extras";
const App = () => {
return (
<Scene physics="debug: true">
<Entity
geometry={{ primitive: "box" }}
material={{ color: "blue" }}
position={{ x: 0, y: 0.5, z: -3 }}
static-body="shape: auto"
/>
<Plane
geometry={{ primitive: "box", height: 0.01, width: 100, depth: 100 }}
material={{ color: "#275942" }}
position={{ x: 0, y: 0, z: 0 }}
static-body="shape: auto"
/>
<Plane
geometry={{ primitive: "box", height: 100, width: 100, depth: 1 }}
position={{ x: 0, y: 0, z: -6 }}
rotation={{ x: 0, y: 0, z: 0 }}
color="#890d72"
static-body="shape: auto"
/>
<Entity
id="rig"
look-controls="pointerLockEnabled: false;"
wasd-controls="acceleration: 100"
kinematic-body="shape: auto"
>
<Entity
camera="userHeight: 1.6"
position={{ x: 0, y: 1.6, z: 0 }}
></Entity>
</Entity>
<Sky color="#838383" />
</Scene>
);
};
export default App;
Related
Actually I wanna create slider with dots, slider is working, but dots are hidden. How should I make dots visible while using react swipper slider.
I am using styled components for css. The thing is, I cannot find what is false in this part of code. please help me to figure out with this problem.
I tried to make my slider dots visible, however they are not showing.
this is my code
import { Pagination, Navigation, Scrollbar, A11y } from 'swiper';
import { Images } from 'assets/images';
import { useWindowDimensions } from 'hooks/useWindowDimensions';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from 'utils/routeNames';
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/swiper.scss';
import {
CardAndDescriptionBlock,
CardBlock,
CountryImage,
TripDurationAndPrice,
TripDuration,
CardDescription,
TripCountryAndPrice,
CountryStarsPriceWrapper,
TripCountryAndStars,
TripPrice,
PricePerPerson,
TripCountry,
ReadMore,
DescriptionContainer,
} from './styled';
export const HotOffersCarousel = ({ hotOffers }) => {
const navigate = useNavigate();
const { width } = useWindowDimensions();
const navigateToTour = (id) => {
navigate(`${ROUTES.HOT_TOURS}/${id}`);
};
return (
<Swiper
slidesPerView={width < 768 ? 2 : 1}
spaceBetween={10}
slidesPerGroup={width < 768 ? 2 : 1}
loop={true}
pagination={{
dynamicBullets: true,
}}
modules={[Pagination, Navigation, Scrollbar, A11y]}
className="mySwiper"
>
{hotOffers?.map((item) => (
<SwiperSlide key={item.id}>
<CardAndDescriptionBlock>
<CardBlock>
<CountryImage background={item?.main_image}>
<TripDurationAndPrice>
<TripDuration>
{item?.stay_days} Days / {item?.stay_nights} nights
</TripDuration>
<PricePerPerson> $ {item?.price}/Person </PricePerPerson>
</TripDurationAndPrice>
</CountryImage>
<TripCountryAndPrice>
<CountryStarsPriceWrapper>
<TripCountryAndStars>
<TripCountry> {item?.title} </TripCountry>
<img src={Images.stars} />
</TripCountryAndStars>
<TripPrice>$ {item?.price} </TripPrice>
</CountryStarsPriceWrapper>
<DescriptionContainer
isMedia
dangerouslySetInnerHTML={{ __html: item.description }}
/>
<ReadMore onClick={() => navigateToTour(item?.id)} isMedia>
Read More <img src={Images.mainColorRightArrow} />
</ReadMore>
</TripCountryAndPrice>
</CardBlock>
<CardDescription>
<TripCountryAndStars>
<TripCountry> Venice Italy </TripCountry>
<img src={Images.stars} />
</TripCountryAndStars>
<DescriptionContainer
dangerouslySetInnerHTML={{ __html: item.description }}
/>
<ReadMore onClick={() => navigateToTour(item?.id)}>
Read More <img src={Images.mainColorRightArrow} />
</ReadMore>
</CardDescription>
</CardAndDescriptionBlock>
</SwiperSlide>
))}
</Swiper>
);
};
I am trying to change the style (colors) of elements in list items as they are created from a map function, which provides the rgb-color.
Using classes works, but to get it right dynamically, sofor the data/color provided by the object array is a problem.
The attempts beneath do show e.g. fill="rgb(48, 183, 0)", but the classes which define it's style still override the dynamically added style
<Select
multiple
value={filterList[index]}
renderValue={(selected) => selected.join(", ")}
onChange={(event) => {
filterList[index] = event.target.value;
onChange(filterList[index], index, column);
}} >
{ processStatusColorsArr.map(({ id, name, color} ) =>(
MenuItem key={id} value={name} style={{ fill: `${color}%`, color: `${color}%` }} >
<Checkbox
fill={color} style={{ fill: `${color}%`, color: `${color}%` }} />
<ListItemText primary={name}
color= {color} />
<IconButton color={color}
fill={color}
style={{ fill: `${color}%`, color: `${color}%` }} />
</MenuItem>
))}
</Select>
I have also tried this,
{render_filter_process_status_colors(color)} in place of '<IconButton ..../>'
where I have (above this)
const render_filter_process_status_colors = (value, tableMeta, updateValue) => {
if(value === undefined) return;
return (
<div>
<FontAwesomeIcon icon={"square"} style={value} size={"lg"} fixedWidth/>
</div>
);
}
but no luck.
Thx
By using the function
{render_filter_process_status_colors(color)}
which is defined as
const render_filter_process_status_colors = (value, tableMeta, updateValue) => {
if(value === undefined) return;
const iconColor = {color: value}
return (
<div>
<FontAwesomeIcon icon={"square"} style={iconColor} size={"lg"} fixedWidth/>
</div>
); }
I get the icon with the color from my array of rgb colors.
Is it possible to add a condition to a svelte transition in the html element
<script>
let visible = true;
</script>
{#if visible}
<p
transition:fly="{{ y: 200, duration: 2000 }}"
>
Flies in and out
</p>
{/if}
like idk something like
<script>
let visible = true;
let iWantFly = true
</script>
{#if visible}
<p
transition:fly:iWantFly="{{ y: 200, duration: 2000 }}"
>
Flies in and out
</p>
{/if}
or even like
<script>
let visible = true;
let flyType = 'sureThing'
</script>
{#if visible}
<p
transition:fly:{flyType === 'sureThing'}="{{ y: 200, duration: 2000 }}"
>
Flies in and out
</p>
{/if}
I know could do two separate elements like
<script>
let visible = true;
let baseEl;
let flyType = 'sureThing'
</script>
{#if visible && flyType === 'sureThing'}
<p
bind:this={baseEl}
transition:fly="{{ y: 200, duration: 2000 }}"
>
Flies in and out
</p>
{/if}
{#if visible && flyType === 'otherThing'}
<p bind:this={baseEl}>
Flies in and out
</p>
{/if}
{#if visible && flyType === 'thisThing'}
<p
bind:this={baseEl}
transition:fade
>
Flies in and out
</p>
{/if}
but problem is one that's duplicating code and two I'm trying to bind to the element so flipping between 'flyType' switches to a new element and screws up the bind. Or would I need to make. custom one? I'm new so haven't done that yet but don't want to overcomplicate it
Responding to formerly marked correct answer appears not to work
Using example from #geoffrich when starting in a 'no' string and toggling to a yes then visible the transition moves instantly
<script>
import { fly } from 'svelte/transition';
let visible = true;
let shouldTransition = 'no';
function toggleTransition(){
shouldTransition = shouldTransition === 'yes' ? 'no' : 'yes';
}
</script>
<label><input type='checkbox' bind:checked={visible}> Visible</label>
<button on:click={toggleTransition}>toggleTransition: {shouldTransition}</button>
{#if visible}
<p transition:transitionToUse={{ y: 200, duration: 500 }}>Flies in and out</p>
{/if}
A Svelte transition is just a function, so you can reactively change which function to use for the transition. Here's an example:
<script>
import { fly } from 'svelte/transition';
let visible = true;
let shouldTransition = true;
// if shouldTransition is false, use a transition function that does nothing
$: transitionToUse = shouldTransition ? fly : () => {};
</script>
<label><input type='checkbox' bind:checked={visible}> Visible</label>
<label><input type='checkbox' bind:checked={shouldTransition}> Enable transition</label>
{#if visible}
<p transition:transitionToUse={{ y: 200, duration: 500 }}>Flies in and out</p>
{/if}
I just made a custom transition that works
<script>
import { fly } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
function myFly(node, { y, duration }) {
return {
duration,
css: (t, u) => {
if(shouldTransition === 'yes'){
const eased = cubicOut(u);
return `
transform: translateY(${eased * y}px);
`
} else {
return null
}
}
};
}
let visible = true;
let shouldTransition = 'no';
function toggleTransition(){
shouldTransition = shouldTransition === 'yes' ? 'no' : 'yes';
}
</script>
<label><input type='checkbox' bind:checked={visible}> Visible</label>
<button on:click={toggleTransition}>toggleTransition: {shouldTransition}</button>
{#if visible}
<p transition:myFly={{ y: 200, duration: 500 }}>Flies in and out</p>
{/if}
Update I actually think that might not work because the duration still occurs for each but I found using in and out transition even though for same transition function that worked. This was my final code
<script>
function myFly(node, { y, duration }) {
return (typeToUse === 'full') ? {
duration,
css: (t, u) => {
const eased = cubicOut(u);
return `transform: translateY(${eased * y}px);`
}
} : null;
}
</script>
<p
in:myFly={{ y: windowHeight, duration: 600 }}
out:myFly={{ y: windowHeight, duration: 600 }} >test</p>
I tried using the Ant Design TreeSelect component withing a Modal, but when opening that TreeSelect the values of the tree is hidden behind the Modal.
I tried using a higher value of z-index but it didn't help! Any ideas?
import React from "react";
import ReactDOM from "react-dom";
import { version } from "antd";
import { TreeSelect } from "antd";
import {
Button,
ComposedModal,
ModalBody,
ModalFooter,
ModalHeader
} from "carbon-components-react";
import "antd/dist/antd.css";
import "./index.css";
const treeData = [
{
title: "Node1",
value: "0-0",
key: "0-0",
children: [
{
title: "Child Node1",
value: "0-0-1",
key: "0-0-1"
},
{
title: "Child Node2",
value: "0-0-2",
key: "0-0-2"
}
]
},
{
title: "Node2",
value: "0-1",
key: "0-1"
}
];
function treeSelectChange(e, value) {
console.log(e);
//e.preventDefault()
}
ReactDOM.render(
<div className="App">
<h1>antd version: {version}</h1>
{/* <p>
Please <b>fork</b> this sandbox to reproduce your issue.
</p> */}
<ComposedModal
open={true}
// onClose={(e) => this.closeRuleEditorModal(e) }
className=""
>
<ModalHeader title="Rule Editor" className="HeaderToolbar White" />
<ModalBody>
<TreeSelect
// className="on-front"
style={{
width: "100%"
}}
// value={element.Value}
dropdownStyle={{
maxHeight: 400,
overflow: "auto",
zIndex: 10000
// position: "absolute"
}}
treeData={treeData}
// placeholder={element.Name}
treeDefaultExpandAll
onChange={treeSelectChange}
/>
</ModalBody>
<ModalFooter>
<Button
kind="secondary"
size="small"
// onClick={(e) => this.closeRuleEditorModal(e) }
>
Cancel
</Button>
<Button
kind="primary"
id="btnSave"
size="small"
// onClick={() => this.fabricateCustomizedProject()}
>
Save
</Button>
</ModalFooter>
</ComposedModal>
</div>,
document.getElementById("root")
);
To reproduce issue, you may also use
https://codesandbox.io/s/antd-reproduction-template-ci559
Update
It worked for me when I used a z-index with value 10000 (have no idea why I had to set so high value, seems one of the css that I used for other components -Modal- is using a big z-index inside).
dropdownStyle={{ maxHeight: 400, overflow: 'auto',zIndex:"100000" }}
It works for me
I am using this component: react select.
This is my situation:
screenshot
When I add more and more tags in such a way that they don't fit inside the select component anymore - you can see position of other components (which are located next to react select) like the black "X" button are not updated, e.g. the "X" component should move to the right since width of react-select has increased. However, it doesn't. Can someone tell me what is wrong?
This is how those components (each row) is created:
<div style={{ display: "flex", verticalAlign: "middle" }}>
<Checkbox style={{ marginTop: 9, width: 40 }} checked={data.checked}
onCheck={(e, value) => { this.updateTreeNodeCheckedById(data.id, value);}} />
<Select value={data.value} simpleValue placeholder={data.label} multi
style={{marginTop:"5px", width: "300px", maxWidth:"300px"}}
onChange={(value)=>{ this.updateTreeNodeValueById(data.id, value)}}
options={[
{value:0, label:"სატესტო1"},
{value:1, label:"სატესტო2"},
{value:2, label:"სატესტო3"},
{value:3, label:"სატესტო4"}
]} />
<IconButton onClick={() => { this.deleteTreeNode(data.id)}}>
<ClearBtn />
</IconButton>
</div>