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>

Three.js中,如果你想要通过鼠标操作来移动场景而不是改变相机视角,你需要使用`OrbitControls`插件以外的方式。你可以创建一个自定义的手动平移函数,例如: ```javascript // 获取场景对象 var scene = yourScene; // 创建一个空的Raycaster对象,用于检测鼠标点击位置 var raycaster = new THREE.Raycaster(); function onDocumentMouseMove(event) { // 阻止浏览器默认的滚动行为 event.preventDefault(); // 获取鼠标的屏幕坐标 var mouse = {x: (event.clientX / window.innerWidth) * 2 - 1, y: -(event.clientY / window.innerHeight) * 2 + 1}; // 更新视口中的Raycaster raycaster.setFromCamera(mouse, renderer.domElement); // 检测鼠标点击在哪些对象上 var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { // 如果有交点,说明鼠标位于场景内的某个物体上,移动这个物体 var intersectedObject = intersects[0].object; // 这里你可以设置移动量和方向,比如按照鼠标偏移的距离移动 intersectedObject.position.x += mouse.x * movementSpeed; intersectedObject.position.y -= mouse.y * movementSpeed; // 渲染更新后的场景 renderer.render(scene, camera); } } document.addEventListener('mousemove', onDocumentMouseMove); ``` 在这个例子中,我们监听鼠标移动事件,计算出鼠标相对于屏幕的位置,并尝试找到这个位置下的最近物体。然后,我们移动选定的对象,而不是相机。记得替换`yourScene`为实际的场景对象,并设置合适的`movementSpeed`值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值