three.js使用dragControls实现拖动

在Three.js中，可以使用DragControls来实现对物体的拖动功能。以下是一个简单的例子，展示了如何使用DragControls来拖动一个立方体。

首先，确保你已经引入了Three.js库和DragControls.js模块。




<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r128/examples/jsm/controls/DragControls.js"></script>

然后，创建一个场景、相机、渲染器和一个物体：




// 创建场景
const scene = new THREE.Scene();
 
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
camera.position.z = 5;

接下来，初始化拖动控件并添加你想要拖动的物体：




const dragControls = new THREE.DragControls([cube], camera, renderer.domElement);

最后，在渲染循环中更新拖动控件的状态并渲染场景：




function animate() {
    requestAnimationFrame(animate);
 
    // 更新拖动控件
    dragControls.update();
 
    // 渲染场景
    renderer.render(scene, camera);
}
 
animate();

完整的代码示例如下：




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Draggable Cube</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://rawcdn.githack.com/mrdoob/three.js/r128/examples/jsm/controls/DragControls.js"></script>
</head>
<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
 
        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // 创建立方体
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
 
        camera.position.z = 5;
 
        // 初始化拖动控件
        const dragControls = new THREE.DragControls([cube], camera, renderer.domElement);
 
        function animate() {
            requestAnimationFrame(animate);
 
            // 更新拖

three.js使用dragControls实现拖动

评论已关闭

推荐阅读