three-vue-components v0.1.4

three-vue 组件说明文档

1.场景(scene)

scene预设了些参数属性 原生的官方文档

添加或修改属性的example

// templet
<t-scene :options="sceneOptions" />
<script>
    data(){
        return {
            sceneOptions: {
                fog: new THREE.Fog(0xa0a0a0, 0.1, 500), //雾
                background: new THREE.Color(0x2d2d2d)
            }
        }
    }
</script>

2.摄像机(camera)

camera预设了些参数属性 原生的官方文档

添加或修改属性的example

//template
<t-camera :options="cameraOptions" />
<script>
    data(){
        return {
            cameraOptions: {
                type: "PerspectiveCamera",
                fov: 30,
                aspect: 1920 / 1080,
                near: 1,
                far: 5000,
                position: [0, 0, 100],
                lookAt: [0, 0, 0]
            }
        }
    }
</script>

3.渲染器 (renderer)

渲染器中内置了常见的 TWEEN CSS2DRenderer

如果需要在render函数中添加代码, 需要在组件参数中的callbacks 传入回调函数

example

//template
<t-renderer :options="{callbacks}">
	<t-camera></t-camera>
    <t-scene></t-scene>
    <t-light></t-light>
</t-renderer>
<script>
	data(){
    	return {
            callbacks: []
        }
    },
    mounted(){
        this.callback.push(()=>{
            //todo
        })
    }    
</script>

4. 灯光(light)

light预设了些参数属性 原生的官方文档

example

//template
<t-renderer>
    <t-light></t-light>
    <t-light :options="lightOptions" ref="dirLight"></t-light>
</t-renderer>
<script>
	data(){
    	return {
            lightOptions: {
                type: "DirectionalLight",
                position: [0,40, 50],
                color: [0xffffff],
                params: {
                    castShadow: true,
                }
            }
        }
    },
    mounted(){
        const dirLight = this.$refs.dirlight.light
        dirLight.shadow.camera.top = 50;
        dirLight.shadow.camera.bottom = -25;
        dirLight.shadow.camera.left = -25;
        dirLight.shadow.camera.right = 25;
        dirLight.shadow.camera.near = 0.1;
        dirLight.shadow.camera.far = 200;
        dirLight.shadow.mapSize.set(1024, 1024);   
    }
</script>

5.控制器(control)