diff --git a/src/editor/nodes/ImageNode.js b/src/editor/nodes/ImageNode.js index 7593ec7c8..ad1fee3ae 100644 --- a/src/editor/nodes/ImageNode.js +++ b/src/editor/nodes/ImageNode.js @@ -32,6 +32,12 @@ export default class ImageNode extends EditorNodeMixin(Image) { })() ); + const linkComponent = json.components.find(c => c.name === "link"); + + if (linkComponent) { + node.href = linkComponent.props.href; + } + return node; } @@ -39,6 +45,7 @@ export default class ImageNode extends EditorNodeMixin(Image) { super(editor); this._canonicalUrl = ""; + this.href = ""; this.controls = true; this.billboard = false; } @@ -119,6 +126,7 @@ export default class ImageNode extends EditorNodeMixin(Image) { this.alphaMode = source.alphaMode; this.alphaCutoff = source.alphaCutoff; this._canonicalUrl = source._canonicalUrl; + this.href = source.href; return this; } @@ -138,6 +146,10 @@ export default class ImageNode extends EditorNodeMixin(Image) { components.billboard = {}; } + if (this.href) { + components.link = { href: this.href }; + } + return super.serialize(components); } @@ -165,6 +177,10 @@ export default class ImageNode extends EditorNodeMixin(Image) { this.addGLTFComponent("billboard", {}); } + if (this.href && this.projection === "flat") { + this.addGLTFComponent("link", { href: this.href }); + } + this.replaceObject(); } diff --git a/src/editor/nodes/ModelNode.js b/src/editor/nodes/ModelNode.js index 5e72bfbd5..e0623f916 100644 --- a/src/editor/nodes/ModelNode.js +++ b/src/editor/nodes/ModelNode.js @@ -384,7 +384,6 @@ export default class ModelNode extends EditorNodeMixin(Model) { this.initialScale = source.initialScale; this.load(source.src); } else { - this.updateStaticModes(); this.stats = JSON.parse(JSON.stringify(source.stats)); this.gltfJson = source.gltfJson; this._canonicalUrl = source._canonicalUrl; @@ -394,13 +393,16 @@ export default class ModelNode extends EditorNodeMixin(Model) { this.collidable = source.collidable; this.walkable = source.walkable; this.combine = source.combine; - this.billboard = source.billboard; + this._billboard = source._billboard; + + this.updateStaticModes(); return this; } prepareForExport(ctx) { super.prepareForExport(); + this.addGLTFComponent("shadow", { cast: this.castShadow, receive: this.receiveShadow diff --git a/src/editor/nodes/VideoNode.js b/src/editor/nodes/VideoNode.js index 14f26ff67..11dcc4351 100644 --- a/src/editor/nodes/VideoNode.js +++ b/src/editor/nodes/VideoNode.js @@ -39,6 +39,12 @@ export default class VideoNode extends EditorNodeMixin(Video) { node.billboard = true; } + const linkComponent = json.components.find(c => c.name === "link"); + + if (linkComponent) { + node.href = linkComponent.props.href; + } + loadAsync( (async () => { await node.load(src, onError); @@ -69,6 +75,7 @@ export default class VideoNode extends EditorNodeMixin(Video) { this.volume = 0.5; this.controls = true; this.billboard = false; + this.href = ""; } get src() { @@ -182,6 +189,7 @@ export default class VideoNode extends EditorNodeMixin(Video) { this.controls = source.controls; this.billboard = source.billboard; this._canonicalUrl = source._canonicalUrl; + this.href = source.href; return this; } @@ -210,6 +218,10 @@ export default class VideoNode extends EditorNodeMixin(Video) { components.billboard = {}; } + if (this.href) { + components.link = { href: this.href }; + } + return super.serialize(components); } @@ -241,6 +253,10 @@ export default class VideoNode extends EditorNodeMixin(Video) { this.addGLTFComponent("billboard", {}); } + if (this.href && this.projection === "flat") { + this.addGLTFComponent("link", { href: this.href }); + } + this.replaceObject(); } diff --git a/src/ui/properties/ImageNodeEditor.js b/src/ui/properties/ImageNodeEditor.js index d99244d4d..7ba164ae7 100644 --- a/src/ui/properties/ImageNodeEditor.js +++ b/src/ui/properties/ImageNodeEditor.js @@ -2,6 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import NodeEditor from "./NodeEditor"; import InputGroup from "../inputs/InputGroup"; +import StringInput from "../inputs/StringInput"; import SelectInput from "../inputs/SelectInput"; import BooleanInput from "../inputs/BooleanInput"; import NumericInputGroup from "../inputs/NumericInputGroup"; @@ -23,6 +24,7 @@ export default function ImageNodeEditor(props) { const onChangeProjection = useSetPropertySelected(editor, "projection"); const onChangeTransparencyMode = useSetPropertySelected(editor, "alphaMode"); const onChangeAlphaCutoff = useSetPropertySelected(editor, "alphaCutoff"); + const onChangeHref = useSetPropertySelected(editor, "href"); return ( @@ -38,6 +40,11 @@ export default function ImageNodeEditor(props) { + {node.projection === ImageProjection.Flat && ( + + + + )} @@ -27,6 +29,11 @@ export default function VideoNodeEditor(props) { + {node.projection === VideoProjection.Flat && ( + + + + )}