Three.js之几何体、高光材质、渲染器设置、gui

参考资料

  • 阵列立方体和相机适配体验
  • Threejs常见几何体简介
  • …
  • gui.js库(可视化改变三维场景)

知识点

注：基于Three.jsv0.155.0

  • 长方体：oxGeometry
  • 球体：SphereGeometry
  • 圆柱：CylinderGeometry
  • 矩形平面：PlaneGeometry
  • 圆形平面：CircleGeometry
  • 高光网格材质：MeshPhongMaterial（shininess、specular）
  • WebGL渲染器设置：antialias 、setPixelRatio、setClearColor
  • gui.js库：add、addColor、addFolder、name、step、onChange
  • 关键词搜索examples：Find in Folder

代码实现

阵列立方体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// 几何体const geometry = new THREE.BoxGeometry(100, 100, 100);// 材质 // MeshBasicMaterial：不受光// MeshLambertMaterial：受光const material = new THREE.MeshLambertMaterial({color: 0x00ffff, //设置材质颜色transparent: true,//开启透明opacity: 0.8,//设置透明度});for (let i = 0; i < 10; i++) {for (let j = 0; j < 10; j++) {const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh// 在XOZ平面上分布mesh.position.set(i * 200, 0, j * 200);scene.add(mesh); //网格模型添加到场景中  }}// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera = new THREE.PerspectiveCamera(60, width / height, 1, 8000);// camera.position.set(292, 223, 185);//在原来相机位置基础上拉远，可以观察到更大的范围camera.position.set(2000, 2000, 2000);camera.lookAt(1000, 0, 1000);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.target.set(1000, 0, 1000);controls.update();controls.addEventListener('change', () => {renderer.render(scene, camera);});</script>
</html>

常见几何体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// 几何体：// 正方体// const geometry = new THREE.BoxGeometry(100, 100, 100);// 球体// const geometry = new THREE.SphereGeometry(100);// 圆锥体// const geometry = new THREE.CylinderGeometry(50, 100, 100);// 正方形平面// const geometry = new THREE.PlaneGeometry(100, 100);// 圆形平面const geometry = new THREE.CircleGeometry(100);// 材质const material = new THREE.MeshLambertMaterial({color: 0x00ff00,transparent: true,opacity: 0.8,side: THREE.DoubleSide, //两面可见});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {renderer.render(scene, camera);});</script>
</html>

高光网格材质

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// 几何体：// 球体// const geometry = new THREE.BoxGeometry(100, 100, 100);const geometry = new THREE.SphereGeometry(100);// 材质const material = new THREE.MeshPhongMaterial({color: 0x00ff00,shininess: 80, //高光部分的亮度，默认30specular: 0x444444, //高光部分的颜色});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {renderer.render(scene, camera);});</script>
</html>

WebGL渲染器设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// 几何体：// 球体const geometry = new THREE.BoxGeometry(100, 100, 100);// 材质const material = new THREE.MeshLambertMaterial({color: 0x00ff00, //设置材质颜色transparent: true,//开启透明opacity: 0.8,//设置透明度});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer({antialias: true});// 设置设备比，固定写法renderer.setPixelRatio(window.devicePixelRatio);// 设置背景色renderer.setClearColor(0x444444, 1);// 设置渲染器的尺寸renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {renderer.render(scene, camera);});</script>
</html>

gui.js库

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { GUI } from 'three/addons/libs/lil-gui.module.min.js';const width = 800const height = 500const gui = new GUI();gui.domElement.style.right = '0px';gui.domElement.style.width = '300px';// 场景const scene = new THREE.Scene();// 几何体：// 球体const geometry = new THREE.BoxGeometry(100, 100, 100);// 材质const material = new THREE.MeshLambertMaterial({color: 0x00ff00, //设置材质颜色transparent: true,//开启透明opacity: 0.8,//设置透明度});console.log('🚀 ~ file: 1.19gui.js库(可视化改变三维场景).html:42 ~ material:', material)// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 点光源const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(2000, 2000, 2000 );scene.add( pointLight );// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer({antialias: true});// 设置设备比，固定写法renderer.setPixelRatio(window.devicePixelRatio);// 设置背景色renderer.setClearColor(0x444444, 1);// 设置渲染器的尺寸renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {renderer.render(scene, camera);});var guiObj = {color: '0xffffff',obj: {左: -100,中: 0,右: 200},bool: false,}// 动画渲染// 跟踪时间function render() {requestAnimationFrame(render);guiObj.bool && (mesh.rotation.y += 0.01);renderer.render(scene, camera);}render();const ambientFoloer = gui.addFolder('环境光');ambientFoloer.close();// gui动态改变光的强度ambientFoloer.add(ambientLight, 'intensity', 0, 2).name('环境光强度');const materialFoloer = gui.addFolder('材料');materialFoloer.close();// gui动态改变材料颜色materialFoloer.addColor(guiObj, 'color').name('材料颜色').onChange(function (value) {  mesh.material.color.set(value)});const meshFoloer = gui.addFolder('物体');meshFoloer.close();// gui动态改变材料颜色meshFoloer.add(mesh.position, 'y', [-100, 0 ,200]).name('物体y轴');// gui动态改变材料颜色meshFoloer.add(mesh.position, 'x',  {左: -100,中: 0,右: 200}).name('物体x轴');meshFoloer.add(mesh.position, 'x', 0, 100).step(2);meshFoloer.add(mesh.position, 'y', 0, 100);meshFoloer.add(mesh.position, 'z', 0, 100);meshFoloer.add(guiObj, 'bool').name('是否旋转');</script>
</html>

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

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

