材质控件各种贴图,不再直接上传,改为从贴图面板选取。

This commit is contained in:
tengge1 2019-09-12 22:14:51 +08:00
parent 9cbe5f5468
commit c674352804
3 changed files with 24 additions and 44 deletions

View File

@ -14,6 +14,7 @@ Supported Languages: 中文 / [繁體中文](README-tw.md) / [English](README-en
4. 修复上传大模型时,`413 Entity Too Large`报错已经由30M限制改为300M。
5. 修复材质光泽度、镜面度、发射颜色序列化bug。
6. Obj格式文件可以自动下载绑定材质了。
7. 材质控件各种贴图,不再直接上传,改为从贴图面板选取。
## v0.3.2更新

View File

@ -698,5 +698,6 @@
"Screenshot": "截图",
"Video": "视频",
"Clean Up Scenes": "清理场景",
"Are you sure to clean up all the deleted scenes and scene histories?": "确定要清理所有已经删除的场景和场景历史记录?"
"Are you sure to clean up all the deleted scenes and scene histories?": "确定要清理所有已经删除的场景和场景历史记录?",
"Please click the image in the MapPanel.": "请点击贴图面板中的图片"
}

View File

@ -34,10 +34,6 @@ class TextureProperty extends React.Component {
}
componentDidMount() {
let input = document.createElement(`input`);
input.type = 'file';
input.addEventListener(`change`, this.handleChange);
this.input = input;
this.componentDidUpdate();
}
@ -61,9 +57,9 @@ class TextureProperty extends React.Component {
}
}
handleSelect(event) {
this.input.value = null;
this.input.click();
handleSelect() {
app.toast(_t('Please click the image in the MapPanel.'));
app.on(`selectMap.TextureProperty`, this.handleChange);
}
handleEnable(onChange, enabled, name, event) {
@ -82,45 +78,27 @@ class TextureProperty extends React.Component {
}
}
handleChange(onChange, event) {
const file = event.target.files[0];
handleChange(onChange, data) {
const name = data.Name;
const type = data.Type;
const url = data.Url;
if (!file.type.match('image.*')) {
console.warn(`TextureProperty: File Type Error.`);
return;
}
let reader = new FileReader();
if (file.type === 'image/targa') {
reader.addEventListener('load', event => {
let result = new THREE.TGALoader().parse(event.target.result);
let texture = new THREE.CanvasTexture(result, THREE.UVMapping);
texture.sourceFile = file.name;
onChange && onChange(texture, this.props.name, event);
}, false);
reader.readAsArrayBuffer(file);
if (type === 'targa') {
const loader = new THREE.TGALoader();
loader.load(url, obj => {
let texture = new THREE.CanvasTexture(obj, THREE.UVMapping);
texture.sourceFile = name;
onChange && onChange(texture, this.props.name, data);
});
} else {
reader.addEventListener('load', event => {
let image = document.createElement('img');
const loader = new THREE.TextureLoader();
loader.load(url, obj => {
obj.sourceFile = name;
obj.format = url.endsWith('jpg') || url.endsWith('jpeg') ? THREE.RGBFormat : THREE.RGBAFormat;
obj.needsUpdate = true;
image.addEventListener('load', () => {
let texture = new THREE.Texture(image, THREE.UVMapping);
texture.sourceFile = file.name;
texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
texture.needsUpdate = true;
onChange && onChange(texture, this.props.name, event);
}, false);
image.src = event.target.result;
}, false);
reader.readAsDataURL(file);
onChange && onChange(obj, this.props.name, data);
});
}
}
}