threejs 鼠标拖动物体

<template>
<!--    <canvas id="c" style="width: 100%;height: 100%"></canvas>-->
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {DragControls} from "three/examples/jsm/controls/DragControls.js";
import {onMounted} from "vue";
import {PlaneGeometry} from "three";
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
onMounted(()=>{
    main()
})
let renderer,camera,scene,cube
const main = () => {
    scene = new THREE.Scene()

    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement)
    camera = new THREE.PerspectiveCamera(40,2,0.1,1000)
    // camera.position.set(0,-15,1)
    camera.position.set( 0, 10, 50 );
    // camera.position.z = 10

    // 方向光

    const color = 0xFFFFFF;
    const intensity = 5;
    const light = new THREE.DirectionalLight( color, intensity );
    light.position.set( - 1, 2, 4 );//目前还没搞清楚这个
    scene.add( light );

    const helper = new THREE.DirectionalLightHelper(light);
    scene.add(helper);

    // 环境光
    // let light = new THREE.AmbientLight('red',1)
    // 半球光
    // let skyColor = 'yellow'
    // let groundColor = 'blue'
    // let intensity = 1
    // let light = new THREE.HemisphereLight(skyColor,groundColor,intensity)
    // scene.add(light)

    // 草地集合体
    let groundGeometry = new PlaneGeometry(10,10)
//     贴图
    let groundTexture = new THREE.TextureLoader().load('/grassland.png')
    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping
    groundTexture.repeat.set(10,10)
    groundTexture.magFilter = THREE.NearestFilter;
    // groundTexture.anisotropy = 1
    const groundMaterial = new THREE.MeshLambertMaterial({   //生成贴图的材质
        map: groundTexture
    })
     cube = new THREE.Mesh( groundGeometry, groundMaterial )
    cube.rotation.x = Math.PI * -.5;
    scene.add(cube)

    // 立方体
    let cubeGeo = new THREE.BoxGeometry(1,1,1)
    let cubeMat = new THREE.MeshPhongMaterial({color:'red'})
    let cubeMesh = new THREE.Mesh(cubeGeo,cubeMat)
    cubeMesh.position.y = 2
    scene.add(cubeMesh)

    // 圆图
    const sphereRadius = 3;
    const sphereWidthDivisions = 32;
    const sphereHeightDivisions = 16;
    const sphereGeo = new THREE.SphereGeometry( sphereRadius, sphereWidthDivisions, sphereHeightDivisions );
    const sphereMat = new THREE.MeshPhongMaterial( { color: '#CA8' } );
    const mesh = new THREE.Mesh( sphereGeo, sphereMat );
    mesh.position.set( - sphereRadius - 1, sphereRadius + 2, 0 );
    scene.add( mesh );


    class ColorGUIHelper {

        constructor( object, prop ) {

            this.object = object;
            this.prop = prop;

        }
        get value() {

            return `#${this.object[ this.prop ].getHexString()}`;

        }
        set value( hexString ) {

            this.object[ this.prop ].set( hexString );

        }

    }


    const gui = new GUI();
    gui.addColor( new ColorGUIHelper( light, 'color' ), 'value' ).name( 'color' );
    gui.add( light, 'intensity', 0, 5, 0.01 );
    // const controls = new OrbitControls(camera, renderer.domElement); //添加这一行可以鼠标转动页面上生成的mesh
    // controls.addEventListener('change',function (){
    //     // renderer.render()
    //     renderer.render(scene, camera);
    //
    //
    // })
    // renderer.render(scene, camera);

    // controls.target.set(0,1,0)
    // controls.update()
    requestAnimationFrame(render)

//拖动物体主要是DragControls函数 数组添加需要移动的mesh
    let objects = [];
    objects.push(mesh)
    objects.push(cube)
    let dragControls = new DragControls(objects, camera, renderer.domElement);
}

const render = (time) => {
    time *= 0.001;  // 将时间单位变为秒
    // cube.rotation.x = time;
    // cube.rotation.y = time;
    renderer.render(scene, camera);

    requestAnimationFrame(render);
}



</script>

<style lang="scss" scoped>

</style>