threejs(6)-操控物体实现家居编辑器

这篇具有很好参考价值的文章主要介绍了threejs(6)-操控物体实现家居编辑器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

threejs(6)-操控物体实现家居编辑器,编辑器,数码相机文章来源地址https://www.toymoban.com/news/detail-724829.html

// 导入threejs
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 导入lil.gui
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
// 导入hdr加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
// 导入gltf加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 导入draco解码器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
// 导入变换控制器
import { TransformControls } from "three/addons/controls/TransformControls.js";
// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  1000 // 远平面
);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 开启抗锯齿
});
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = 1;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 设置相机位置
camera.position.z = 8;
camera.position.y = 2.5;
camera.position.x = 3;
camera.lookAt(0, 1.2, 0);

// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 添加网格辅助器
const gridHelper = new THREE.GridHelper(50, 50);
gridHelper.material.opacity = 0.3;
gridHelper.material.transparent = true;
scene.add(gridHelper);

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;

// 渲染函数
function animate() {
  controls.update();
  requestAnimationFrame(animate);
  // 渲染
  renderer.render(scene, camera);
}
animate();

// 监听窗口变化
window.addEventListener("resize", () => {
  // 重置渲染器宽高比
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重置相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机投影矩阵
  camera.updateProjectionMatrix();
});

// rgbeLoader 加载hdr贴图
let rgbeLoader = new RGBELoader();
rgbeLoader.load("./texture/Alex_Hart-Nature_Lab_Bones_2k.hdr", (envMap) => {
  // 设置球形贴图
  // envMap.mapping = THREE.EquirectangularReflectionMapping;
  envMap.mapping = THREE.EquirectangularRefractionMapping;
  // 设置环境贴图
  // scene.background = envMap;
  scene.background = new THREE.Color(0xcccccc);
  // 设置环境贴图
  scene.environment = envMap;
});
// rgbeLoader 加载hdr贴图
// 实例化加载器gltf
const gltfLoader = new GLTFLoader();
// 实例化加载器draco
const dracoLoader = new DRACOLoader();
// 设置draco路径
dracoLoader.setDecoderPath("./draco/");
// 设置gltf加载器draco解码器
gltfLoader.setDRACOLoader(dracoLoader);
// 加载模型
gltfLoader.load(
  // 模型路径
  "./model/house/house-scene-min.glb",
  // 加载完成回调
  (gltf) => {
    basicScene = gltf.scene;
  }
);

// 创建变换控制器
let tControls = new TransformControls(camera, renderer.domElement);
tControls.addEventListener("change", animate);
// 监听拖动事件,当拖动物体时候,禁用轨道控制器
tControls.addEventListener("dragging-changed", function (event) {
  controls.enabled = !event.value;
});
tControls.addEventListener("change", () => {
  if (eventObj.isClampGroup) {
    tControls.object.position.y = 0;
  }
});
scene.add(tControls);

let basicScene;
let eventObj = {
  Fullscreen: function () {
    // 全屏
    document.body.requestFullscreen();
    console.log("全屏");
  },
  ExitFullscreen: function () {
    document.exitFullscreen();
    console.log("退出全屏");
  },
  addScene: function () {
    scene.add(basicScene);
  },
  setTranslate: function () {
    tControls.setMode("translate");
  },
  setRotate: function () {
    tControls.setMode("rotate");
  },
  setScale: function () {
    tControls.setMode("scale");
  },
  toggleSpace: function () {
    tControls.setSpace(tControls.space === "local" ? "world" : "local");
  },
  cancelMesh: function () {
    tControls.detach();
  },
  translateSnapNum: null,
  rotateSnapNum: 0,
  scaleSnapNum: 0,
  isClampGroup: false,
  isLight: true,
};
// 创建GUI
const gui = new GUI();
// 添加按钮
// gui.add(eventObj, "Fullscreen").name("全屏");
// gui.add(eventObj, "ExitFullscreen").name("退出全屏");
// 控制立方体的位置
// gui.add(cube.position, "x", -5, 5).name("立方体x轴位置");

