three.js 基础01

目录

1.场景创建 Scene()

2.常用形状集几何体「Geometry」[可设置长宽高等内容,如:new THREE.BoxGeometry(...)] 

3.常用材质「Material」[可设置颜色等内容,如:new THREE.MeshBasicMaterial({})]

4.添加、定位

5.相机api

6.相机渲染 WebGLRenderer

7.相机控制器 OrbitControls


1.场景创建 Scene()

2.常用形状集几何体「Geometry」[可设置长宽高等内容,如:new THREE.BoxGeometry(...)] 

长方体        BoxGeometry
圆柱体

CylinderGeometry

球体SphereGeometry
圆锥体ConeGeometry
矩形平面        

PlaneGeometry

圆面体

CircleGeometry

3.常用材质「Material」[可设置颜色等内容,如:new THREE.MeshBasicMaterial({})]

网格基础材质MeshBasicMaterial
网格漫反射材质        

MeshLambertMaterial

网格高光材质MeshPhongMaterial
物理材质

MeshStandardMaterial ,MeshPhyscalMaterial

点材质        PointsMaterial
线基础材质LineBasicMaterial
精灵材质        SpriteMaterial

4.添加、定位

(长、宽、高)position.set
场景变量名.add(物体变量).add

5.相机api

正投影

OrthographicCamera

透视投影[不可小与物体的长宽高]

PerspectiveCamera(宽高比,近裁面值,远裁面值)

​​​​​​​​​​​​​​

6.相机渲染 WebGLRenderer

x(宽),y(高),width(宽),height(高).setScissor(裁剪区域)
true(受渲染器影响)/false(不受渲染器影响).setScissorTest(裁剪检测)
width(宽),height(高),updateStyle(阻止设置对画布的改变).setSize(输出大小)
设置为:(x+width,y+height).setViewport(视口大小)
定义画布的宽高.setSize
输出(指定相机名称及场景)插入到某个元素中.render

 7.设置物体透明度

​​​​​​​

8.创建三维坐标轴

 三维图形的轴[红色代表X(R),绿色代表Y(G),蓝色代表Z轴(B),Y轴朝上]AxesHelper

9.设置相机观察目标

相机观目标指向坐标系原点的距离lookAt(x,y,z)

10.光源【基础材质不受光照影响】

10.1 材质

漫反射       

MeshBasicMaterial

高光

MeshLambertMaterial

物理

MeshStandardMaterial

物理        MeshPhysicalMaterial

漫反射 MeshBasicMaterial   
高光 MeshLambertMaterial
物理 MeshStandardMaterial
物理 MeshPhysicalMaterial

10.2 光源(color[颜色],intensity[光照强度],distance[光源到照射的距离],decay[沿着光源的衰退量,设置为0则不衰减])

注:

目前decay为单独设置,写在括号内未起作用但未找到原因

 点光源在xyz轴都大于0的时候不为黑色,此时可以用到点光源的辅助光源属性PointLightHelper

环境光(默认值0xffff,无方向 不立体).AmbientLight
点光源(往四周发射光源,模拟灯泡光源)(默认值1).PointLight 
点光源辅助 .(要模拟的光源对象,球形辅助对象尺寸默认1,要模拟的光源颜色).PointLightHelper(light,sphereSize,color)
聚光灯光源(默认值0).SpotLight
平行光(模拟太阳光)(默认值2), 需和物体位置用target相连成一条射线. DirectionalLight

点光源不添加光源辅助           聚光灯效果

   ​​​​​​​​​​​​​

   

   点光源添加光源辅助

  

       

10.3 光源位置【.set】

注:光源的x、y、z轴数据不可小于物体长、宽、高

定位x,y,z轴位置positon.set(x,y,z)

​​​​​​​

10.4 光源添加到场景中【.set(光源变量)】

光源添加到场景中,可与物体、坐标一起添加add(物体、坐标、光源)

11.相机控制器 OrbitControls 

引入相机及渲染的元素 OrbitControls