相关文章

C# 观察者模式

C# 观察者模式

一、概述 观察者模式是一种常用的设计模式&#xff0c;它属于行为型模式。在C#中&#xff0c;观察者模式通过定义一种一对多的依赖关系&#xff0c;使得当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会得到通知并自动更新。这种模式可以实现松耦合&#xff0c;…
阅读更多...
Ribbon负载均衡

Ribbon负载均衡

Ribbon与Eureka的关系 Eureka的服务拉取与负载均衡都是由Ribbon来实现的。 当服务发送http://userservice/user/xxxhtt://userservice/user/xxx请求时&#xff0c;是无法到达userservice服务的&#xff0c;会通过Ribbon会把这个请求拦截下来&#xff0c;通过Eureka-server转换…
阅读更多...
常见排序集锦-C语言实现数据结构

常见排序集锦-C语言实现数据结构

目录 排序的概念 常见排序集锦 1.直接插入排序 2.希尔排序 3.选择排序 4.堆排序 5.冒泡排序 6.快速排序 hoare 挖坑法 前后指针法 非递归 7.归并排序 非递归 排序实现接口 算法复杂度与稳定性分析 排序的概念 排序 &#xff1a;所谓排序&#xff0c;就是使一串记录&#…
阅读更多...
排名前 6 位的数学编程语言

排名前 6 位的数学编程语言

0 说明 任何对数学感兴趣或计划学习数学的人&#xff0c;都应该至少对编程语言有一定的流利程度。您不仅会更有就业能力&#xff0c;还可以更深入地理解和探索数学。那么你应该学习什么语言呢&#xff1f; 1.python 对于任何正在学习数学的人来说&#xff0c;Python都是一门很棒…
阅读更多...
【Linux从入门到精通】动静态库的原理与制作详解

【Linux从入门到精通】动静态库的原理与制作详解

本篇文章主要是围绕动静态库的原理与制作进行展开讲解的。其中涉及到了inode的概念引入和软硬连接的讲解。会结合实际操作对这些抽象的概念进行解释&#xff0c;希望会对你有所帮助。 文章目录 一、inode 概念 二、软硬链接 2、1 软连接 2、2 硬链接 三、动静态库概念 3、1 静态…
阅读更多...
【类和对象】

【类和对象】

class 类 类存在两种定义方式&#xff1a; 1、声明和定义全部放在类当中 2、声明放在.h文件中&#xff0c;定义放在.cpp文件中访问限定符 public&#xff08;公有&#xff09;&#xff1a;类内与类外都可以访问 protected&#xff08;保护&#xff09;&#xff1a;类内访问 …
阅读更多...
高防服务器的防御机制

高防服务器的防御机制

高防服务器的防御机制 易受到GJ的网站选择接入高防服务更安全&#xff0c;大家对于这个都清楚!但是对于高防服务如何实现防御来保障安全的&#xff0c;又了解多少呢?今天壹基比小源&#xff08;贰伍壹叁壹叁壹贰玖捌&#xff09;就来说说高防服务实现防御的常规方法一般有以下…
阅读更多...
编织梦想：SpringBoot AOP 教程与自定义日志切面完整实战

编织梦想：SpringBoot AOP 教程与自定义日志切面完整实战

什么是 AOP AOP 是指通过预编译方式和运行期动态代理的方式&#xff0c;在不修改源代码的情况下对程序进行功能增强的一种技术。AOP 不是面向对象编程&#xff08;OOP&#xff09;的替代品&#xff0c;而是 OOP 的补充和扩展。它是一个新的维度&#xff0c;用来表达横切问题&a…
阅读更多...
常见前端基础面试题（HTML,CSS,JS）（三）

常见前端基础面试题（HTML,CSS,JS）（三）

JS 中如何进行数据类型的转换&#xff1f; 类型转换可以分为两种&#xff0c;隐性转换和显性转换 显性转换 主要分为三大类&#xff1a;数值类型、字符串类型、布尔类型 三大类的原始类型值的转换规则我就不一一列举了 数值类型&#xff08;引用类型转换&#xff09; Numbe…
阅读更多...
设计模式之状态模式（State）的C++实现