gui.add(eventObj, "addScene").name("添加户型基础模型");
gui.add(eventObj, "setTranslate").name("位移模式");
gui.add(eventObj, "setRotate").name("旋转模式");
gui.add(eventObj, "setScale").name("缩放模式");
gui.add(eventObj, "toggleSpace").name("切换空间模式");
gui.add(eventObj, "cancelMesh").name("取消选择");
gui
  .add(eventObj, "isLight")
  .name("是否开启灯光")
  .onChange((value) => {
    if (value) {
      renderer.toneMappingExposure = 1;
    } else {
      renderer.toneMappingExposure = 0.1;
    }
  });
// 监听鼠标按键事件
window.addEventListener("keydown", (event) => {
  // 判断是否按的是t键
  if (event.key === "t") {
    eventObj.setTranslate();
  }
  if (event.key === "r") {
    eventObj.setRotate();
  }
  if (event.key === "s") {
    eventObj.setScale();
  }
});

// 添加物体目录
let meshList = [
  {
    name: "盆栽",
    path: "./model/house/plants-min.glb",
  },
  {
    name: "单人沙发",
    path: "./model/house/sofa_chair_min.glb",
  },
];
let folderAddMehs = gui.addFolder("添加物体");
let sceneMeshes = [];
let meshesNum = {};
meshList.forEach((item) => {
  item.addMesh = function () {
    gltfLoader.load(item.path, (gltf) => {
      sceneMeshes.push({
        ...item,
        object3d: gltf.scene,
      });
      let object3d = gltf.scene;

      scene.add(object3d);
      tControlSelect(object3d);
      let meshOpt = {
        toggleMesh: function () {
          tControlSelect(object3d);
        },
      };
      meshesNum[item.name] = meshesNum[item.name]
        ? meshesNum[item.name] + 1
        : 1;
      meshesFolder
        .add(meshOpt, "toggleMesh")
        .name(item.name + meshesNum[item.name]);
    });
  };
  folderAddMehs.add(item, "addMesh").name(item.name);
});

function tControlSelect(mesh) {
  tControls.attach(mesh);
}

let meshesFolder = gui.addFolder("家居列表");

let snapFolder = gui.addFolder("固定设置");
snapFolder
  .add(eventObj, "translateSnapNum", {
    不固定: null,
    1: 1,
    0.1: 0.1,
    10: 10,
  })
  .name("固定位移设置")
  .onChange(() => {
    tControls.setTranslationSnap(eventObj.translateSnapNum);
  });
snapFolder
  .add(eventObj, "rotateSnapNum", 0, 1)
  .step(0.01)
  .name("旋转")
  .onChange(() => {
    tControls.setRotationSnap(eventObj.rotateSnapNum * Math.PI * 2);
  });
snapFolder
  .add(eventObj, "scaleSnapNum", 0, 2)
  .step(0.1)
  .name("缩放")
  .onChange(() => {
    tControls.setScaleSnap(eventObj.scaleSnapNum);
  });
snapFolder.add(eventObj, "isClampGroup").name("是否吸附到地面");

