mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
add map and envmap
This commit is contained in:
parent
9fc7ef75b7
commit
488b5fd97c
34
src/core/CubeTexture.js
Normal file
34
src/core/CubeTexture.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { CubeTextureLoader } from 'three';
|
||||
// import { watch } from 'vue';
|
||||
|
||||
export default {
|
||||
inject: ['three'],
|
||||
emits: ['loaded'],
|
||||
props: {
|
||||
path: String,
|
||||
urls: {
|
||||
type: Array,
|
||||
default: ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'],
|
||||
},
|
||||
onLoad: Function,
|
||||
onProgress: Function,
|
||||
onError: Function,
|
||||
},
|
||||
created() {
|
||||
this.texture = new CubeTextureLoader()
|
||||
.setPath(this.path)
|
||||
.load(this.urls, this.onLoaded, this.onProgress, this.onError);
|
||||
},
|
||||
unmounted() {
|
||||
this.texture.dispose();
|
||||
},
|
||||
methods: {
|
||||
onLoaded() {
|
||||
if (this.onLoad) this.onLoad();
|
||||
this.$emit('loaded');
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return [];
|
||||
},
|
||||
};
|
28
src/core/Texture.js
Normal file
28
src/core/Texture.js
Normal file
@ -0,0 +1,28 @@
|
||||
import { TextureLoader } from 'three';
|
||||
// import { watch } from 'vue';
|
||||
|
||||
export default {
|
||||
inject: ['three'],
|
||||
emits: ['loaded'],
|
||||
props: {
|
||||
src: String,
|
||||
onLoad: Function,
|
||||
onProgress: Function,
|
||||
onError: Function,
|
||||
},
|
||||
created() {
|
||||
this.texture = new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError);
|
||||
},
|
||||
unmounted() {
|
||||
this.texture.dispose();
|
||||
},
|
||||
methods: {
|
||||
onLoaded() {
|
||||
if (this.onLoad) this.onLoad();
|
||||
this.$emit('loaded');
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return [];
|
||||
},
|
||||
};
|
@ -2,3 +2,6 @@ export { default as Renderer } from './Renderer.js';
|
||||
export { default as PerspectiveCamera } from './PerspectiveCamera.js';
|
||||
export { default as Camera } from './PerspectiveCamera.js';
|
||||
export { default as Scene } from './Scene.js';
|
||||
|
||||
export { default as Texture } from './Texture.js';
|
||||
export { default as CubeTexture } from './CubeTexture.js';
|
||||
|
13
src/materials/EnvMap.js
Normal file
13
src/materials/EnvMap.js
Normal file
@ -0,0 +1,13 @@
|
||||
import CubeTexture from '../core/CubeTexture';
|
||||
|
||||
export default {
|
||||
extends: CubeTexture,
|
||||
inject: ['material'],
|
||||
created() {
|
||||
this.material.setEnvMap(this.texture);
|
||||
},
|
||||
unmounted() {
|
||||
this.material.setEnvMap(null);
|
||||
},
|
||||
__hmrId: 'EnvMap',
|
||||
};
|
15
src/materials/Map.js
Normal file
15
src/materials/Map.js
Normal file
@ -0,0 +1,15 @@
|
||||
import Texture from '../core/Texture';
|
||||
|
||||
export default {
|
||||
extends: Texture,
|
||||
inject: ['material'],
|
||||
created() {
|
||||
this.material.setMap(this.texture);
|
||||
},
|
||||
unmounted() {
|
||||
this.material.setMap(null);
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
__hmrId: 'Map',
|
||||
};
|
@ -15,6 +15,11 @@ export default {
|
||||
transparent: Boolean,
|
||||
vertexColors: Boolean,
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
material: this,
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
this.createMaterial();
|
||||
if (this.id) this.three.materials[this.id] = this.material;
|
||||
@ -29,6 +34,14 @@ export default {
|
||||
if (this.id) delete this.three.materials[this.id];
|
||||
},
|
||||
methods: {
|
||||
setMap(texture) {
|
||||
this.material.map = texture;
|
||||
this.material.needsUpdate = true;
|
||||
},
|
||||
setEnvMap(texture) {
|
||||
this.material.envMap = texture;
|
||||
this.material.needsUpdate = true;
|
||||
},
|
||||
_addWatchers() {
|
||||
// don't work for flatShading
|
||||
['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'side', 'transparent'].forEach(p => {
|
||||
@ -43,6 +56,9 @@ export default {
|
||||
},
|
||||
},
|
||||
render() {
|
||||
if (this.$slots.default) {
|
||||
return this.$slots.default();
|
||||
}
|
||||
return [];
|
||||
},
|
||||
__hmrId: 'Material',
|
||||
|
@ -7,6 +7,8 @@ export const TroisJSVuePlugin = {
|
||||
'PerspectiveCamera',
|
||||
'Renderer',
|
||||
'Scene',
|
||||
// 'Texture',
|
||||
// 'CubeTexture',
|
||||
|
||||
'BoxGeometry',
|
||||
'CircleGeometry',
|
||||
@ -38,6 +40,9 @@ export const TroisJSVuePlugin = {
|
||||
'SubSurfaceMaterial',
|
||||
'ToonMaterial',
|
||||
|
||||
'Map',
|
||||
'EnvMap',
|
||||
|
||||
'Box',
|
||||
'Circle',
|
||||
'Cone',
|
||||
|
Loading…
Reference in New Issue
Block a user