【Three.js基础入门】：创建你的第一个3D场景

news2024/11/25 22:56:51

引言：

Three.js是一种强大的JavaScript库，用于在Web浏览器中创建交互式的3D图形和动画。无需熟练的图形编程经验，你也可以通过Three.js轻松地构建令人惊叹的3D场景。

本文将带你逐步学习如何入门Three.js，从创建一个简单的3D场景开始。

创建步骤 

我们将介绍如何使用Three.js创建你的第一个3D场景。Three.js是一个基于WebGL的JavaScript库，可以帮助我们在Web上创建3D场景和交互式动画。

1.引入Three.js库

首先，我们需要在HTML文件中引入Three.js库。可以通过使用CDN或下载库文件来实现。在这里，我们将使用CDN方式引入Three.js库。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First Three.js Scene</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
    <script>
      // Three.js code here
    </script>
  </body>
</html>

2 创建一个场景对象

接下来，我们需要创建一个场景对象、相机对象和渲染器对象。场景对象是用来存储和管理所有3D对象的容器，相机对象是用来定义我们的视角和观察场景的位置和方向，渲染器对象则是用来渲染场景和相机。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3 添加一个几何体对象

在场景中添加一个几何体对象，我们可以使用Three.js提供的几何体创建函数，并设置材质对象。在这里，我们将使用一个简单的立方体作为我们的几何体对象。

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

4.相机设置

最后，我们需要设置相机的位置并启动渲染器来渲染场景和相机。我们可以通过设置相机的位置来改变我们的视角和观察场景的方向。在这里，我们将相机的位置设置为z轴上5个单位的位置。

camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

5 总结

以上就是创建你的第一个3D场景的基本步骤。完整的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First Three.js Scene</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var geometry = new THREE.BoxGeometry();
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var 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>

通过这个简单的例子，我们可以看到Three.js是如何帮助我们在Web上创建3D场景和交互式动画的。我们可以通过改变几何体对象和材质对象的属性，以及相机的位置和方向，来创建更加复杂和丰富的3D场景。

示例

简单星空

下面是一个简单的Three.js星空示例，我们将创建一个星空背景，展示闪烁的星星。

<!DOCTYPE html>
<html>
<head>
    <title>Three.js星空示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建透视相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建WebGL渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 将渲染器添加到HTML页面中
        document.body.appendChild(renderer.domElement);

        // 创建星星材质
        var starMaterial = new THREE.PointsMaterial({
            color: 0xffffff,
            size: 0.1
        });

        // 创建星星几何体
        var starGeometry = new THREE.BufferGeometry();
        var starVertices = [];
        for (var i = 0; i < 1000; i++) {
            var x = (Math.random() - 0.5) * 2000;
            var y = (Math.random() - 0.5) * 2000;
            var z = (Math.random() - 0.5) * 2000;
            starVertices.push(x, y, z);
        }
        starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));

        // 创建星星点云对象
        var stars = new THREE.Points(starGeometry, starMaterial);

        // 将星星点云对象添加到场景中
        scene.add(stars);

        // 将相机位置设为z轴向后200个单位，使星空在视野内
        camera.position.z = 200;

        // 添加动画效果，使星星闪烁
        function animate() {
            requestAnimationFrame(animate);

            // 让星星随机闪烁
            stars.rotation.x += 0.001;
            stars.rotation.y += 0.001;

            // 渲染场景
            renderer.render(scene, camera);
        }

        // 调用动画函数
        animate();
    </script>
</body>
</html>

彩色星空

<!DOCTYPE html>
<html>
<head>
    <title>五彩宇宙星空 - Three.js示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建透视相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建WebGL渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 将渲染器添加到HTML页面中
        document.body.appendChild(renderer.domElement);

        // 创建粒子材质
        var particleMaterial = new THREE.PointsMaterial({
            size: 2,
            vertexColors: true, // 开启顶点颜色，使每个粒子有不同的颜色
            transparent: true,
            opacity: 0.7
        });

        // 创建粒子几何体
        var particleGeometry = new THREE.BufferGeometry();
        var particleVertices = [];
        var colors = [];
        for (var i = 0; i < 1000; i++) {
            var x = (Math.random() - 0.5) * 2000;
            var y = (Math.random() - 0.5) * 2000;
            var z = (Math.random() - 0.5) * 2000;
            particleVertices.push(x, y, z);

            // 为每个粒子随机生成一个五颜六色的颜色
            var color = new THREE.Color();
            color.setRGB(Math.random(), Math.random(), Math.random());
            colors.push(color.r, color.g, color.b);
        }
        particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(particleVertices, 3));
        particleGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

        // 创建粒子系统对象
        var particles = new THREE.Points(particleGeometry, particleMaterial);

        // 将粒子系统对象添加到场景中
        scene.add(particles);

        // 将相机位置设为z轴向后1000个单位，使星空在视野内
        camera.position.z = 1000;

        // 添加动画效果，让粒子随机闪烁
        function animate() {
            requestAnimationFrame(animate);

            // 使粒子随机闪烁
            particles.rotation.x += 0.001;
            particles.rotation.y += 0.001;

            // 渲染场景
            renderer.render(scene, camera);
        }

        // 调用动画函数
        animate();
    </script>