到了这里,关于threejs(6)-操控物体实现家居编辑器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实现一个python代码编辑器

    代码编辑器采用了monacoEditor,一个现成的编辑器。网上有很多文档介绍和开源项目,但是怎么说呢,跟着做,可以实现一个网页编辑器,可以高亮python的语法,但是没有python的提示,找不到可以参考的,js我也不会,看的着实云里雾里。 【提示】在VsCode上运行比较方便 -----

    2024年02月21日
    浏览(56)
  • 编辑器的缩略图实现原理

    部分 Web 版的 IDE 编辑器未曾实现缩略图功能,探寻一下缩略图的实现逻辑。以 VSCode 为例。 VSCode 的编辑器是 monaco 实现的,编辑器的编辑区都是采用的 虚拟渲染 ,即仅渲染可视区的代码,可视区之外的动态去除 DOM 节点。 打开 VScode Help Toggle Developer Tools,观察 DOM 节点的状态

    2024年02月09日
    浏览(39)
  • qt+opencv实现图片编辑器

    借助QLabel容器,进行显示图片作为背景,然后重写QLabel类实现矩形,直线和圆形的实现。opencv板块直接实现相关图片操作。 打开图片 裁切 改变亮度和对比度 顺时针旋转和逆时针旋转 重写的QLabel

    2024年02月16日
    浏览(45)
  • GLTF编辑器实现逼真的石门模型

    在线工具推荐: 3D数字孪生场景编辑器  -  GLTF/GLB材质纹理编辑器  -  3D模型在线转换  -  Three.js AI自动纹理开发包  -  YOLO 虚幻合成数据生成器  -  三维模型预览图生成器  -  3D模型语义搜索引擎 在凹凸贴图中,每个像素点都包含了一个法线向量,表示该点表面的方向。

    2024年02月03日
    浏览(47)
  • 用odin实现的资源复制编辑器

    用odin实现了一个资源复制编辑器,使用要安装odin,功能是把要复制的资源路径一个个添加设置,点copy能把列表里的资源全部复制,支持目录复制到目录,文件复制到目录,文件复制替换。提升效率,让自己有更多的时间研究其他东西或者休息,需要注意的是只有一个目标路

    2024年04月16日
    浏览(53)
  • uniapp 实现富文本编辑器【小程序端】

    css资源文件戳该链接:富文本css文件链接 编辑菜单我搞成吸顶效果了,方便手机编辑不用再滑到头部点编辑菜单:css实现元素吸顶效果 ————————————————————————————————————————————

    2024年02月16日
    浏览(65)
  • GLTF 编辑器实现逼真3D动物毛发效果

    在线工具推荐: 3D数字孪生场景编辑器  -  GLTF/GLB材质纹理编辑器  -  3D模型在线转换  -  Three.js AI自动纹理开发包  -  YOLO 虚幻合成数据生成器  -  三维模型预览图生成器  -  3D模型语义搜索引擎 要实现逼真的3D动物毛发效果,可以采用以下技术和方法: 毛发建模:使用

    2024年02月03日
    浏览(45)
  • 织梦dedecms默认编辑器实现上传视频功能

    织梦默认的编辑器采用的是ckeditor厂商提供的,只可以上传Flash,今天我们进行二次改进,使之可以上传视频文件如MP4文件进行播放,方法比较简单,无需去更换编辑器,下面就言归正传。 第一步:后台系统–添加MP4扩展名 登录后台–系统基本参数–附件设置–允许的多媒体

    2024年02月03日
    浏览(45)
  • GLTF编辑器-位移贴图实现破碎的路面

    在线工具推荐: 3D数字孪生场景编辑器  -  GLTF/GLB材质纹理编辑器  -  3D模型在线转换  -  Three.js AI自动纹理开发包  -  YOLO 虚幻合成数据生成器  -  三维模型预览图生成器  -  3D模型语义搜索引擎 位移贴图是一种可以用于增加模型细节和形状的贴图。它能够在渲染时针对

    2024年02月03日
    浏览(43)
  • 瓦片地图编辑器——实现卡马克卷轴的编辑,键盘控制游戏移动和鼠标点击游戏编辑通过同一个视口实现。

      左边是游戏地图编辑区,右边是地图缓冲区,解决了地图缓冲区拖动bug,成功使得缓冲区可以更新。 AWSD进行移动 鼠标左右键分别是绘制/拖动 按F1健导出为mapv3.txt F2清空数组 打印的是游戏数组 easyx开发devcpp 5.11 easyx20220922版本

    2024年01月25日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包