首页 > 其他分享 >Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象

时间:2023-09-20 11:32:51浏览次数:40  
标签:const 模型 THREE Three 移除 new 100 scene group

世界坐标.getWorldPosition()

基础坐标也就是模型的.position属性 世界坐标:就是模型资深.position和所有父对象.position累加的坐标

.getWorldPosition()属性需要用三维向量表示摸个坐标后方可读取 例如:

const geometry = new THREE.BoxGeometry(100, 100, 100);
    const material = new THREE.MeshLambertMaterial({
      color: 0xff0000,
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(50, 50, 0);
    const group = new THREE.Group();
    group.add(mesh);
    group.position.set(50, 0, 0);
    scene.add(group);
    const worldPosition = new THREE.Vector3();
    mesh.getWorldPosition(worldPosition);
    console.log("世界坐标", worldPosition);
    console.log("本地坐标", mesh.position);

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_Group

这里是简单的添加了一个层级模型group, 模型默认是以原点为中心,所以要把他拿到X、Y轴上方就给他加一半的坐标,之后将父级group在往X轴再加50可以看到,世界坐标是把所有的父级对象都给累加起来了。

当然也是可以给mesh或者group添加坐标系的

const axesHelper = new THREE.AxesHelper(150);
    mesh.add(axesHelper);
2
00![](./img/Three08Img/2.png)


## 改变模型坐标原点的位置
使用 `translate`平移
```javascript
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    geometry.translate(100/2,100/2,-100/2);
    const material = new THREE.MeshLambertMaterial({
      color: 0xff0000,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_Group_02

使用旋转来查看效果:

mesh.rotateY(Math.PI/3);

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_世界坐标_03

设置旋转动画属性

function animate() {
    mesh.rotateY(0.01);//旋转动画
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_旋转动画_04

删除模型对象.remove

这里跟js中的remove()方法一致,选择对应的父节点删除里面的子节点即可 我们拿之前的例子演示一下:

<!-- author: Mr.J -->
<!-- date: 2023-04-12 11:43:45 -->
<!-- description: Vue3+JS代码块模板 -->
<template>
  <div class="container" ref="container">
  </div>
</template>

<script setup>
import * as THREE from "three";
// 轨道
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { ref, reactive, onMounted } from "vue";
// 三个必备的参数
let scene, camera, renderer, controls, mesh, group, material ;

onMounted(() => {
  // 外层需要获取到dom元素以及浏览器宽高,来对画布设置长宽
  // clientWidth等同于container.value.clientWidth
  let container = document.querySelector(".container");
  const { clientWidth, clientHeight } = container;
  console.log(clientHeight);

  init();
  animate();
  // 首先需要获取场景,这里公共方法放在init函数中
  function init() {
    scene = new THREE.Scene();
    // 给相机设置一个背景
    scene.background = new THREE.Color(0xaaaaaa);
    // 透视投影相机PerspectiveCamera
    // 支持的参数:fov, aspect, near, far
    camera = new THREE.PerspectiveCamera(
      60,
      clientWidth / clientHeight,
      0.1,
      1000
    );
    // 相机坐标
    camera.position.set(200, 200, 200);
    // 相机观察目标
    camera.lookAt(scene.position);
    // 渲染器
    renderer = new THREE.WebGLRenderer();
    // 渲染多大的地方
    renderer.setSize(clientWidth, clientHeight);
    container.appendChild(renderer.domElement);
    controls = new OrbitControls(camera, renderer.domElement);
    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);
    addBox();
    const pointLight = new THREE.PointLight(0xffffff, 1.0);
    // pointLight.position.set(400, 0, 0);//点光源放在x轴上
    pointLight.position.set(60, 20, 100); //设置光源的位置
    // 光源和网格模型Mesh对应一样是三维场景的一部分,自然需要添加到三维场景中才能起作用。
    scene.add(pointLight); // 添加光源到场景中
    const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
    scene.add(pointLightHelper);
    // scene.remove(pointLightHelper);
   
  }

  function addBox() {
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    // 材质
    material = new THREE.MeshLambertMaterial({ color: 0x00ffff });
    group = new THREE.Group();
    group.name = "积木房";
    const mesh1 = new THREE.Mesh(geometry, material);
    mesh1.name = "积木房1层";
    const mesh2 = new THREE.Mesh(geometry, material);
    mesh2.name = "积木房2层";
    mesh2.translateY(101);
    group.add(mesh1, mesh2);
    scene.add(group);
    console.log(group);
    // group.remove(mesh1)
  }
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
});
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}
</style>

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_世界坐标_05

这里移除其中一个

group.remove(mesh1)
// scene.remove(pointLightHelper); 移除环境光

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_Group_06

模型显示隐藏 .visible

mesh1.visible =false;// 隐藏一个网格模型,visible的默认值是true
group.visible =false;// 隐藏一个包含多个模型的组对象group

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_Group_07

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_Group_08

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象_Group_09

remove和visible的区别:remove是等同于删除某个模型对象,visible只是把模型隐藏起来 这里注意:如果隐藏模型的材质,将会把所有同材质的模型进行隐藏

标签:const,模型,THREE,Three,移除,new,100,scene,group
From: https://blog.51cto.com/u_15947040/7535566

相关文章

  • 三维模型3DTile格式轻量化在数据存储的重要性分析
    三维模型3DTile格式轻量化在数据存储的重要性分析 三维模型3DTile格式轻量化在数据存储中占有重要地位。随着科技的不断发展,尤其是空间信息科技的进步,人们对于三维地理空间数据的需求日益增长。然而,这类数据通常具有大尺度、高精度等特点,因此数据量巨大,给数据存储带来了巨大的......
  • R语言风险价值:ARIMA,GARCH模型,Delta-normal法滚动估计,预测VaR(Value at Risk)和回测分析
    原文链接:http://tecdat.cn/?p=24492原文出处:拓端数据部落公众号介绍此分析的目的是帮助客户构建一个过程,以在给定时变波动性的情况下正确估计风险价值。风险价值被广泛用于衡量金融机构的市场风险。我们的时间序列数据包括1258天的股票收益。为了解释每日收益率方差的一小部......
  • R语言逻辑回归Logistic选股因素模型交易策略及沪深300指数实证|附代码数据
    全文链接:http://tecdat.cn/?p=32071原文出处:拓端数据部落公众号最近我们被客户要求撰写关于交易策略的研究报告,包括一些图形和统计输出。随着中国的证券市场规模的不断壮大、市场创新不断深化、信息披露不断完善、市场监管不断强化,随着现代投资组合理论的发展和计算机技术的进......
  • 14 盒子模型
    盒子模型:margin:外边距border:边框pading:内边距元素本身<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>盒子模型</title><style>body{margin:0000;}#d1{......
  • 203.移除链表元素 707.设计链表 206.反转链表
    203.移除链表元素力扣题目链接(opensnewwindow)题意:删除链表中等于给定值val的所有节点。示例1:输入:head=[1,2,6,3,4,5,6],val=6输出:[1,2,3,4,5]示例2:输入:head=[],val=1输出:[]示例3:输入:head=[7,7,7,7],val=7输出:[]思路操作链表的两种方式:直接使用原来的......
  • nVisual模型创建
    一、 什么是nVisual模型nVisual的模型是物理设备经过美工绘制后建立在系统内的数字孪生体,模型库包含了节点图标、设备板卡模型、线缆模型和链路模型。在系统内增加某种类型的机柜或设备,都需要先增加该种类型的模型,才能根据模型生成实体对象。二、 如何在nVisual中创建模型2.1 ......
  • Text2Cypher:大语言模型驱动的图查询生成
    话接上文《图技术在LLM下的应用:知识图谱驱动的大语言模型LlamaIndex》同大家简单介绍过LLM和图、知识图谱相关的结合,现在我来和大家分享下最新的成果。毕竟,从GPT-3开始展现出超出预期的“理解能力“开始,我一直在做Graph+LLM技术组合、互补的研究、探索和分享,截止到现......
  • Text2Cypher:大语言模型驱动的图查询生成
    话接上文《图技术在LLM下的应用:知识图谱驱动的大语言模型LlamaIndex》同大家简单介绍过LLM和图、知识图谱相关的结合,现在我来和大家分享下最新的成果。毕竟,从GPT-3开始展现出超出预期的“理解能力“开始,我一直在做Graph+LLM技术组合、互补的研究、探索和分享,截止到......
  • 【Vue】大悟!MVVM模型
    hello,我是小索奇,精心制作的Vue教程持续更新哈,想要学习&巩固&避坑就一起学习叭~MVVM模型Vue虽然没有完全遵循MVVM模型,但Vue的设计也收到了它的启发在文档中也会使用VM(ViewModel的缩写)这个变量名表示Vue实例(Vue作者参考了MVVM模型,并非其创建的)img模型说明M:模型Model-对应data中的数......
  • 最小二乘法求解线性回归模型
    ✅作者简介:热爱科研的算法开发者,Python、Matlab项目可交流、沟通、学习。......