Merge pull request #43 from vue-gl/lens-flare

Add the new texture component. Resolves #42 .

README.md

@@ -130,6 +130,8 @@ When you open the html above in the browser, you'll see below.
   - [x] **[VglRenderer](src/vgl-renderer.js)** - Corresponding to [THREE.WebGLRenderer](https://threejs.org/docs/index.html#api/renderers/WebGLRenderer)
 - Scenes
   - [x] **[VglScene](src/vgl-scene.js)** - Corresponding to [THREE.Scene](https://threejs.org/docs/index.html#api/scenes/Scene)
+- Textures
+  - [x] **[VglTexture](src/vgl-texture.js)** - Load an image using [THREE.TextureLoader](https://threejs.org/docs/index.html#api/textures/TextureLoader)
 ## Contribution
 Are you interested in enhance this product ?  
 We're really glad and thanks a lot !  

docs/_includes/breadcrumbs/textures.md

@@ -0,0 +1 @@
+[Home](..) > [References](.) > [Components](.#components) > [Textures](.#textures) >

docs/index.md

@@ -166,6 +166,71 @@ It works with the reactive data bindings of Vue.js. Follwing code uses [form inp
         });
     </script>
 "></iframe></div>
+# Multiple renderers
+Multiple renderers can share the same datas. It might be helpful if you want to reduce using resouces.
+```html
+<div id="vgl-app" style="position: relative; width: 300px; height: 150px;">
+    <vgl-namespace>
+        <vgl-scene name="scn">
+            <vgl-box-geometry name="cube" width=3 height=5 depth=10></vgl-box-geometry>
+            <vgl-mesh-standard-material name="std"></vgl-mesh-standard-material>
+            <vgl-mesh geometry="cube" material="std"></vgl-mesh>
+            <vgl-ambient-light color="#ffeecc"></vgl-ambient-light>
+            <vgl-directional-light position="0 1 1"></vgl-directional-light>
+        </vgl-scene>
+        <vgl-renderer scene="scn" camera="cmr1" antialias style="width: 49.5%; height: 100%;">
+            <vgl-perspective-camera name="cmr1" orbit-position="20 1 0.5"></vgl-perspective-camera>
+        </vgl-renderer>
+        <vgl-renderer scene="scn" camera="cmr2" antialias style="width: 49.5%; height: 100%; position: absolute; left: 50.5%; top: 0">
+            <vgl-perspective-camera name="cmr2" orbit-position="20 2 0.5"></vgl-perspective-camera>
+        </vgl-renderer>
+    </vgl-namespace>
+</div>
+<script>
+    const vm = new Vue({
+        el: "#vgl-app"
+    });
+</script>
+```
+<div class="vgl-example"><iframe class="vgl-example__content" srcdoc="
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+        .vgl-canvas {
+            height: 100vh;
+        }
+    </style>
+    <div id='vgl-app'>
+        <vgl-namespace class='vgl-canvas'>
+            <vgl-scene name='scn'>
+                <vgl-box-geometry name='cube' width=3 height=5 depth=10></vgl-box-geometry>
+                <vgl-mesh-standard-material name='std'></vgl-mesh-standard-material>
+                <vgl-mesh geometry='cube' material='std'></vgl-mesh>
+                <vgl-ambient-light color='#ffeecc'></vgl-ambient-light>
+                <vgl-directional-light position='0 1 1'></vgl-directional-light>
+            </vgl-scene>
+            <vgl-renderer scene='scn' camera='cmr1' antialias style='width: 49.5%; height: 100%;'>
+                <vgl-perspective-camera name='cmr1' orbit-position='20 1 0.5'></vgl-perspective-camera>
+            </vgl-renderer>
+            <vgl-renderer scene='scn' camera='cmr2' antialias style='width: 49.5%; height: 100%; position: absolute; left: 50.5%; top: 0'>
+                <vgl-perspective-camera name='cmr2' orbit-position='20 2 0.5'></vgl-perspective-camera>
+            </vgl-renderer>
+        </vgl-namespace>
+    </div>
+    <script src='https://unpkg.com/vue/dist/vue.min.js'></script>
+    <script src='https://unpkg.com/three/build/three.js'></script>
+    <script src='js/vue-gl.js'></script>
+    <script>
+        Object.keys(VueGL).forEach(function(name) {
+            Vue.component(name, VueGL[name]);
+        });
+        const vm = new Vue({
+            el: '#vgl-app'
+        });
+    </script>
+"></iframe></div>
 # Supported browsers
 All modern browsers except IE < 8 are supported, depends on Vue.js and three.js. Note that IE9 needs a polyfill for TypedArray class ([js-polyfills/typedarray.js](https://github.com/inexorabletash/polyfill/blob/master/typedarray.js) is a one of the options).
 

docs/reference/index.md

@@ -63,3 +63,6 @@ layout: reference
 
 ## Scenes
 * [VglScene](vgl-scene)
+
+## Textures
+* [VglTexture](vgl-texture)

docs/reference/vgl-geometry.md

@@ -4,9 +4,5 @@ layout: reference
 {% include breadcrumbs/core.md %} VglGeometry
 # VglGeometry `<vgl-geometry>`
 This is the base mixin component for all geometry components, corresponding [THREE.Geometry](https://threejs.org/docs/index.html#api/core/Geometry). This can also be used directly for building custom geometries.
-## Mixins
-See the mixin components below for common properties.
-* [VglAssets](vgl-assets)
-
 ## Properties
 * {% include prop.md name="name" type="string" %} - Optional name of the component.

docs/reference/vgl-material.md

@@ -4,9 +4,5 @@ layout: reference
 {% include breadcrumbs/materials.md %} VglMaterial
 # VglMaterial `<vgl-material>`
 Abstract mixin component for materials., corresponding [THREE.Material](https://threejs.org/docs/index.html#api/materials/Material).
-## Mixins
-See the mixin components below for common properties.
-* [VglAssets](vgl-assets)
-
 ## Properties
 * {% include prop.md name="name" type="string" %} - Name of the material.

docs/reference/vgl-mesh-standard-material.md

@@ -10,6 +10,7 @@ See the mixin components below for common properties.
 
 ## Properties
 * {% include prop.md name="color" type="string" %} - CSS style color of the material.
+* {% include prop.md name="map" type="string" %} - The color map of the material.
 
 ## Example usage
 ```html

docs/reference/vgl-object3d.md

@@ -4,9 +4,6 @@ layout: reference
 {% include breadcrumbs/core.md %} VglObject3d
 # VglObject3d `<vgl-object3d>`
 This is the base mixin component for most object components in VueGL, corresponding [THREE.Object3D](https://threejs.org/docs/index.html#api/core/Object3D). Object3d components inside a object3d component are added as children via THREE.Object3D.prototype.add() method.
-## Mixins
-See the mixin components below for common properties.
-* [VglAssets](vgl-assets)
 
 ## Properties
 * {% include prop.md name="name" type="string" %} - Optional name of the object.

docs/reference/vgl-orthographic-camera.md

@@ -44,7 +44,7 @@ See the mixin components below for common properties.
             <vgl-ambient-light color='#ffeecc'></vgl-ambient-light>
             <vgl-directional-light position='0 1 2'></vgl-directional-light>
         </vgl-scene>
-        <vgl-orthographic-camera orbit-position='radius: 20; phi: 1; theta: 1;' zoom=7.5></vgl-orthographic-camera>
+        <vgl-orthographic-camera orbit-position='20 1 1' zoom=7.5></vgl-orthographic-camera>
     </vgl-renderer>
     <script src='https://unpkg.com/vue/dist/vue.min.js'></script>
     <script src='https://unpkg.com/three/build/three.min.js'></script>

docs/reference/vgl-spot-light.md

@@ -13,4 +13,4 @@ See the mixin components below for common properties.
 * `distance` - The distance from the light where the intensity is 0. When set to 0, then the light never stops.
 * `decay` - The amount the light dims along the distance of the light. For physically correct lighting, set this to 2.
 * `penumbra` - Percent of the spotlight cone that is attenuated due to penumbra. Takes values between zero and 1.
-* `target` - The spotlight's pointing position.
+* `target` - The spotlight's pointing position.

docs/reference/vgl-texture.md

@@ -0,0 +1,57 @@
+---
+layout: reference
+---
+{% include breadcrumbs/textures.md %} VglTexture
+# VglTexture `<vgl-texture>`
+A texture to apply to a surface or as a reflection or refraction map, corresponding [THREE.Texture](https://threejs.org/docs/index.html#api/textures/Texture).
+## Properties
+* {% include prop.md name="src" type="string" %} - The path or URL to the file. This can also be a Data URI.
+
+## Example usage
+```html
+<vgl-renderer antialias style="width: 300px; height: 150px;">
+    <vgl-scene>
+        <vgl-plane-geometry name="plane" width=512 height=512></vgl-plane-geometry>
+        <vgl-texture src="path/to/image.jpg" name="texture"></vgl-texture>
+        <vgl-mesh-standard-material name="std" map="texture"></vgl-mesh-standard-material>
+        <vgl-mesh geometry="plane" material="std"></vgl-mesh>
+        <vgl-ambient-light color="#ffeecc"></vgl-ambient-light>
+        <vgl-directional-light position="0 1 2"></vgl-directional-light>
+    </vgl-scene>
+    <vgl-perspective-camera orbit-position="700 1 0.5"></vgl-perspective-camera>
+</vgl-renderer>
+```
+<div class="vgl-example"><iframe class="vgl-example__content" srcdoc="
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+        .vgl-canvas {
+            height: 100vh;
+        }
+    </style>
+    <vgl-renderer antialias class='vgl-canvas'>
+        <vgl-scene>
+            <vgl-plane-geometry name='plane' width=512 height=512></vgl-plane-geometry>
+            <vgl-texture src='../img/shimoguri.jpg' name='texture'></vgl-texture>
+            <vgl-mesh-standard-material name='std' map='texture'></vgl-mesh-standard-material>
+            <vgl-mesh geometry='plane' material='std'></vgl-mesh>
+            <vgl-ambient-light color='#ffeecc'></vgl-ambient-light>
+            <vgl-directional-light position='0 1 2'></vgl-directional-light>
+        </vgl-scene>
+        <vgl-perspective-camera orbit-position='700 1 0.5'></vgl-perspective-camera>
+    </vgl-renderer>
+    <script src='https://unpkg.com/vue/dist/vue.min.js'></script>
+    <script src='https://unpkg.com/three/build/three.min.js'></script>
+    <script src='../js/vue-gl.js'></script>
+    <script>
+        Object.keys(VueGL).forEach(function(name) {
+            Vue.component(name, VueGL[name]);
+        });
+        const vm = new Vue({
+            el: '.vgl-canvas'
+        });
+    </script>
+"></iframe></div>
+<script src="https://unpkg.com/srcdoc-polyfill@1.0.0/srcdoc-polyfill.min.js"></script>

src/index.js

@@ -38,6 +38,7 @@ import VglArrowHelper from "./vgl-arrow-helper.js";
 import VglBoxHelper from "./vgl-box-helper.js";
 import VglPointLight from "./vgl-point-light.js";
 import VglSpotLight from "./vgl-spot-light.js";
+import VglTexture from "./vgl-texture.js";
 
 export {
     VglNamespace,
@@ -79,5 +80,6 @@ export {
     VglArrowHelper,
     VglBoxHelper,
     VglPointLight,
-    VglSpotLight
+    VglSpotLight,
+    VglTexture
 };

src/mixins.js

@@ -1,14 +1,11 @@
-import {parseFloat_, parseInt_} from "./utils.js";
+import {parseFloat_, parseInt_, validatePropString, validatePropNumber, update} from "./utils.js";
 
 export function assetFactory(threeClass, namespace) {
-    return {
+    const t = {
         props: {
-            name: String
+            name: validatePropString
         },
         inject: [namespace],
-        computed: {
-            inst: () => new threeClass()
-        },
         created() {
             this.$set(this[namespace].forSet, this.name, this.inst);
         },
@@ -24,24 +21,40 @@ export function assetFactory(threeClass, namespace) {
             if (this.$slots.default) return h("div", this.$slots.default);
         }
     };
+    if (threeClass) t.computed = {inst: () => new threeClass()};
+    return t;
 }
 
 function hasAssetsMixinFactory(propname, namespace) {
     const computedPropname = propname + "_";
     return {
-        props: {[propname]: String},
+        props: {[propname]: validatePropString},
         inject: [namespace],
         computed: {
             [computedPropname]() {
                 return this[namespace].forGet[this[propname]];
             }
         },
         mounted() {
-            if (this[computedPropname]) this.inst[propname] = this[computedPropname];
+            const prop = this[computedPropname];
+            if (prop) {
+                this.inst[propname] = prop;
+                prop.addEventListener("update", this.ud);
+            }
+        },
+        methods: {
+            ud() {
+                update(this);
+            }
         },
         watch: {
-            [computedPropname](prop) {
-                this.inst[propname] = prop;
+            [computedPropname](prop, old) {
+                if (prop !== old) {
+                    this.inst[propname] = prop;
+                    if (old) old.removeEventListener("update", this.ud);
+                    if (prop) prop.addEventListener("update", this.ud);
+                    update(this);
+                }
             }
         }
     };
@@ -53,13 +66,11 @@ export function objectMixinFactory(hasGeometry) {
     return {mixins};
 }
 
-const numberValidator = [String, Number];
-
 export function hedronFactory(threeClass) {
     return {
         props: {
-            radius: numberValidator,
-            detail: numberValidator
+            radius: validatePropNumber,
+            detail: validatePropNumber
         },
         computed: {
             inst() {

src/utils.js

@@ -61,3 +61,10 @@ export function findParent(vm, key) {
  */
 export const validatePropNumber = [String, Number];
 export const validatePropString = String;
+
+/**
+ * Call the ancestor renderer's vglUpdate function from object3d components.
+ */
+export function update(vm) {
+    if (vm.vglUpdate) vm.vglUpdate();
+}

src/vgl-camera.js

@@ -1,6 +1,6 @@
 import VglObject3d from "./vgl-object3d.js";
 import {assetFactory} from "./mixins.js";
-import {parseVector3, parseSpherical} from "./utils.js";
+import {parseVector3, parseSpherical, update} from "./utils.js";
 import {Camera, Vector3, Spherical} from "./three.js";
 
 function setPositionAndRotation(vm, orbitPosition, orbitTarget) {
@@ -11,6 +11,7 @@ function setPositionAndRotation(vm, orbitPosition, orbitTarget) {
             if (target) position.add(target);
         }
         vm.inst.lookAt(target || new Vector3());
+        update(vm);
     }
 }
 
@@ -20,12 +21,12 @@ export default {
         orbitTarget: [String, Vector3],
         orbitPosition: [String, Spherical]
     },
-    created() {
-        setPositionAndRotation(this, this.orbitPosition, this.orbitTarget);
-    },
     watch: {
-        orbitTarget(target) {
-            setPositionAndRotation(this, this.orbitPosition, target);
+        orbitTarget: {
+            handler(target) {
+                setPositionAndRotation(this, this.orbitPosition, target);
+            },
+            immediate: true
         },
         orbitPosition(position) {
             setPositionAndRotation(this, position, this.orbitTarget);

src/vgl-light.js

@@ -1,6 +1,6 @@
 import VglObject3d from "./vgl-object3d.js";
 import {Light} from "./three.js";
-import {parseFloat_} from "./utils.js";
+import {parseFloat_, update} from "./utils.js";
 
 export default {
     mixins: [VglObject3d],
@@ -17,16 +17,20 @@ export default {
     computed: {
         inst: () => new Light()
     },
-    created() {
-        this.inst.color.setStyle(this.color);
-        this.inst.intensity = parseFloat_(this.intensity);
-    },
     watch: {
-        color(color) {
-            this.inst.color.setStyle(color);
+        color: {
+            handler(color) {
+                this.inst.color.setStyle(color);
+                update(this);
+            },
+            immediate: true
         },
-        intensity(intensity) {
-            this.inst.intensity = parseFloat_(intensity);
+        intensity: {
+            handler(intensity) {
+                this.inst.intensity = parseFloat_(intensity);
+                update(this);
+            },
+            immediate: true
         }
     }
 };