OrbitControls(

object:相机,do mElement: html 元素renderer.domElement

)
监听控制器事件并重新渲染 【必须有监听且重新渲染

addEventListener

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

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

相关文章

【机器学习】机器学习重要方法—— 半监督学习:理论、算法与实践

文章目录 引言第一章 半监督学习的基本概念1.1 什么是半监督学习1.2 半监督学习的优势 第二章 半监督学习的核心算法2.1 自训练(Self-Training)2.2 协同训练(Co-Training)2.3 图半监督学习(Graph-Based Semi-Supervise…

【JavaEE】Spring Boot MyBatis详解(二)

一.解决数据库字段名和对象属性名冲突的问题. 产生这个问题的本质原因就是Java 属性名和数据库字段的命名规范不同. 这个问题的本质就是查询数据库返回了字段,但是不知道和Java对象的哪个属性相对应 1.注解的解决方法 注解的解决方式有三种: 方式一:给数据库字段起别名. 本质…

Quantlab整合Alpha158因子集,为机器学习大类资产配置策略做准备(代码+数据)

原创文章第565篇,专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 我们的研报得现工作,用了两篇文章讲数据准备: 【研报复现】年化16.19%,人工智能多因子大类资产配置策略 【研报复现】年化27.1%,人…

云服务器部署Neo4j

文章目录 导读安装Neo4j先去官网看看下载安装包如果真的下载了rpm安装包 插件 导读 大模型,他终于来了。 不过呢,大模型相关,现在也就跟着热点去尝试一下multi-agent的RAG方向,看看能做到什么地步。总之我们先从安装neo4j开始。…

QT自定义标题栏窗口其二:实现拖动及可拉伸效果 + 顶部全屏/侧边半屏

1、效果 2、核心代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent<

学习笔记——网络管理与运维——SNMP(基本配置)

四、SNMP基本配置 1、SNMP配置举例 整个华为数通学习笔记系列中&#xff0c;本人是以网络视频与网络文章的方式自学的&#xff0c;并按自己理解的方式总结了学习笔记&#xff0c;某些笔记段落中可能有部分文字或图片与网络中有雷同&#xff0c;并非抄袭。完处于学习态度&#x…

蓝鹏测控公司全长直线度算法项目多部门现场组织验收

关键字:全场直线度算法,直线度测量仪,直线度检测,直线度测量设备, 6月18日上午&#xff0c;蓝鹏测控公司全长直线度算法项目顺利通过多部门现场验收。该项目由公司技术部、开发部、生产部等多个部门共同参与&#xff0c;旨在提高直线度测量精度&#xff0c;满足高精度制造领域需…

118 杨辉三角

题目 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 解析 就是模拟法&#xff0c;没有什么特殊的…

Spring Cloud全家桶(上)【Nacos、OpenFeign、LoadBalancer、GateWay、金丝雀灰色发布】

0.零基础入门微服务实战课 1.微服务和 Spring Cloud1.1 什么是微服务&#xff1f;1.2 什么是 Spring Cloud&#xff1f;1.3 微服务 VS Spring Cloud 2.为什么要学微服务&#xff1f;3.Spring Cloud 组件介绍1.什么是 Nacos?1.1 Nacos 功能1.1.1 配置中心1.1.2 注册中心 1.2 Na…

2024年6月20日 (周四) 叶子游戏新闻

超市播音系统: 定时播放不同音乐 强制卸载软件: 一款强制卸载软件 免费多人沙盒游戏《宝藏世界》推出更新“潮起潮落”&#xff0c;带来全新克苏鲁风冒险准备好迎接一场超凡的冒险吧&#xff0c;MMORPG发行商gamigo宣布《宝藏世界》的最新更新&#xff1a;“潮起潮落”。这次更…

模拟原神圣遗物系统-小森设计项目,设计圣遗物(生之花,死之羽,时之沙,空之杯,理之冠)抽象类

分析圣遗物 在圣遗物系统&#xff0c;玩家操控的是圣遗物的部分 因此我们应该 物以类聚 人与群分把每个圣遗物的部分&#xff0c;抽象出来 拿 生之花&#xff0c;死之羽为例 若是抽象 类很好的扩展 添加冒险家的生之花 时候继承生之花 并且名称冒险者- 生之花 当然圣遗物包含…

Pikachu靶场--RCE

参考借鉴 pikachu-RCE_pikachu rce-CSDN博客 Pikachu靶场-RCE远程命令/代码执行漏洞-CSDN博客 命令执行/代码执行/RCE&#xff08;CTF教程&#xff0c;Web安全渗透入门&#xff09;_bilibili exec"ping" 输入IP地址查看页面反应 可以在IP地址的后面拼接我们想要执行…

【全开源】快递寄件小程序源码(FastAdmin+ThinkPHP+原生微信小程序)

&#x1f4e6;快递寄件小程序&#xff1a;轻松寄送&#xff0c;便捷生活 &#x1f69a;一、引言&#xff1a;告别繁琐&#xff0c;让寄件更简单 在繁忙的生活中&#xff0c;寄送快递往往成为我们的一大难题。传统的寄件方式需要前往快递公司网点&#xff0c;填写繁琐的寄件信…

五十、openlayers官网示例JSTS Integration解析——使用JSTS 库来处理几何缓冲区并在地图上显示结果

官网demo地址&#xff1a; JSTS Integration 这篇讲了如何在地图上添加缓冲图形 什么叫做缓冲几何&#xff1f; 几何缓冲&#xff08;Geometric Buffering&#xff09;是指在 GIS&#xff08;地理信息系统&#xff09;和计算几何中&#xff0c;围绕一个几何对象创建一个具有…

eclipse 老的s2sh(Struts2+Spring+Hibernate) 项目 用import导入直接导致死机(CPU100%)的解决

1、下载Apache Tomcat - Apache Tomcat 8 Software Downloads 图中是8.5.100的版本&#xff0c;下面的设置用的是另一个版本的&#xff0c;其实是一样。 2、先将Server配好&#xff0c;然后再进行导入操作。 2、选择jdk 当然&#xff0c;这里也可以直接“Download and instal…

【Unity设计模式】状态编程模式

前言 最近在学习Unity游戏设计模式&#xff0c;看到两本比较适合入门的书&#xff0c;一本是unity官方的 《Level up your programming with game programming patterns》 ,另一本是 《游戏编程模式》 这两本书介绍了大部分会使用到的设计模式&#xff0c;因此很值得学习 本…

【数据结构】红黑树实现详解

在本篇博客中&#xff0c;作者将会带领你使用C来实现一棵红黑树&#xff0c;此红黑树的实现是基于二叉搜索树和AVLTree一块来讲的&#xff0c;所以在看本篇博客之前&#xff0c;你可以先看看下面这两篇博客 【C】二叉搜索树-CSDN博客 【数据结构】AVLTree实现详解-CSDN博客 在这…

使用opencv合并两个图像

本节的目的 linear blending&#xff08;线性混合&#xff09;使用**addWeighted()**来添加两个图像 原理 (其实我也没太懂&#xff0c;留个坑&#xff0c;感觉本科的时候线代没学好。不对&#xff0c;我本科就没学线代。) 源码分析 源码链接 #include "opencv2/imgc…

spark学习总结

系列文章目录 第1天总结&#xff1a;spark基础学习 1- Spark基本介绍&#xff08;了解&#xff09;2- Spark入门案例&#xff08;掌握&#xff09;3- 常见面试题&#xff08;掌握&#xff09; 文章目录 系列文章目录前言一、Spark基本介绍1、Spark是什么1.1 定义1.2 Spark与M…

从0进入微服务需要了解的基础知识

文章目录 系统架构演化过程为什么要了解系统架构的演化过程技术发展认知技术选型与创新 演变过程单体架构分层-分布式集群微服务 分布式\集群\微服务 微服务中的核心要素-拆分原则项目拆分与复杂度微服务的拆分维度有哪些小结 微服务中的核心要素服务化进行拆分后一定是微服务&…