Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
2.15k stars 103 forks source link

position type is incorrect #696

Open wangxiaoze-view opened 3 months ago

wangxiaoze-view commented 3 months ago

Description

I defined a camera and a light and used the :position attribute, but the type error was displayed in vscode; so I changed :position="[3, 3,3]" to:position="new THREE. Vector3(0, 3, 3)" results in no type error;

I don't know if it's a version problem or a package version problem.

Suggested solution

<script setup lang="ts">
    import * as THREE from 'three'
    import { TresCanvas } from '@tresjs/core'
    import { OrbitControls, vLightHelper } from '@tresjs/cientos'

    import Texture_02 from '@/components/texture/texture_02/index.vue'
    defineOptions({
        dir_name: 'stickers',
    })
</script>

<template>
    <div class="container">
        <TresCanvas shadows clear-color="#82DBC5" preset="realistic" alpha power-preference="high-performance">
            <OrbitControls />

                        <!-- There will be a type problem here -->
            <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />

            <Suspense>
                <Texture_02 />
            </Suspense>

                         <!-- OK -->
            <TresDirectionalLight :intensity="1" :position="new THREE.Vector3(0, 3, 3)" v-light-helper />
        </TresCanvas>
    </div>
</template>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

Alternative

At first I thought: position="new THREE.Vector3(0, 3, 3)" is a better way to understand the original parameters of threejs, but after reading the documentation, I found: position="[0,3,3]" is simpler ;But the recommended writing method in the document is: position="[0,3,3]"

image

Additional context

image image

Validations