</body>
</html>

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

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

相关文章

认识spring项目的创建 和 从spring中进行Bean对象的存取

认识spring项目的创建 和 从spring中进行Bean对象的存取

前言 本篇简单介绍如何创建spring项目&#xff0c;如何存储到spring容器中&#xff0c;如何从容器中获取Bean对象&#xff0c;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录 前言1. 创建spring项目2. 将Bean对象存…
阅读更多...
信息与通信工程学科面试准备——通信原理｜信息与通信工程方向保研面试题集｜BUAA

信息与通信工程学科面试准备——通信原理｜信息与通信工程方向保研面试题集｜BUAA

注意&#xff1a; 以下内容&#xff0c;基本上都是二系通信方向保研复试被提问过的内容。如果是专硕&#xff0c;那么电路分析、电磁场、DSP等方面的问题会更多&#xff0c;这里主要针对通信学硕。以下内容不能保证全覆盖&#xff1a;有的同学被问到什么是范德蒙行列式&#x…
阅读更多...
[SQL挖掘机] - SQL挖掘机系列整体规划

[SQL挖掘机] - SQL挖掘机系列整体规划

这里直接进行相关操作, 在Linux或者Windows系统如何安装MySQL, 可以参考博客平台其他大佬的分享. 还有就是, 这里相当于是从数据库–>数据表–>各种约束–>数据类型–>数据表的增删改等操作, 最后就是主要的数据表的查询操作了, 其他的内容根据自己的学习进程进行…
阅读更多...
shell脚本中getopts的使用

shell脚本中getopts的使用

在shell中&#xff0c;getopts用于解析命令选项和参数。getopts是Bash shell的内置命令&#xff0c;不支持长选项&#xff0c;仅解析短选项&#xff0c;即一个破折号("-")和一个字母或数字&#xff0c;如-1&#xff0c;-e, -E等。 getopts格式如下&#xff1a;…
阅读更多...
ATF(TF-A)之sonarlint静态代码分析实战

ATF(TF-A)之sonarlint静态代码分析实战

ATF(TF-A)/OPTEE之静态代码分析汇总 一、ATF源码下载及分析 对ATF实施soanrlint静态代码扫描之前，先到官方网站下载源码。官方网站位于github，网址 GitHub - ARM-software/arm-trusted-firmware: Read-only mirror of Trusted Firmware-A。 各发布版本及对应的时间节点如下…
阅读更多...
算法图解注疏（待续）

算法图解注疏（待续）

目录 算法简介二分查找简单查找更佳的查找方式二分查找的几种模板模板1模板2模板3 运行时间 大O表示法大O表示法指出了最糟情况下的运行时间一些常见的大O运行时间 O(n!)旅行商问题 选择排序内存的工作原理数组和链表选择排序 递归基线条件和递归条件栈递归调用栈 快速排序分而…
阅读更多...
Istio Pilot源码学习（二）：ServiceController服务发现

Istio Pilot源码学习（二）：ServiceController服务发现

本文基于Istio 1.18.0版本进行源码学习 4、服务发现&#xff1a;ServiceController ServiceController是服务发现的核心模块&#xff0c;主要功能是监听底层平台的服务注册中心&#xff0c;将平台服务模型转换成Istio服务模型并缓存&#xff1b;同时根据服务的变化&#xff0c…
阅读更多...
MongoDB 的日常使用

MongoDB 的日常使用

一、简介 1、 常见的数据库分类 RDBMS&#xff08;关系型数据库&#xff09;&#xff1a;常见的关系型数据库有 Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL&#xff1b; NoSQL&#xff08;非关系型数据库&#xff09;&#xff1a;常见的非关系型数据库有 …
阅读更多...
算法笔记（java）——回溯篇

算法笔记（java）——回溯篇

回溯算法解决问题最有规律性&#xff0c;借用一下卡哥的图&#xff1a; 只要遇到上述问题就可以考虑使用回溯&#xff0c;回溯法的效率并不高&#xff0c;是一种暴力解法&#xff0c;其代码是嵌套在for循环中的递归&#xff0c;用来解决暴力算法解决不了的问题&#xff0c;即…
阅读更多...
【机器学习】模型常用评估指标

【机器学习】模型常用评估指标

