diff --git a/README.md b/README.md index 7bf1497..e113009 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ I wanted to try to write a lib similar to [react-three-fiber](https://github.com ## PoC -I first made a simple *Proof of Concept*, take a look at [Test.vue](/src/components/Test.vue) : +I first made a simple *Proof of Concept*, take a look at [Test1.vue](/src/components/Test1.vue) : ```html diff --git a/src/App.vue b/src/App.vue index 2d4d6ab..343b97d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,15 +10,16 @@ diff --git a/src/geometries/Geometry.js b/src/geometries/Geometry.js index ef891dd..3b067d5 100644 --- a/src/geometries/Geometry.js +++ b/src/geometries/Geometry.js @@ -1,6 +1,6 @@ export default { inject: ['parent'], - created() { + beforeMounted() { if (!this.parent) { console.error('Missing parent Mesh'); } diff --git a/src/geometries/SphereGeometry.js b/src/geometries/SphereGeometry.js index f79dcfc..d003480 100644 --- a/src/geometries/SphereGeometry.js +++ b/src/geometries/SphereGeometry.js @@ -3,7 +3,6 @@ import Geometry from './Geometry.js'; export default { extends: Geometry, - inject: ['parent'], props: { radius: Number, widthSegments: { @@ -16,6 +15,6 @@ export default { }, }, mounted() { - this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments); + this.parent.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments); }, }; diff --git a/src/lights/AmbientLight.js b/src/lights/AmbientLight.js new file mode 100644 index 0000000..2e55579 --- /dev/null +++ b/src/lights/AmbientLight.js @@ -0,0 +1,9 @@ +import { AmbientLight } from 'three'; +import Light from './Light.js'; + +export default { + extends: Light, + created() { + this.light = new AmbientLight(this.color, this.intensity); + }, +}; diff --git a/src/lights/Light.js b/src/lights/Light.js index 5bf75b7..9ea9223 100644 --- a/src/lights/Light.js +++ b/src/lights/Light.js @@ -1,7 +1,3 @@ -import { - Vector3, -} from 'three'; - import { setFromProp } from '../tools.js'; export default { @@ -15,19 +11,17 @@ export default { type: Number, default: 1, }, - distance: { - type: Number, - default: 0, - }, - decay: { - type: Number, - default: 1, + castShadow: { + type: Boolean, + default: false, }, position: Object, }, mounted() { setFromProp(this.light.position, this.position); + this.light.castShadow = this.castShadow; this.scene.add(this.light); + if (this.light.target) this.scene.add(this.light.target); }, render() { return []; diff --git a/src/lights/PointLight.js b/src/lights/PointLight.js index f607a59..7165330 100644 --- a/src/lights/PointLight.js +++ b/src/lights/PointLight.js @@ -3,6 +3,16 @@ import Light from './Light.js'; export default { extends: Light, + props: { + distance: { + type: Number, + default: 0, + }, + decay: { + type: Number, + default: 1, + }, + }, created() { this.light = new PointLight(this.color, this.intensity, this.distance, this.decay); }, diff --git a/src/lights/SpotLight.js b/src/lights/SpotLight.js new file mode 100644 index 0000000..cdca565 --- /dev/null +++ b/src/lights/SpotLight.js @@ -0,0 +1,27 @@ +import { SpotLight } from 'three'; +import Light from './Light.js'; + +export default { + extends: Light, + props: { + distance: { + type: Number, + default: 0, + }, + angle: { + type: Number, + default: Math.PI / 3, + }, + penumbra: { + type: Number, + default: 0, + }, + decay: { + type: Number, + default: 1, + }, + }, + created() { + this.light = new SpotLight(this.color, this.intensity, this.distance, this.angle, this.penumbra, this.decay); + }, +}; diff --git a/src/lights/index.js b/src/lights/index.js index eaa3996..c92b624 100644 --- a/src/lights/index.js +++ b/src/lights/index.js @@ -1 +1,3 @@ +export { default as AmbientLight } from './AmbientLight.js'; export { default as PointLight } from './PointLight.js'; +export { default as SpotLight } from './SpotLight.js'; diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js index 6405883..6299945 100644 --- a/src/meshes/InstancedMesh.js +++ b/src/meshes/InstancedMesh.js @@ -17,7 +17,6 @@ export default { }; }, beforeMount() { - console.log(this.conf); if (!this.$slots.default) { console.error('Missing Geometry'); }