学习threejs，使用对象组合

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.Object3D 三维物体
  • 二、🍀使用对象组合
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用对象组合，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.Object3D 三维物体

Three.js中大部分对象的基类，提供了一系列的属性和方法来对三维空间中的物体进行操纵。可以通过.add( object )方法来将对象进行组合，该方法将对象添加为子对象。
构造函数：
Object3D()，构造器中不带有参数。
属性：
castShadow：对象是否被渲染到阴影贴图中。默认值为false。
children：含有对象的子级的数组。
customDepthMaterial：渲染到深度贴图时此材质要使用的自定义深度材质。 当使用DirectionalLight或SpotLight进行阴影投射时，如果您正在（a）修改顶点着色器中的顶点位置， （b）使用位移贴图，（c）alphaTest中使用alpha贴图，或（d）alphaTest中使用透明纹理， 您必须指定customDepthMaterial以得到合适的阴影。默认值undefined。
customDistanceMaterial：与customDepthMaterial相同，但与PointLight一起使用。默认值为undefined。
frustumCulled：当这个属性被设置的时候，它将在渲染物体之前，检查每一帧的物体是否在摄像机的视锥体中。 否则，即使该物体不可见，它也将在每一帧中被渲染，默认值为true。
id：只读 —— 表示该对象实例ID的唯一数字。
isObject3D：用于测试这个类或者派生类是否为Object3D，默认为true。你不应当对这个属性进行改变，因为它在内部使用，以用于优化。
layers：物体的层级关系。 物体只有和一个正在使用的Camera至少在同一个层时才可见。
matrix：局部变换矩阵。
matrixAutoUpdate：当这个属性设置了之后，它将计算每一帧的位移、旋转（四元变换）和缩放矩阵，并重新计算matrixWorld属性。默认值是Object3D.DefaultMatrixAutoUpdate (true)。
matrixWorld：物体的世界变换。若这个Object3D没有父级，则它将和local transform .matrix（局部变换矩阵）相同。
matrixWorldNeedsUpdate：当这个属性设置了之后，它将计算在那一帧中的matrixWorld，并将这个值重置为false。默认值为false。
modelViewMatrix：这个值传递给着色器，用于计算物体的位置。
name：对象的名称，可选、不必唯一。默认值是一个空字符串。
normalMatrix：这个值传递给着色器，用于计算物体的光照。 它是物体的modelViewMatrix矩阵中，左上角3x3子矩阵的逆的转置矩阵。使用这个特殊矩阵的原因，是只需使用modelViewMatrix就可以得出一个法线（缩放时）的非单位长度或者非垂直的方向（不规则缩放时）。另一方面，modelViewMatrix矩阵中的位移部分和法线的计算无关，因此Matrix3就已经足够了。
onAfterRender：一个可选的回调函数，在Object3D渲染之后直接执行。 使用以下参数来调用此函数：renderer，scene，camera，geometry，material，group。
onBeforeRender：一个可选的回调函数，在Object3D渲染之前直接执行。 使用以下参数来调用此函数：renderer，scene，camera，geometry，material，group。
parent：在scene graph（场景图）中，一个对象的父级对象。 一个对象最多仅能有一个父级对象。
position：表示对象局部位置的Vector3。默认值为(0, 0, 0)。
quaternion：表示对象局部旋转的Quaternion（四元数）。
receiveShadow：材质是否接收阴影。默认值为false。
renderOrder：这个值将使得scene graph（场景图）中默认的的渲染顺序被覆盖， 即使不透明对象和透明对象保持独立顺序。 渲染顺序是由低到高来排序的，默认值为0。
rotation：物体的局部旋转，以弧度来表示。（请参阅Euler angles-欧拉角）
scale：物体的局部缩放。默认值是Vector3( 1, 1, 1 )。
up：这个属性由lookAt方法所使用，例如，来决定结果的朝向。 默认值是Object3D.DefaultUp，即( 0, 1, 0 )。
userData：一个用于存储Object3D自定义数据的对象。 它不应当包含对函数的引用，因为这些函数将不会被克隆。
uuid：该对象实例的UUID。 这是一个自动生成的值，不应当对其进行修改。
visible：可见性。这个值为true时，物体将被渲染。默认值为true。