L0 范数、L1 范数、L2 范数、余弦距离 向量的范数可以简单形象理解为向量的长度&#xff0c;或者向量到零点的距离&#xff0c;亦或是相应两个点之间的距离。因此范数通常会对应一个距离概念。 L0 范数 L0 范数表示向量中非零元素的个数&#xff1a; ∣ ∣ x ∣ ∣ 0 # ( i…
阅读更多...
elasticsearch IK分词器

elasticsearch IK分词器

说明&#xff1a;es默认的分词器对中文的识别不是特别好&#xff0c;一段话的分词是一个一个汉字&#xff0c;这显然没有达到想要的结果。 可以安装IK分词器&#xff0c;兼容中文的分词&#xff1b; IK分词器 安装 安装IK分词器&#xff0c;例如elasticsearch的容器名为es&a…
阅读更多...
探索Java并发编程利器：LockSupport，一种高效的线程阻塞与唤醒机制

探索Java并发编程利器：LockSupport，一种高效的线程阻塞与唤醒机制

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、用法四、原理五、线程等待和唤醒的方法5.1 Lo…
阅读更多...
Microsoft Edge 浏览器的Bing Chat

Microsoft Edge 浏览器的Bing Chat

微软公司持续发力&#xff0c;推出的产品 Bing Chat 与 ChatGPT 之间的竞争愈发激烈。如今&#xff0c;微软不仅不断更新 Edge 浏览器&#xff0c;还将 Bing Chat 内置在边栏中&#xff0c;方便用户快速访问。这一举措不禁让人想起&#xff0c;Edge 浏览器如今已经是一款名副其…
阅读更多...
Maven项目的两种打包方式-spring-boot-mavne-plugin/maven-jar-plugin

Maven项目的两种打包方式-spring-boot-mavne-plugin/maven-jar-plugin

Maven项目的两种打包方式-spring-boot-mavne-plugin/maven-jar-plugin 1. 前言Maven的两种打包方式 2. 流程图3. spring-boor-maven-plugin打包4. maven-jar-plugin/maven-dependency-plugin打包 1. 前言 Maven的两种打包方式 spring-boot-maven-plugin springboot默认打包方…
阅读更多...
新星计划联系人列表管理后台（一）-- 搭建项目开发环境

新星计划联系人列表管理后台（一）-- 搭建项目开发环境

前言&#xff1a;对于前端的内容目前已经发现了很多大佬写的高质量文章&#xff0c;我这里就没必要再重复去造轮子了。接下来我会记录一下我从零到整完成此项目的过程&#xff0c;类似于日记&#xff0c;我会把我开发的步骤、过程中遇到的问题、如何解决此问题的思路、以及get到…
阅读更多...
FPGA+EMMC 8通道存储小板

FPGA+EMMC 8通道存储小板

FPGA 采用XILINX公司A7100作为主芯片 AD采用AD7606及一款陀螺仪传感器&#xff0c;可以实时存储到EMMC&#xff0c;系统分为采集模式及回放模式 通过232接口对工作模式进行配置&#xff0c;采样率可以动态配置 回放采用W5100S通过TCP协议进行回放数据
阅读更多...
福格行为模型

福格行为模型

福格行为模型 福格行为模型也被称为“上瘾模型”&#xff0c;在工作和生活中应用非常的广泛。在工作中&#xff1a;产品设计、用户运营策略、活动设计、广告设计、游戏设计等等&#xff1b;在生活中&#xff1a;学习习惯培养、持续的健身、减肥计划等等。这些事通常大家以为是…
阅读更多...
【N32L40X】学习笔记10-外部触发方式计数

【N32L40X】学习笔记10-外部触发方式计数

定时器采用外部触发方式计数 也就是外部时钟源模式2 此模式由 TIMx_SMCTRL .EXCEN 选择等于 1。计数器可以在外部触发输入 ETR 的每个上升沿或下降沿 计数。 极性选择分频选择过滤选择选择外部时钟ETR模式 bsp_time_counter_ETR.h #ifndef _BSP_TIME_COUNTER_ETR_H_ #defi…
阅读更多...
STM32(HAL库）驱动AD8232心率传感器

STM32(HAL库）驱动AD8232心率传感器

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 ADC外设配置 2.3 串口外设配置 2.4 GPIO配置 2.5 项目生成 3、KEIL端程序整合 3.1 串口重映射 3.2 ADC数据采集 3.3 主函数代码整合 4 硬件连接 5 效果展示 1、简介 本文通过STM32…
阅读更多...
【车载性能优化】将线程进程运行在期望的CPU核心上

【车载性能优化】将线程进程运行在期望的CPU核心上

车载Android应用开发中&#xff0c;可能会出现一种奇葩的要求&#xff1a;与用户交互时应用需要全速运行&#xff0c;保证交互的流畅性&#xff0c;但是如果应用进入后台就需要怠速运行&#xff0c;让出更多的资源保证系统或前台应用的流畅度。那么基于这种需求&#xff0c;我们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023