Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】

在Three.js基础入门介绍——Three.js学习二【极简入门】中介绍了如何搭建Three.js开发环境并实现一个包含旋转立方体的场景示例,以此为前提,本篇将引进一个控制器的概念并使用”轨道控制器”(OrbitControls)来达到从不同方向展示场景内容的效果。

Three.js的控制器

three.js的核心专注于3D引擎最重要的组件。其它很多有用的组件 —— 如控制器(control)、加载器(loader)以及后期处理效果(post-processing effect) —— 是 examples/jsm 目录的一部分。它们被称为“示例”,虽然你可以直接将它们拿来使用,但它们也需要重新混合以及定制。这些组件和 three.js 的核心保持同步,而 npm 上类似的第三方包则由不同的作者进行维护,可能不是最新的。

如何使用控制器
我的项目文件结构,代码在index里,three.js-master是从官网下载的整包文件
在这里插入图片描述
这里有一个引用组件模块需要注意的兼容性问题

CommonJS 导入
虽然现代的 JavaScript 打包器已经默认支持ES module,然而也有一些较旧的构建工具并不支持。对于这些情况,你或许可以对这些打包器进行配置,让它们能够理解 ES module 。例如,Browserify 仅需 babelify插件。

Import maps
和从静态主机或CDN来进行安装的方式相比,从npm安装时,导入的路径有所不同。我们意识到,对于使用两种不同方式的用户群体来说,这是一个人体工程学问题。使用构建工具与打包器的开发者更喜欢仅使用单独的包说明符(如’three’)而非相对路径,而examples/目录中的文件使用相对于 three.module.js 的引用并不符合这一期望。对于不使用构建工具的人(用于快速原型、学习或个人参考)来说,或许也会很反感这些相对导入。这些相对导入需要确定目录结构,并且比全局 THREE.* 命名空间更不宽容。
我们希望在 import maps 广泛可用时,能够移除这些相对路径,将它们替换为单独的包说明符,‘three’。这更加符合构建工具对npm包的期望,且使得两种用户群体在导入文件时能够编写完全相同的代码。对于更偏向于避免使用构建工具的用户来说,一个简单的 JSON 映射即可将所有的导入都定向到一个 CDN 或是静态文件夹。通过实验,目前你可以通过一个 import map 的 polyfill,来尝试更简洁的导入,如 import map example 示例中所示。

简而言之:
其一:在script标签中,默认不能使用module形式,不能使用import导入文件,我们需要在script标签上添加加 type=module 属性;
其二:需要用 import maps 。
操作:将

<script src="./three.js-master/build/three.js"></script>

改为

<script type="importmap">{"imports": {"three": "./three.js-master/build/three.module.js"}}
</script>
<script type="module">import * as THREE from "three";
</script>

导入轨道控制器OrbitControls

import { OrbitControls } from "./three.js-master/examples/jsm/controls/OrbitControls.js";

使用轨道控制器OrbitControls ,注意传参要求,需要先创建了需要的内容再传才行,反之则则会报错:

Uncaught ReferenceError: Cannot access ‘camera’ before initialization
Uncaught ReferenceError: Cannot access ‘renderer’ before initialization

OrbitControls 官网文档链接:https://threejs.org/docs/index.html?q=Controls#examples/zh/controls/OrbitControls

const controls = new OrbitControls(camera,renderer.domElement);//本文示例

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>My first three.js app</title><style>body { margin: 0; }</style></head><body><script type="importmap">{"imports": {"three": "./three.js-master/build/three.module.js"}}</script><script type="module">import * as THREE from "three";import { OrbitControls } from "./three.js-master/examples/jsm/controls/OrbitControls.js";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 );const controls = new OrbitControls(camera,renderer.domElement);//创建控制器const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );const cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;function animate() {requestAnimationFrame( animate );cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render( scene, camera );};animate();</script></body>
</html>

效果:可以旋转或者拖动视角
在这里插入图片描述

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

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

相关文章

【Java基础系列】equals方法使用与总结

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

网络IP地址如何更改?怎么使用动态代理IP提高网速?

网络IP地址更改以及使用动态代理IP提高网速的步骤如下&#xff1a; 一、更改IP地址 1. 打开浏览器&#xff0c;输入路由器登陆地址并登陆路由器后台管理界面。 2. 找到“高级设置”或“无线设置”或“VPN设置”一栏&#xff0c;点击“断开”&#xff0c;即可断开网络&#xff0…

RDD键值对的应用——一个简单的例子对比用与不用键值对的差别

有关RDD编程&#xff08;Python版&#xff09;的基础操作可参考&#xff1a;spark&#xff1a;RDD编程&#xff08;Python版&#xff09; 初看题目 先来看一道比较简单的用 pyspark交互式环境的编程题目&#xff1a; 该数据集包含了某大学计算机系的成绩&#xff0c;数据格…

CamSim相机模拟器:极大加速图像处理开发与验证过程

随着图像处理技术的不断发展&#xff0c;相机模拟在图像处理开发和验证中扮演着越来越重要的角色。相机模拟能够模拟真实相机的成像过程&#xff0c;提供高质量的图像输入&#xff0c;使开发人员能够更好地评估和调整图像处理算法。本文将探讨如何通过相机模拟来加速图像处理的…

Docker的基础使用

Docker的基础使用 Docker 是一个开放平台&#xff0c;用于开发、运输和运行应用程序。Docker 允许你将应用程序与基础架构分离&#xff0c;从而可以像管理应用程序一样快速交付软件。以下是 Docker 的详细使用指南&#xff1a; 安装 Docker 下载 Docker : 根据你的操作系统…

vue实现H5拖拽可视化编辑器

