Three笔记

最新推荐文章于 2024-06-11 21:47:28 发布
最新推荐文章于 2024-06-11 21:47:28 发布
阅读量119 收藏
点赞数
分类专栏： 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin819397746/article/details/107489261
版权

1. 场景内容

程序结构

在这里插入图片描述

层级关系在这里插入图片描述

OrbitControls.js

控件支持鼠标左中右键操作和键盘方向键操作

材质类型 功能

材质类型 功能
MeshBasicMaterial 基础网格材质，不受光照影响的材质
MeshLambertMaterial Lambert网格材质，与光照有反应，漫反射
MeshPhongMaterial 高光Phong材质,与光照有反应
MeshStandardMaterial PBR物理材质，相比较高光Phong材质可以更好的模拟金属、玻璃等效果
最低0.47元/天 解锁文章
lin819397746
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js对光源效果
m0_62285976的博客
07-18 1335
其实并不是的，而是THREE.MeshBasicMaterial是最基本的材质，也是不会对光源产生反应的材质，所以才不会对光源有反应，这个时候，我们只需要吧THREE.MeshBasicMaterial换成THREE.MeshLambertMaterial就可以啦，然后就会出现光源了。不知道你们在写的过程中有没有遇到过这种事情，明明我已经加上光源了，但是为什么就是没有效果呢，加的位置啥的也没有错误啊，这是为什么呢？我也遇到过这样的问题一是光源没加对，有错误，二是光源正确，但是材质的问题，材质对光源不反应。.
three 使用PointLight没效果
RubyLinT的博客
08-27 1377
在three里加了个PointLight： //点光源 var point = new Three.PointLight(0xffffff); point.position.set(400, 200, 300); //点光源位置 this.scene.add(point); //点光源添加到场景中 感觉没什么效果，原因是需要搭配使用MeshPhongMaterial类型的颜色素材： let material = new Three.MeshPhongMateri
three.js+vue3点光源不生效的另外一个可能
anwebDesigner的博客
12-28 1041
搜索一番都是说改模型材质。MeshLambertMaterial 早就改成这个材质了，还是不行。后来发现，我安装的three.js版本：^0.160.0，目前的最新版，于是尝试降级，我选择了。在尝试3D项目的时候，明明按照教程一步步来的，可是点光源就是不生效，模型就是黑色。还有说是光源位置问题，也尝试过移动位置，但是不起作用。^0.150.1 版本，模型瞬间就有光了！
three.js 聚光源SpotLight设置target是mesh不生效是什么原因？
yinge0508的博客
02-15 1467
设置SpotLight的位置position 是(400,400,0)，目标设置target是mesh5,确不生效，待解决，聚光源并没有指向正方体，什么原因？ 效果：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
Unity Point Light没用的问题
若风
05-06 4221
遇到一个点光源没反应的问题 https://docs.unity3d.com/Manual/class-Light.html 设置成import就好，auto模式不太稳定 只有import的时候才会参与逐像素计算，否则是逐顶点
vue3.0+three.js 光源的设置不生效的问题
zlguaizhang的博客
10-27 3038
vue3+threejs遇到的无法设置光源的问题，记录一下
threejs学习笔记——添加聚光灯不显示光照效果
desperadoyanxiaoxue的博客
05-08 295
threejs学习笔记——添加聚光灯不显示光照效果
如何解决THREE.MeshLambertMaterial和spotLight()方法使用，物体展示的是黑色。
最新发布
喝奶茶要半糖的博客
06-11 427
按照《Three.js开发指南》学习，使用Three.js版本为 v.0.165.0版本，发现使用THREE.MeshLambertMaterial和spotLight()方法使用时，就会出现一片黑的情况，无论怎么调角度+环境光，显示的效果都不是很好。但官方文档也提到了更改这个属性会影响power属性，这应该不是最优解。希望各位大佬，如有更好的方法，欢迎解答。本来到这里都准备使用DirectionalLight()方法了，能达到效果。小白写文，若有问题，指出，立马改！根据上述文章，有认真学习了。
three.js 源码注释（四十）Light/PointLight.js
omni360的专栏
12-06 1635
PointLight方法根据设置灯光的颜属性color, 强度属性intensity,距离属性 distance 创建点光源.PointLight对象的功能函数采用 定义构造的函数原型对象来实现. TODO: PointLight类型灯光在这个版本内还没有实现阴影.??? Example: var light = new THREE.PointLight(0xff0000,1,100); //创建灯光对象 light.position.set(50,50,30); //设置位置 sc
threejs学习之环境光和点光源
旅行中的伊蕾娜的博客
05-04 751
点光源，从一个点散发出的光，相当于灯泡，可以设置颜色，亮度、照射最大距离以及光照衰退量。环境光可以均匀照亮场景中所有物体，不能投射阴影，不能设置方向，只能设置颜色和亮度。添加地面，必须把receiveShadow设为true，地面才能接收物体投射出的阴影。创建立方体，必须把参数castShadow设置为true，立方体才能产生阴影。添加点光源，必须把castShadow设为true，光源才能投射阴影。// 镜面指数，越高反射效果越强。// 调整渲染器窗口大小。// 加载物体纹理贴图。
Three.js平面接收不到阴影
hongsir的博客
11-23 2740
首先确认渲染器有无开启阴影贴图，默认是false // 创建渲染器 var renderer = new THREE.WebGLRenderer() // 设置渲染物体阴影 renderer.shadowMap.enabled = true 然后确认物体材质是否可受光照影响 // 创建地面几何体 const planeGeometry = new THREE.PlaneGeometry(60,20) // 创建地面材质 const planeMaterial = new THREE.MeshLam
Three.js显示光源
金蝶ERP解说
03-13 428
在做Three.js开发的时候，它本身是不显示光源的，这就很难受，往往加了光源，找不到它放置的位置。three.js本身不显示光源，可以通过其他方式显示，在光源的防止位置上加一个球即可。
Threejs进阶之三：通过GUI修改gltf模型(摩托车)颜色
九仞山的专栏
04-20 864
详细介绍了通过GUI修改gltf模型颜色的方法，同时，介绍了MeshPhysicalMaterial材质中的几个重要属性
Three.js之MeshBasicMaterial材质与MeshPhongMaterial材质
youlinhuanyan的博客
02-16 2561
一、MeshBasicMaterial介绍 MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框，对场景中的雾化会有反应。 1、属性 property 属性名 功能 color 颜色 设置材质的颜色 wireframe 线框 设置这个属性的可以将材质渲染成线框，非常适合调...
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
PKN_Terry的博客
04-28 2709
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial MeshStandardMaterial和MeshPhysicalMaterial类是PBR物理材质，可以更好的模拟光照计算，相比较高光网格材质MeshPhongMaterial渲染效果更逼真。 MeshStandardMaterial和MeshPhysicalMaterial两个类基本相似，物理网格材质MeshPhysicalMaterial是MeshStandardMaterial的扩展，Mesh
我的threejs学习笔记（七）——spotLight
chenqiong1991的博客
03-25 2107
写在前面点光源（pointlight)的特点就像夜空中的烟雾弹，向四面八方发射光线；而聚光灯（spotlight）就像手电筒或者像舞台上的探照灯，效果是一个锥形的发光区域。相比于点光源，它有照射的近场区，远场区，和发散系数。点光源属性var spotLight=new THREE.SpotLight({color:"#f2f"}); spotLight.intensity=1; sp
26 Three.js的聚光灯光源THREE.SpotLight
现在学习也不晚
08-17 4452
介绍 THREE.SpotLight（聚光灯灯源）是最常使用的光源之一。THREE.SpotLight是一种具有锥形效果的光源。比如：手电筒。 案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/28.html 相关属性 由于Three.js的版本更新过快，有可能有我没有测试的属性已经被抛弃了，如果大家有知道的已经被抛弃掉的记得给我留言。...
我的threejs学习笔记（五）——点光源属性控制
chenqiong1991的博客
03-23 3909
写在前面主要练习了点光源的距离和密度属性。 理解了threejs里颜色使用的原理。代码pointLight.distance=controls.pointlight_distance; pointLight.intensity=controls.pointlight_intensity; distance（距离）控制光源的照射范围；intensity（密度）控制光源的强度。 全文<!D
关于threejs灯光的使用
bigpatten的博客
08-19 5846
现实环境中，人们之所以能看得到物体，是因为有光，物体的材质反射光到人眼中。在ThreeJS中有几种光源，去模拟现实环境。最常见的四种分别为： 环境光( AmbientLight )：笼罩在整个空间无处不在的光 点光源( PointLight )：向四面八方发射的单点光源 聚光灯( SpotLight )：发射出锥形状的光， 模拟手电筒，台灯等光源 平行光( DirectinalLight )：平行的一束光，模拟从很远处照射的太阳光 其他还有半球光光源( HemisphereLight )，平面光光源(.
Three.js入门教程：从基础到进阶
"Three.js学习笔记涵盖了WebGL基础知识、Three.js介绍、照相机、几何形状、材质、网格、动画、外部模型、光与影以及着色器等多个方面，旨在帮助开发者理解和运用Three.js进行3D图形编程。" 在深入Three.js的学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值