二、🍀使用对象组合

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入点光源，初始化THREE.PointLight点光源，设置点源位置，设置点光源投影，scene添加点光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，创建THREE.Object3D三维体对象group。创建THREE.SphereGeometry球体对象，添加THREE.MeshLambertMaterial材质，生成球体Mesh对象sphere，group添加sphere对象。创建THREE.BoxGeometry立方体对象，添加THREE.MeshLambertMaterial材质，生成立方体Mesh对象cube，group添加cube对象。创建THREE.PlaneGeometry平面几何体对象，添加THREE.MeshStandardMaterial材质，生成平面几何体Mesh对象plane。scen添加创建的坐标辅助工具、group、plane对象。
  • 6、加入gui控制、controls控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn38(使用对象组合)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>html, body {margin: 0;height: 100%;}canvas {display: block;}
</style>
<body onload="draw()">
</body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.shadowMap.enabled = truerenderer.shadowMap.type = THREE.PCFSoftShadowMapdocument.body.appendChild(renderer.domElement)}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerHeight / window.innerHeight, 0.1, 1000)camera.position.set(0, 40, 50)camera.lookAt(new THREE.Vector3(0, 0, 0))}var scenevar initScene = () => {scene = new THREE.Scene()}var guivar initGui = () => {gui = {sphereX: -5, //球的x轴的位置sphereY: 5, //球的y轴的位置sphereZ: 0, //球的z轴的位置sphereScale: 1, //球的缩放cubeX: 15, //立方体的x轴位置cubeY: 5, //立方体的y轴位置cubeZ: -5, //立方体的z轴的位置cubeScale: 1, //立方体的缩放groupX: 0, //模型组的x轴位置groupY: 0, //模型组的y轴位置groupZ: 0, //模型组的z轴的位置groupScale: 1, //模型组的缩放grouping: false, //是否整个模型组旋转rotate: false, //是否旋转}var datGui = new dat.GUI()//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）//球型的操var sphereFolder = datGui.addFolder("sphere")sphereFolder.add(gui, "sphereX", -30, 30).onChange(function (e) {sphere.position.x = e})sphereFolder.add(gui, "sphereY", -30, 30).onChange(function (e) {sphere.position.y = e})sphereFolder.add(gui, "sphereZ", -30, 30).onChange(function (e) {sphere.position.z = e})sphereFolder.add(gui, "sphereScale", 0, 3).onChange(function (e) {sphere.scale.set(e, e, e)})//立方体的操作var cubeFolder = datGui.addFolder("cube")cubeFolder.add(gui, "cubeX", -30, 30).onChange(function (e) {cube.position.x = e})cubeFolder.add(gui, "cubeY", -30, 30).onChange(function (e) {cube.position.y = e})cubeFolder.add(gui, "cubeZ", -30, 30).onChange(function (e) {cube.position.z = e})cubeFolder.add(gui, "cubeScale", 0, 3).onChange(function (e) {cube.scale.set(e, e, e)})//场景组的操作var groupFolder = datGui.addFolder("group")groupFolder.add(gui, "groupX", -30, 30).onChange(function (e) {group.position.x = e})groupFolder.add(gui, "groupY", -30, 30).onChange(function (e) {group.position.y = e})groupFolder.add(gui, "groupZ", -30, 30).onChange(function (e) {group.position.z = e})groupFolder.add(gui, "groupScale", 0, 3).onChange(function (e) {group.scale.set(e, e, e)})//添加旋转功能datGui.add(gui, "grouping")datGui.add(gui, "rotate")}var lightvar initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.PointLight(0xffffff)light.position.set(15, 50, 10)light.castShadow = truescene.add(light)}var shpere, cube, groupvar initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)group = new THREE.Object3D()scene.add(group)var sphereGeometry = new THREE.SphereGeometry(5, 200, 200)var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa})sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)sphere.position.set(-5, 5, 0)sphere.castShadow = truegroup.add(sphere)var cubeGeometry = new THREE.BoxGeometry(10, 10, 8)var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff})cube = new THREE.Mesh(cubeGeometry, cubeMaterial)cube.position.set(15, 5, -5)cube.castShadow = truegroup.add(cube)var planeGeometry = new THREE.PlaneGeometry(100, 100)var planeMaterial = new THREE.MeshStandardMaterial({color: 0xaaaaaa})var plane = new THREE.Mesh(planeGeometry, planeMaterial)plane.rotation.x = -0.5 * Math.PIplane.receiveShadow = truescene.add(plane)}var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var step = 0.02var render = () => {if (gui.rotate) {if (gui.grouping) {group.rotation.y += step} else {sphere.rotation.y += stepcube.rotation.y += step}}renderer.render(scene, camera)}var animate = () => {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initGui()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/884764.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

企业必备：一合通电子合同

企业必备：一合通电子合同

一合通&#xff0c;让合同签署更简单。加密技术保障安全&#xff0c;随时随地可签。助力企业加速业务流程&#xff0c;提高办公效率。 在数字化转型的浪潮中&#xff0c;企业面临着前所未有的机遇与挑战。特别是在人力资源管理和合同签署方面&#xff0c;传统的纸质合同已经难以…
阅读更多...
二十二、MySQL 8.0 主从复制原理分析与实战

二十二、MySQL 8.0 主从复制原理分析与实战

文章目录 一、复制&#xff08;Replication&#xff09;1、什么是复制2、复制的方式3、复制的数据同步类型3.1、异步复制3.2、半同步复制3.3、设计理念&#xff1a;复制状态机——几乎所有的分布式存储都是这么复制数据的 4、基于binlog位点同步的主从复制原理4.1、异步复制示例…
阅读更多...
AAA 数据库事务隔离级别及死锁

AAA 数据库事务隔离级别及死锁

目录 一、事务的四大特性&#xff08;ACID&#xff09; 1. 原子性(atomicity)&#xff1a; 2. 一致性(consistency)&#xff1a; 3. 隔离性(isolation)&#xff1a; 4. 持久性(durability)&#xff1a; 二、死锁的产生及解决方法 三、事务的四种隔离级别 0 .封锁协议 …
阅读更多...
w~自动驾驶~合集4

w~自动驾驶~合集4

我自己的原文哦~ https://blog.51cto.com/whaosoft/12451789 #基于深度学习的端到端自动驾驶 最新的端到端自动驾驶综述刚刚出炉&#xff0c;话说论文一作卡内基梅隆大学的Apoorv Singh今年产出了七篇综述&#xff0c;都和自动驾驶相关&#xff0c;推荐给大家。就一个字&…
阅读更多...
【6G 需求与定义】ITU（国际电联）对全球6G标准的愿景

【6G 需求与定义】ITU（国际电联）对全球6G标准的愿景

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…
阅读更多...
JVM 类加载器

JVM 类加载器

字节码的结构 魔数u4 cafe babe 版本u4 52 java8 常量池计数器u2 从1开始&#xff0c;0索引留给不需要的情况 常量池 表 #1 -> #计数器-1 类标识符 u2 public final abstrat class annotion interface 之类 类索引u2 名字 父类索引u2 父类名字 接口计数器 u2 接口数…
阅读更多...
Sentieon软件快速入门指南

Sentieon软件快速入门指南

Sentieon软件为完整的纯软件基因变异检测二级分析方案&#xff0c;其分析流程完全忠于BWA、GATK、MuTect2、STAR、Minimap2、Fgbio、picard等金标准的数学模型。在匹配开源流程分析结果的前提下&#xff0c;大幅提升WGS、WES、Panel、UMI、ctDNA、RNA等测序数据的分析效率和检出…
阅读更多...
数字信号处理：自动增益控制（AGC）

数字信号处理：自动增益控制（AGC）

自动增益控制&#xff1a; &#xff1a;自动增益控制&#xff08;Automatic Gain Control, AGC&#xff09;是一种信号处理技术&#xff0c;用于在接收端调整输入信号的增益&#xff08;或放大系数&#xff09;&#xff0c;以保持信号在一个合适的强度范围内&#xff0c;从而防…
阅读更多...
RAG中的代表性上下文压缩方案总结：从RECOMP、CompAct到COCOM

RAG中的代表性上下文压缩方案总结：从RECOMP、CompAct到COCOM

今天是2024年11月5日&#xff0c;星期二&#xff0c;北京&#xff0c;天气晴 昨天有说到RAG中的长文本压缩&#xff0c;现有的上下文压缩方法主要分为基于词汇的压缩&#xff08;硬提示&#xff0c;如LLMLingua和RECOMP&#xff09;和基于嵌入的压缩(软提示&#xff0c;如Gist…
阅读更多...
创新材料科技：铜冷却壁助力高炉节能降耗

创新材料科技：铜冷却壁助力高炉节能降耗

高炉用铜冷却壁是高炉内部的一种构件&#xff0c;通常用于高炉的炉身部分。它的主要功能是在高炉冶炼过程中冷却炉壁&#xff0c;以防止炉壁过热。铜冷却壁通常由铜制成&#xff0c;因为铜具有良好的导热性和耐腐蚀性&#xff0c;能够有效地将热量从高炉内部传导到外部&#xf…
阅读更多...
免费送源码：Java+ssm+MySQL ssm小区车辆信息管理系统的设计与实现 计算机毕业设计原创定制

免费送源码：Java+ssm+MySQL ssm小区车辆信息管理系统的设计与实现 计算机毕业设计原创定制

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…
阅读更多...
云轴科技ZStack在CID大会上分享VF网卡热迁移技术

云轴科技ZStack在CID大会上分享VF网卡热迁移技术

近日&#xff0c;2024中国云计算基础架构开发者大会&#xff08;以下简称CID大会&#xff09;在北京举行。此次大会集中展示了云计算基础架构技术领域最前沿的科创成果&#xff0c;汇聚众多的技术专家和行业先锋&#xff0c;共同探讨云计算基础设施的最新发展和未来趋势。云轴科…
阅读更多...
ES6中数组新增了哪些扩展？

ES6中数组新增了哪些扩展？

ES6中数组新增了哪些扩展&#xff1f; 1、扩展运算符的应⽤ ES6通过扩展元素符 … &#xff0c;好⽐ rest 参数的逆运算&#xff0c;将⼀个数组转为⽤逗号分隔的参数序列 console.log(...[1, 2, 3]) // 1 2 3 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...documen…
阅读更多...
「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件

Slider 和 Progress 是鸿蒙系统中的常用 UI 组件。Slider 控制数值输入&#xff0c;如音量调节&#xff1b;Progress 显示任务的完成状态&#xff0c;如下载进度。本文通过代码示例展示如何使用这些组件&#xff0c;并涵盖 进度条类型介绍、节流优化、状态同步 和 定时器动态更…
阅读更多...
GitHub个人主页美化

GitHub个人主页美化

效果展示 展示为静态效果&#xff0c;动态效果请查看我的GitHub页面 创建GitHub仓库 创建与GitHub用户名相同的仓库&#xff0c;当仓库名与用户名相同时&#xff0c;此仓库会被视作特殊仓库&#xff0c;其README.md&#xff08;自述文件&#xff09;会展示在GitHub个人主页…
阅读更多...
Windows 命令提示符（cmd）中输入 mysql 并收到错误消息“MySQL不是内部或外部命令，也不是可运行的程序或批处理文件？

Windows 命令提示符（cmd）中输入 mysql 并收到错误消息“MySQL不是内部或外部命令，也不是可运行的程序或批处理文件？

目录 背景: 过程&#xff1a; 1.找到MySQL安装的路径 2.编辑环境变量 3.打开cmd&#xff0c;输入mysql --version测试成功 总结: 背景: 很早之前安装了Mysql数据库&#xff0c;想查询一下当前安装的MySQL客户端的版本号&#xff0c;我在命令行界面输入mysql --verion命令回…
阅读更多...
＜项目代码＞YOLOv8 夜间车辆识别＜目标检测＞

＜项目代码＞YOLOv8 夜间车辆识别＜目标检测＞

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…
阅读更多...
太强了！Ollama + MaxKB零代码本地搭建个人知识库AI应用，数据安全，还可以有权限控制！！

太强了！Ollama + MaxKB零代码本地搭建个人知识库AI应用，数据安全，还可以有权限控制！！

零代码本地搭建AI应用 &#x1f4da; 借助开源的&#xff0c;大模型应用不再遥不可及 &#x1f680; 当提到“大模型”和“本地部署”&#xff0c;很多人可能第一反应是&#xff1a;“这是不是只有那些顶尖的技术大牛才能搞定&#xff1f;” 其实&#xff0c;随着开源工具的发…
阅读更多...
Unreal5从入门到精通之如何在指定的显示器上运行UE程序

Unreal5从入门到精通之如何在指定的显示器上运行UE程序

前言 我们有一个设备，是一个带双显示器的机柜，主显示器是一个小竖屏，可以触屏操作，大显示器是一个普通的横屏显示器。我们用这个机柜的原因就是可以摆脱鼠标和键盘，直接使用触屏操作，又可以在大屏观看，非常适合用于教学。 然后我们为这款机柜做了很多个VR项目，包括Uni…
阅读更多...
Docker安装XXL-JOB分布式调度任务

Docker安装XXL-JOB分布式调度任务

一、持久化 1、下载 xxl-job 源码，找到持久化脚本 2、创建 xxl-job 数据库，将上述文件中的脚本在本库执行即可 create database xxl_job charset utf8mb4 collate utf8mb4_general_ci; 二、安装 1、下载 xxl-job 镜像 docker pull xuxueli/xxl-job-admin:2.4.1 2、创建…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023