diff --git a/README.md b/README.md index 45dee9d..64babd7 100644 --- a/README.md +++ b/README.md @@ -22,8 +22,10 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects - [ ] HMR - [x] PerspectiveCamera : aspect, far, fov, near, position - - [x] Light : position + - [x] Light : castShadow, color, intensity, position, target + - [x] SpotLight : angle, decay, distance, penumbra - [x] Material : color, depthTest, depthWrite, fog, opacity, transparent + - [x] StandardMaterial : emissive, emissiveIntensity, metalness, roughness - [x] Mesh : position, rotation, scale - [ ] ... diff --git a/src/core/PerspectiveCamera.js b/src/core/PerspectiveCamera.js index be19415..1354775 100644 --- a/src/core/PerspectiveCamera.js +++ b/src/core/PerspectiveCamera.js @@ -1,5 +1,5 @@ import { PerspectiveCamera, Vector3 } from 'three'; -import { toRef, watch } from 'vue'; +import { watch } from 'vue'; import useBindProp from '../use/useBindProp.js'; export default { diff --git a/src/lights/DirectionalLight.js b/src/lights/DirectionalLight.js index ddb4632..afe807f 100644 --- a/src/lights/DirectionalLight.js +++ b/src/lights/DirectionalLight.js @@ -3,6 +3,9 @@ import Light from './Light.js'; export default { extends: Light, + props: { + target: Object, + }, created() { this.light = new DirectionalLight(this.color, this.intensity); }, diff --git a/src/lights/Light.js b/src/lights/Light.js index 6e3a4c2..d6639a4 100644 --- a/src/lights/Light.js +++ b/src/lights/Light.js @@ -1,3 +1,5 @@ +import { Color } from 'three'; +import { watch } from 'vue'; import { setFromProp } from '../tools.js'; import useBindProp from '../use/useBindProp.js'; @@ -22,11 +24,25 @@ export default { mounted() { useBindProp(this, 'position', this.light.position); + if (this.light.target) { + useBindProp(this, 'target', this.light.target.position); + } + if (this.light.shadow) { this.light.castShadow = this.castShadow; setFromProp(this.light.shadow.mapSize, this.shadowMapSize); } + ['color', 'intensity', 'castShadow'].forEach(p => { + watch(() => this[p], () => { + if (p === 'color') { + this.light.color = new Color(this.color); + } else { + this.light[p] = this[p]; + } + }); + }); + this.scene.add(this.light); if (this.light.target) this.scene.add(this.light.target); }, diff --git a/src/lights/SpotLight.js b/src/lights/SpotLight.js index f1953b5..61f2b0a 100644 --- a/src/lights/SpotLight.js +++ b/src/lights/SpotLight.js @@ -1,28 +1,35 @@ import { SpotLight } from 'three'; +import { watch } from 'vue'; 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, }, + distance: { + type: Number, + default: 0, + }, + penumbra: { + type: Number, + default: 0, + }, + target: Object, }, created() { this.light = new SpotLight(this.color, this.intensity, this.distance, this.angle, this.penumbra, this.decay); + ['angle', 'decay', 'distance', 'penumbra'].forEach(p => { + watch(() => this[p], () => { + this.light[p] = this[p]; + }); + }); }, __hmrId: 'SpotLight', }; diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js index 286265a..c13f1eb 100644 --- a/src/materials/StandardMaterial.js +++ b/src/materials/StandardMaterial.js @@ -1,4 +1,5 @@ -import { MeshStandardMaterial } from 'three'; +import { Color, MeshStandardMaterial } from 'three'; +import { watch } from 'vue'; import Material from './Material'; export default { @@ -23,6 +24,15 @@ export default { }, created() { this.material = new MeshStandardMaterial(this.propsValues()); + ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => { + watch(() => this[p], () => { + if (p === 'emissive') { + this.material.emissive = new Color(this.emissive); + } else { + this.material[p] = this[p]; + } + }); + }); }, __hmrId: 'StandardMaterial', };