前端使用three.js来绘制三维图形

最近项目中在地图中显示三维河床的功能,最终实现是用three.js来实现绘制的。这里记录一下整体的调用过程。

一:安装 Three.js

Three.js 是一个强大的 JavaScript 库,用于在网页上创建和显示 3D 图形。如果你在使用一个前端框架,例如 Vue 或 React,你可以使用相应的库,例如 vue-threejs 或 react-three-fiber
作者这里用的vue3的框架
直接上命令,npm安装或者pnpm进行安装。

npm install three

如果是其他也可以标签直接引入three.js的js文件。
地址:http://www.webgl3d.cn/

二:创建基础场景

Three.js 允许你以各种方式创建 3D 场景。下面是一个基本的示例,创建一个场景、一个相机和一个渲染器:

import * as THREE from 'three';  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);

三:添加几何体

Three.js 提供了一系列基础几何体,例如立方体、球体和圆锥体。下面代码是如何创建一个立方体的示例:

const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体几何体,边长为1  
const material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 创建一个绿色基本材质  
const cube = new THREE.Mesh(geometry, material); // 创建一个立方体网格,使用几何体和材质  
scene.add(cube); // 将立方体添加到场景中

四:渲染循环

function animate() {  requestAnimationFrame(animate); // 请求下一帧动画  cube.rotation.x += 0.01; // 旋转立方体  cube.rotation.y += 0.01;  renderer.render(scene, camera); // 渲染场景和相机视图到屏幕上  
}  
animate(); // 开始动画循环

五:处理用户输入

三维场景肯定也要缩放旋转等,下面是一个处理鼠标滚轮事件的示例:

function onDocumentScroll(event) {  camera.position.z -= event.deltaY * 0.01; // 根据鼠标滚轮的滚动方向移动相机位置,模拟缩放效果  
}  
window.addEventListener('wheel', onDocumentScroll); // 添加事件监听器到窗口对象,以便在用户滚动鼠标滚轮时触发事件处理函数

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

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

相关文章

100GB Mellanox InfiniBand 网卡虚拟化技术调研

调研目的 验证 Mellanox InfiniBand 100GB网卡和SR650 Server能兼容 ThinkSystem SR650 Power On (Booting OS or in undetected OS) Machine Type/Model7X05CTO1WW 验证 SR-IOV虚拟话技术在BIOS/Firmware/Kernel/QEMU/Libvirt能被支持 4.18.0-305.19.1.el8_4.x86_64 验证…

Web开发5:第三方扩展与部署

在Web开发中,第三方扩展和部署是提高开发效率和功能扩展的重要手段。第三方扩展可以帮助我们快速集成常用功能和工具,而部署则是将我们的应用程序发布到生产环境中。本文将介绍第三方扩展的重要性、如何选择和使用常见的第三方扩展,并讨论应用…

Java Web(三)--CSS

介绍 为什么需要: 在没有 CSS 之前,想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性,费心费力;CSS 可以让 html 元素(内容) 样式(CSS)分离,提高web 开发的工作效率(针对前端开发),从而…

论文翻译:On Bringing Robots Home

On Bringing Robots Home 关于引入机器人到家庭 文章目录 On Bringing Robots Home关于引入机器人到家庭1 Introduction1 引言2 Technical Components and Method2 技术组件与方法2.1 Hardware Design2.1 硬件设计2.2 Pretraining Dataset – Homes of New York2.2 预训练数据…

微信小程序开发创建component组件,报错WXML file not found解决方案

报错如下: 解决方案: 在组件.json文件加上"styleIsolation": "apply-shared",:

C++ 数论相关题目(欧拉函数)

欧拉函数 给定 n 个正整数 ai ,请你求出每个数的欧拉函数。 欧拉函数的定义 1∼N 中与 N 互质的数的个数被称为欧拉函数,记为 ϕ(N) 。 若在算数基本定理中,Npa11pa22…pamm ,则: ϕ(N) Np1−1p1p2−1p2…pm−1pm 输…

人工智能的未来:机遇与挑战

人工智能的未来:机遇与挑战 0引言 随着科技的飞速发展,人工智能(AI)已经成为了我们生活中不可或缺的一部分。从智能手机、自动驾驶汽车到智能家居系统,人工智能的应用已经深入到各个领域。然而,尽管人工智能为我们带来了诸多便利,但它也引发了一系列关于隐私、安全和道…