一款专注可视化平台工具&#xff0c;功能强大&#xff0c;高可扩展的HTML5可视化编辑器&#xff0c;致力于提供一套简单易用、高效创新、无限可能的解决方案。技术栈采用vue和typescript开发, 专注研发创新工具。 <template><div:style"style":class"…

MYSQL数据库的安全管理-数据库实验六

Mysql数据库实验及练习题相关 MySQL 数据库和表的管理-数据库实验一 MySQL连接查询、索引、视图-数据库实验二、实验三 MySQL约束、触发器-数据库实验四 MYSQL存储过程和存储函数-数据库实验五 MySQL批量随机生成name、TEL、idNumber MYSQL数据库的安全管理-数据库实验六 MYSQ…

msvcr120.dll丢失的解决方法

msvcr120.dll丢失的解决方法 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我将为大家分享一个常见但可能令人头痛的问题的解决方法——“msvcr12…

<JavaEE> TCP 的通信机制(二) -- 连接管理(三次握手和四次挥手)

目录 TCP的通信机制的核心特性 三、连接管理 1&#xff09;什么是连接管理&#xff1f; 2&#xff09;“三次握手”建立连接 1> 什么是“三次握手”&#xff1f; 2> “三次握手”的核心作用是什么&#xff1f; 3&#xff09;“四次挥手”断开连接 1> 什么是“…

【JavaWeb】函数式接口(学习笔记)

一、函数式接口概述 定义&#xff1a;有且只有一个抽象方法 注解&#xff1a;FunctionalInterface 函数式接口作为参数&#xff1a;Lambda表达式作为参数传递 函数式接口作为返回值&#xff1a;Lambda表达式作为结果返回 二、Supplier接口 Supplier<T>&#xff1a;…

Ubuntu安装WordPress并使用Nginx作为Web服务器

在Ubuntu上安装和配置WordPress并使用Nginx作为Web服务器&#xff0c;以下是一个简单的操作流程&#xff1a; 步骤 1: 安装Nginx bashCopy code sudo apt update sudo apt install nginx 启动Nginx并设置开机自启&#xff1a; sudo systemctl start nginx sudo systemctl e…

第2课 用FFmpeg读取rtmp流并显示视频

这节课我们开始利用ffmpeg和opencv来实现一个rtmp播放器。播放器的最基本功能其实就两个:显示画面和播放声音。在实现这两个功能前&#xff0c;我们需要先用ffmpeg连接到rtmp服务器&#xff0c;当然也可以打开一个文件。 1.压缩备份上节课工程文件夹为demo.rar&#xff0c;并修…

版权登记是怎么个流程?都需要准备些什么材料?

版权登记是指按照规定的程序和条件&#xff0c;向版权局或相关机构提交申请&#xff0c;对作品进行登记和记录的过程。版权登记是一种法律手段&#xff0c;旨在保护创作者的权益和作品的完整性&#xff0c;防止盗版和侵权行为。 版权登记的申请范围包括但不限于文字作品、口述…

ZETA落地合肥、宜城南方水泥,纵行科技携手中才邦业助力水泥企业数智化管理

近日&#xff0c;合肥南方水泥、宜城南方水泥落地ZETA预测性维护方案&#xff0c;通过在水泥厂内搭建ZETA网络&#xff0c;并在B类及C类主辅机设备上安装ZETA系列端智能传感器&#xff0c;进行数据采集和监测设备运行状态、以及早期故障警报和诊断&#xff0c;实现水泥生产设备…

web期末大作业--网页设计 HTML+CSS+JS(附源码)

目录 一&#xff0c;作品介绍 二.运用知识 三.作品详情 四.部分作品效果图 我的&#xff1a;​编辑 五.部分源代码 六.文件目录 七.源码 一&#xff0c;作品介绍 作品介绍&#xff1a;该作品是一个是一个关于影视作品的网页&#xff0c;一共有五个页面&#xff0c;主页&a…

文件IO

文章目录 文章目录 前言 一 . 文件 文件路径 文件类型 Java中操作文件 File 概述 属性 构造方法 方法 createNewFile mkdir 二 . 文件内容的读写 - IO InputStream 概述 FileInputStream 概述 利用 Scanner 进行字符读取 OutputStream 概述 PrintWriter封装O…

gin框架使用系列之五——表单校验

系列目录 《gin框架使用系列之一——快速启动和url分组》《gin框架使用系列之二——uri占位符和占位符变量的获取》《gin框架使用系列之三——获取表单数据》《gin框架使用系列之四——json和protobuf的渲染》 一 、表单验证的基本理论 在第三篇中&#xff0c;我们介绍了如何…

SpringIOC-注解式

IOC操作Bean管理(基于注解方式) 1.什么是注解(1)注解是代码的特殊标记, 格式 注解名(属性名值,属性2值2)(2)使用注解,注解作用在 类上面,方法上,属性上(3)使用注解目的: 简化xml配置2.spring针对bean 管理中创建对象提供注解(1) Component (2) Service(3) Controller(4) Repo…

Flink1.17实战教程(第四篇:处理函数)

系列文章目录 Flink1.17实战教程&#xff08;第一篇&#xff1a;概念、部署、架构&#xff09; Flink1.17实战教程&#xff08;第二篇&#xff1a;DataStream API&#xff09; Flink1.17实战教程&#xff08;第三篇&#xff1a;时间和窗口&#xff09; Flink1.17实战教程&…

Hadoop集群找不到native-hadoop

1.问题描述 hive 运行中的问题&#xff0c;需要把把native复制进去 /usr/lib 2023-02-15 19:59:42,165 WARN scheduler.TaskSetManager: Lost task 11.0 in stage 1.0 (TID 3, common4, executor 2): java.lang.RuntimeException: Hive Runtime Error while closing operators…