百度360必应搜狗淘宝本站头条
docker systemdzabbix微信报警脚本loadjsqt5.5pagination.js
当前位置：网站首页 > 技术教程 > 正文

详细介绍一下Three.js的用法? three.js bim

suiw9 2024-11-09 14:50 24 浏览 0 评论

Three.js是一个用于创建和显示3D图形的JavaScript库，基于WebGL构建，可以在现代浏览器中高效地渲染复杂的3D场景，如下图所示。

下面我们就来详细介绍一下Three.js的基本步骤和常用功能。

初始化Three.js场景

要使用Three.js首先就需要了解如何创建一个场景、一个相机和一个渲染器。

安装和引入

可以通过CDN或npm安装并引入Three.js，如下所示

<!-- CDN 引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

通过npm安装

# 使用 npm 安装
npm install three

接下来就是引入相应的模块，如下所示。

// 使用 ES6 模块导入
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中提供了多种几何体，如BoxGeometry、SphereGeometry等，如下所示，代码中引入相关操作。

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();

添加光源

Three.js 提供了多种光源，如点光源、环境光等。光源影响着场景中物体的显示方式，我们可以通过如下的方式来设置。

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 创建环境光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

添加控件

Three.js 提供了 OrbitControls 来实现相机的交互控制。可以通过如下的方式来实现交互操作。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

加载纹理和模型

我们可以通过了如下的方式来添加纹理。

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
const materialWithTexture = new THREE.MeshBasicMaterial({ map: texture });

然后可以通过下面这种方式来进行模型的添加。

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('path/to/model.glb', function (gltf) {
    scene.add(gltf.scene);
}, undefined, function (error) {
    console.error(error);
});

这里需要注意，这个模型是通过一些3D建模工具来完成的。

处理窗口大小调整

在3D场景中，我们还可以实现对于窗口大小的调整，也就是说在窗口变化是图像也会跟着一起变化，如下所示。

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

完整代码示例

下面笔者就给出整个的项目的完整代码示例。这个示例中我们创建了一个可以旋转的正方体。详细代码如下所示。

<!DOCTYPE html>
<html>
<head>
    <title>Three.js Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建几何体和材质
    const geometry = new THREE.BoxGeometry();
    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();

    // 处理窗口大小调整
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
</script>
</body>
</html>

总结

想要深入学习Three.js操作，我们可以在Three官网上或者是相关的仓库中找到示例代码来提升自己的能力。通过各种示例代码的学习，我们可以实现更加复杂场景的应用交互。

相关推荐

5款Syslog集中系统日志常用工具对比推荐

一、为何要集中管理Syslog？Syslog由Linux/Unix系统及其他网络设备生成，广泛分布于整个网络。因其包含关键信息，可用于识别网络中的恶意活动，所以必须对其进行持续监控。将Sys...

跨平台、多数据库支持的开源数据库管理工具——DBeaver

简介今天给大家推荐一个开源的数据库管理工具——DBeaver。它支持多种数据库系统，包括Mysql、Oracle、PostgreSQL、SLQLite、SQLServer等。DBeaver的界面友好...

强烈推荐!数据库管理工具:Navicat Premium 16.3.2 (64位)

NavicatPremium，一款集数据迁移、数据库管理、SQL/查询编辑、智能设计、高效协作于一体的全能数据库开发工具。无论你是MySQL、MariaDB、MongoDB、SQLServer、O...

3 年 Java 程序员还玩不转 MongoDB，网友:失望

一、什么场景使用MongoDB？...

拯救MongoDB管理员的GUI工具大赏:从菜鸟到极客的生存指南

作为一名在NoSQL丛林中披荆斩棘的数据猎人，没有比GUI工具更称手的瑞士军刀了。本文将带你围观五款主流MongoDB管理神器的特性与暗坑，附赠精准到扎心的吐槽指南一、MongoDBCompass：...

mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端?

前言最近在做neo4j相关的同步处理，因为产线的可视化工具短暂不可用，发现写起来各种脚本非常麻烦。...

solidworks使用心得，纯干货!建议大家收藏

SolidWorks常见问题...

统一规约-关乎数字化的真正实现（规范统一性）

尽管数字化转型的浪潮如此深入人心，但是，对于OPCUA和TSN的了解却又甚少，这难免让人质疑其可实现性，因为，如果缺乏统一的语义互操作规范，以及更为具有广泛适用的网络与通信，则数字化实际上几乎难以具...

Elasticsearch节点角色配置详解(Node)

本篇文章将介绍如下内容：节点角色简介...

产前母婴用品分享 篇一:我的母婴购物清单及单品推荐

作者：DaisyH8746在张大妈上已经混迹很久了，有事没事看看“什么值得买”已渐渐成了一种生活习惯，然而却从来没有想过自己要写篇文章发布上来，直到由于我产前功课做得“太过认真”（认真到都有点过了，...

比任何人都光彩照人的假期!水润、紧致的肌肤护理程序

图片来源：谜尚愉快的假期临近了。身心振奋的休假季节。但是不能因为这种心情而失去珍贵的东西，那就是皮肤健康。炙热的阳光和强烈的紫外线是使我们皮肤老化的主犯。因此，如果怀着快乐的心情对皮肤置之不理，就会使...

Arm发布Armv9边缘AI计算平台，支持运行超10亿参数端侧AI模型

中关村在线2月27日消息，Arm正式发布Armv9边缘人工智能（AI）计算平台。据悉，该平台以全新的ArmCortex-A320CPU和领先的边缘AI加速器ArmEthos-U85NPU为核心...

柔性——面向大规模定制生产的数字化实现的基本特征

大规模定制生产模式的核心是柔性，尤其是体现在其对定制的要求方面。既然是定制，并且是大规模的定制，对于制造系统的柔性以及借助于数字化手段实现的柔性，就提出了更高的要求。面向大规模定制生产的数字化业务管控...

创建PLC内部标准——企业前进的道路

作者：FrankBurger...

标准化编程之 ----------- 西门子LPMLV30测试总结

PackML乃是由OMAC开发且被ISA所采用的自动化标准TR88.00.02，能够更为便捷地传输与检索一致的机器数据。PackML的主要宗旨在于于整个工厂车间倡导通用的“外观和感觉”，...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.