【Go语言】常用变量类型的创建

1. 切片slice 在Go语言中,创建切片有两种常见的方式:使用 var 声明空切片和使用 make 函数。 使用 var 声明空切片: var s []int s append(s, 100)这种方式会声明一个空的切片,初始时没有分配底层数组。你可以使用 append 函数…

Spring Security 之 表单登录

表单登录 Spring Security提供了支持通过HTML表单提供用户名和密码。本节详细介绍了Spring Security中表单身份验证的工作原理。 本节将介绍Spring Security中的基于表单的登录工作原理。首先,我们将看到用户如何被重定向到登录表单。 第1步,用户首先对其未经授权的资源(/…

Java复习系列之阶段一:基础能力(1)

1. 面向对象 1.1 基本概念 OOD:代表“面向对象设计”(Object-Oriented Design)是一种编程设计方法学,基于面向对象编程(OOP)的概念和原则,如封装、继承和多态。OOD的核心在于使用对象&#xf…

【Spring】Spring AOP原理

文章目录 前言代理模式静态代理动态代理JDK动态代理CGLib 动态代理 总结 前言 前面我们学习了关于 Spring AOP 的使用,那么今天这篇文章,我们将深入理解 Spring AOP 的原理,也就是 Spring 是如何实现 AOP 的。 Spring AOP 是基于动态代理来…

matlab抽取与插值

什么是抽取? 我们假设一个数字信号 x ( n ) , n 1 , 2 , . . . , N x(n),n1,2,...,N x(n),n1,2,...,N共有 N N N个点,抽取就是每个几个点抽1个点,比如2倍抽取,那么抽取后的信号为 y ( n ) , y ( 1 ) x ( 1 ) , y ( 2 ) x ( 3 …

IO 专题

使用try-with-resources语句块,可以自动关闭InputStream [实践总结] FileIUtils 共通方法最佳实践 [实践总结] java 获取在不同系统下的换行符 [实践总结] StreamIUtils 共通方法最佳实践 斜杠“/“和反斜杠“\“的区别 路径中“./”、“…/”、“/”代表的含义…

你真的会数据结构吗:顺序表

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载,请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主,代码兴国!❤❤❤ 又和大家见面啦!在大家看到这个标题的时候其实就已经发现了:我们的C语言的基础知识大…

【GitHub项目推荐--不错的 Go开源项目】【转载】

开源实时性能分析平台 Pyroscope 是基于 Go 的开源实时性能分析平台,在源码中添加几行代码 pyroscope 就能帮你找出源代码中的性能问题和瓶颈、CPU 利用率过高的原因,调用树展示帮助你理解程序,支持 Go、Python、Ruby 语言。 Pyroscope 可以…

java程序判等问题

注意 equals 和 的区别 对基本类型,比如 int、long,进行判等,只能使用 ,比较的是直接值。因为基本类型的值就是其数值。对引用类型,比如 Integer、Long 和 String,进行判等,需要使用 equals 进…

创业板动量策略年化20%如何优化来的?|多策略并行回测以及策略的超参数优化(代码+数据)

原创文章第449篇,专注“AI量化投资、个人成长与财富自由"。 今天的代码工作,是多策略运行,及策略的超参数优化。 最近思考意义比较多。 包括AI量化的意义——从自动化,数字化到智能化。 赚钱是意义吗?赚钱是好…

智能解决方案——体脂秤芯片CSU18M91

现在的年轻人爱健身,十分关注身材、形体,减肥、健身成了生活日常;中老年人则关注健康指数、有无病症,实时把握身体情况。现在一台体脂称通过测试体重、体脂、BMI、水分等数据并给出相应提示,并且许多人都将体脂检测数据…

go语言网络编程通信案例

一.服务端 package mainimport ("fmt""net" )// 服务端 func main() {fmt.Println("服务器开始监听...")listen, err : net.Listen("tcp", "localhost:8889")if err ! nil {fmt.Println("监听错误:",…

MySQL分组,获取组内最新的10条数据

一、记录 记录一次SQL,最近在项目中遇到了一个相对比较复杂的SQL。 要求依据分组,获取每个分组后的前10条数据。 分组查询最新的数据,应该都做过,但是获取前10条数据,还是没处理过的。 二、处理 2.1 前期数据准备 …