设计模式之状态模式（State）的C++实现

1、状态模式的提出 在组件功能开发过程中&#xff0c;某些对象的状态经常面临变化&#xff0c;不同的状态&#xff0c;其对象的操作行为不同。比如根据状态写的if else条件情况&#xff0c;且这种条件变化是经常变化的&#xff0c;这样的代码不易维护。可以使用状态模式解决这…
阅读更多...
NOIP真题答案 数字游戏 优秀的拆分

NOIP真题答案 数字游戏 优秀的拆分

数字游戏 说明 小 K 同学向小 P 同学发送了一个长度为 8 的 01 字符串来玩数字游戏&#xff0c;小 P 同学想 要知道字符串中究竟有多少个 1。注意&#xff1a;01 字符串为每一个字符是 0 或者 1 的字符串&#xff0c;如“101”&#xff08;不含双引号&#xff09;为一 个长度为…
阅读更多...
如何在window下cmd窗口执行linux指令？

如何在window下cmd窗口执行linux指令？

1.Git&#xff1a;https://git-scm.com/downloads(官网地址) 2.根据自己的实际路径,添加两个环境变量 3.重启电脑
阅读更多...
删除有序链表中重复的元素-II（链表）

删除有序链表中重复的元素-II（链表）

乌&#xff01;蒙&#xff01;山&#xff01;连&#xff01;着&#xff01;山&#xff01;外&#xff01;山&#xff01; 题目&#xff1a; 思路&#xff1a; 双指针&#xff0c;slow和fast&#xff0c;并且增加标记flag初始为1。 如果slow指向节点值等于fast指向节点值&…
阅读更多...
深入探讨 Oxigen：Rust 实现的并行遗传算法框

深入探讨 Oxigen：Rust 实现的并行遗传算法框

第一部分&#xff1a;引言及Oxigen框架概览 随着遗传算法在许多领域&#xff08;如优化、机器学习和人工智能&#xff09;的应用日益增多&#xff0c;其性能和效率成为了关键焦点。Oxigen 是一个用 Rust 语言实现的并行遗传算法框架&#xff0c;其提供了高效的并行计算机制&am…
阅读更多...
Servlet 初步学习

Servlet 初步学习

文章目录 Servlet1 简介2 快速入门3 执行流程4 生命周期5 方法介绍6 体系结构7 urlPattern配置8 XML配置 Servlet 1 简介 Servlet是JavaWeb最为核心的内容&#xff0c;它是Java提供的一门 动态 web资源开发技术。 使用Servlet就可以实现&#xff0c;根据不同的登录用户在页面…
阅读更多...
RabbitMQ查询队列使用情况和消费者详情实现

RabbitMQ查询队列使用情况和消费者详情实现

spring-boot-starter-amqp spring-boot-starter-amqp是Spring Boot框架中与AMQP（高级消息队列协议）相关的自动配置启动器。它提供了使用AMQP进行消息传递和异步通信的功能。 以下是spring-boot-starter-amqp的主要特性和功能： 自动配置：spring-boot-starter-amqp通过自动…
阅读更多...
什么是cURL？

什么是cURL？

cURL无处不在。它几乎隐藏在所有设备中&#xff0c;例如汽车&#xff0c;蓝光播放器等。它通过互联网协议传输任意类型数据。 在本文中&#xff0c;我们将揭开cURL神秘命令行工具的面纱&#xff0c;解释它是如何成为一种通用代码的&#xff0c;并举例说明其用法。 cURL是什么意…
阅读更多...
PHP海外代购管理系统mysql数据库web结构apache计算机软件工程网页wamp

PHP海外代购管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 海外代购管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88229435 论文 https://…
阅读更多...
maven 环境变量的配置

maven 环境变量的配置

1、安装好maven /home/sunyuhua/dev/apache-maven-3.9.32、编辑环境变量 vi /etc/profile.d/maven.shexport MAVEN_HOME/home/sunyuhua/dev/apache-maven-3.9.3 export PATH$PATH:$MAVEN_HOME/bin3、执行source source /etc/profile4、检验 mvn -version5、附注&#xff1a…
阅读更多...
Redis中的分布式锁及其延生的问题

Redis中的分布式锁及其延生的问题

前言 本文将着重介绍Redis中的分布式锁及其与出现的死锁和锁误删问题 什么是分布式锁 首先问题就是什么是分布式锁&#xff0c;分布式锁就是分布式系统中实现并发控制的一种锁机制&#xff0c;它可以保证多个节点在同一个时间只有有一个能成功竞争到系统资源&#xff08;共享…
阅读更多...
最新文章

Copyright @ 2022~2023