three.js 模型拖拽

多模型独立拖拽

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多模型独立拖拽</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from "../../standard.libs/three.js/build/three.module.js"; /* three.js的module */
        import { OrbitControls } from '../../standard.libs/three.js/examples/jsm/controls/OrbitControls.js';
        import { DragControls } from '../../standard.libs/three.js/examples/jsm/controls/DragControls.js';
        import { TransformControls } from '../../standard.libs/three.js/examples/jsm/controls/TransformControls.js';

        var scene, camera, renderer, orbitControls;
        const objects = []; /* 模型数组 */

        initScene();
        createGeometry();
        createDragControls(objects);

        function initScene() {
            /* 构建场景 */
            scene = new THREE.Scene();

            /* 构建一个坐标系 */
            var axisHelper = new THREE.AxesHelper(1000);
            scene.add(axisHelper);

            /* 构建环境光, 环境光不能用来投射阴影,因为它没有方向 */
            // var ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
            // scene.add(ambientLight);

            /* 构建点光源,可以有明暗变化 */
            var pointLight = new THREE.PointLight(0xffffff);
            pointLight.position.set(400, 200, 300); //点光源位置
            scene.add(pointLight); //点光源添加到场景中

            /* 构建相机 */
            var width = window.innerWidth; // 窗口宽度
            var height = window.innerHeight; // 窗口高度
            var k = width / height; // 窗口宽高比
            var s = 200; // 三维场景显示范围控制系数,系数越大,显示的范围越大
            camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
            camera.position.set(200, 300, 200); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)

            /* 构建渲染器 */
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height); // 设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
            document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

            orbitControls = new OrbitControls(camera, renderer.domElement);
            orbitControls.update();
        }

        function createGeometry() {
            /* 构建正方体几何对象添加到场景中 */
            var boxGeometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个正方体几何对象
            var materialBox = new THREE.MeshLambertMaterial({
                color: 0x0000ff,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshBox = new THREE.Mesh(boxGeometry, materialBox); // 网格模型对象Mesh
            meshBox.name = "box";
            scene.add(meshBox); // 网格模型添加到场景中,未设定x/y/z坐标,默认位于坐标轴原点
            objects.push(meshBox);

            /* 圆柱体几何对象添加到场景中 */
            var cylinder = new THREE.CylinderGeometry(50, 50, 200, 25);
            var materialCylinder = new THREE.MeshLambertMaterial({
                color: 0xd0021b,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshCylinder = new THREE.Mesh(cylinder, materialCylinder); // 网格模型对象Mesh
            meshCylinder.name = "cylinder"; /* 标识符 */
            scene.add(meshCylinder);
            objects.push(meshCylinder);
        }

        function createDragControls(objects) {
            // 初始化拖拽控件
            var dragControls = new DragControls(objects, camera, renderer.domElement);

            // 鼠标略过事件
            dragControls.addEventListener('hoveron', function (event) {
                console.log("createDragControls hoveron");
                // 让变换控件对象和选中的对象绑定
            });

            // 开始拖拽
            dragControls.addEventListener('dragstart', function (event) {
                console.log("createDragControls dragstart");
                orbitControls.enabled = false;
            });

            // 拖拽过程
            dragControls.addEventListener('drag', function (event) {
                console.log("createDragControls drag");
                dragControlsRender();
            });

            // 拖拽结束
            dragControls.addEventListener('dragend', function (event) {
                console.log("createDragControls dragend");
                orbitControls.enabled = true;
            });
        }

        function dragControlsRender() {
            renderer.render(scene, camera);
        }

        function render() {
            orbitControls.update();
            /* 执行渲染 */
            requestAnimationFrame(render);
            renderer.render(scene, camera); //执行渲染操作,指定场景、相机作为参数
        }
        render();
    </script>
</body>

</html>

多模型组合拖拽

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多模型组合拖拽</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from "../../standard.libs/three.js/build/three.module.js"; /* three.js的module */
        import { OrbitControls } from '../../standard.libs/three.js/examples/jsm/controls/OrbitControls.js';
        import { DragControls } from '../../standard.libs/three.js/examples/jsm/controls/DragControls.js';
        import { TransformControls } from '../../standard.libs/three.js/examples/jsm/controls/TransformControls.js';

        var scene, camera, renderer, orbitControls;
        const objects = []; /* 模型数组 */

        initScene();
        createGeometry();
        createDragControls(objects);

        function initScene() {
            /* 构建场景 */
            scene = new THREE.Scene();

            /* 构建一个坐标系 */
            var axisHelper = new THREE.AxesHelper(1000);
            scene.add(axisHelper);

            /* 构建环境光, 环境光不能用来投射阴影,因为它没有方向 */
            // var ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
            // scene.add(ambientLight);

            /* 构建点光源,可以有明暗变化 */
            var pointLight = new THREE.PointLight(0xffffff);
            pointLight.position.set(400, 200, 300); //点光源位置
            scene.add(pointLight); //点光源添加到场景中

            /* 构建相机 */
            var width = window.innerWidth; // 窗口宽度
            var height = window.innerHeight; // 窗口高度
            var k = width / height; // 窗口宽高比
            var s = 200; // 三维场景显示范围控制系数,系数越大,显示的范围越大
            camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
            camera.position.set(200, 300, 200); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)

            /* 构建渲染器 */
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height); // 设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
            document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

            orbitControls = new OrbitControls(camera, renderer.domElement);
            orbitControls.update();
        }

        function createGeometry() {
            /* 构建正方体几何对象添加到场景中 */
            var boxGeometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个正方体几何对象
            var materialBox = new THREE.MeshLambertMaterial({
                color: 0x0000ff,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshBox = new THREE.Mesh(boxGeometry, materialBox); // 网格模型对象Mesh
            meshBox.name = "box";
            scene.add(meshBox); // 网格模型添加到场景中,未设定x/y/z坐标,默认位于坐标轴原点
            objects.push(meshBox);

            /* 圆柱体几何对象添加到场景中 */
            var cylinder = new THREE.CylinderGeometry(50, 50, 200, 25);
            var materialCylinder = new THREE.MeshLambertMaterial({
                color: 0xd0021b,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshCylinder = new THREE.Mesh(cylinder, materialCylinder); // 网格模型对象Mesh
            meshCylinder.name = "cylinder"; /* 标识符 */
            scene.add(meshCylinder);
            objects.push(meshCylinder);
        }

        function createDragControls(objects) {
            // 初始化拖拽控件
            var dragControls = new DragControls(objects, camera, renderer.domElement);

            // 鼠标略过事件
            dragControls.addEventListener('hoveron', function (event) {
                console.log("createDragControls hoveron");
                // 让变换控件对象和选中的对象绑定
            });

            // 开始拖拽
            dragControls.addEventListener('dragstart', function (event) {
                console.log("createDragControls dragstart");
                orbitControls.enabled = false;
            });

            // 拖拽过程
            dragControls.addEventListener('drag', function (event) {
                console.log("createDragControls drag");

                var name = event.object.name;
                // 给内部模型位置赋值
                for (var i = 0; i < objects.length; i++) {
                    if (objects[i].name != event.object.name) {
                        objects[i].position.x = event.object.position.x;
                        objects[i].position.y = event.object.position.y;
                        objects[i].position.z = event.object.position.z;
                    }
                }

                dragControlsRender();
            });

            // 拖拽结束
            dragControls.addEventListener('dragend', function (event) {
                console.log("createDragControls dragend");
                orbitControls.enabled = true;
            });
        }

        function dragControlsRender() {
            renderer.render(scene, camera);
        }

        function render() {
            orbitControls.update();
            /* 执行渲染 */
            requestAnimationFrame(render);
            renderer.render(scene, camera); //执行渲染操作,指定场景、相机作为参数
        }
        render();
    </script>
</body>

</html>
  • 6
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
对整threeJS体系进行全面剖析。整理出全面的教学大纲,涵盖内容面非常广。此教学版本为threeJS107版本。关于版本不建议大家使用低于90的版本学习。以下是课程目录1-ThreeJS概览(基本图形简介,什么是点线面如何绘制点线面,什么是材质,什么是几何体,什么是相机,什么是渲染器,什么是场景)2-相机和渲染器(详解相机类型,渲染器如何使用,针对不同场景怎么用,怎么调效果,怎么渲染,怎么输出画布,如何解决透明问题等等)3-创建平面几何(常见的几何体如何使用,如何使用简单的几何体绘制出自定义自己想要的几何体,关于几何体的性能剖析,如何解决性能,几何体的渲染原理)4-高级图形算法常见库(求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等)5-sprite精灵(怎么让一个图标永远朝向屏幕,精灵的属性,精灵材质原理等,广告提示框必用)6-骨骼游戏动画(什么是模型动画,常见游戏案例,如何让人头进行各种攻击动作)7-3d模型加载(常见模型格式,如何渲染不同格式,不同格式的特点,什么格式性能优越,模型渲染异常,贴图不显示等问题详解)8-高阶动态纹理(你所不知道的纹理用法,我说你不知道,你肯定不知道)9-漫游轨迹以及其动画路径(怎么绘制贝塞尔曲线,如何使用曲线上的路径,跟随路径移动的原理,相机如何运动,物体如何运动)10-着色器(什么是着色器。初识着色器基础,着色器材质怎么用,怎么使用着色器库)11-常见渲染以及透明度问题12-对象拾取以及拖拽(3d世界里面如何拖拽物体,拖拽的原理,mousemove mouseon等的事件效果)13-世界坐标以及组的问题(什么是相对坐标,什么是世界坐标,什么是当前坐标,怎么转化父子坐标系,组的优化,为什么用组,组的优势)14-指定对象旋转中心(什么是物体的几何体中心,如何改变中心,如何绕轴转动)15-层级对象渲染(多个场景一键切换,切换的优势,针对大项目的用法)16-拓展了解系列(不定期不断更新案例,各种酷炫效果bloom,halo等,以及各种3d图表,粒子案例等,不断构建你的3d实践能力)
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值