three.js 笔记1

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量109 收藏
点赞数
分类专栏： three.js 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/workhard0905/article/details/120546936
版权

最近在学习three.js的内容 想着把学习的内容整理成笔记 方便以后使用

在场景中 产生使物体产生阴影的方法

1.给渲染器设置 shadowMapEnabled的属性值为true

2.明确指定哪个物体投射阴影

3.指定哪个物体接收投影

4.定义能够产生阴影的光源，将光源的castShadow的属性值设置为true

只有这些条件都具体了 才能产生阴影效果

renderer.shadowMapEnabled = true

plane.receiveShadow = true; //平面对象接收投影

cube.castShadow = true; //立体模型对象产生投影

spotLight.castShadow = true; //光源产生阴影

天空中的星~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
threejs-kibus:aStar寻路
07-02
Kibus 3D 在这个 repo 中只执行算法 A * 来寻找最短路径，它与其他 repository 不同，因为它是使用 Three.js 制作的。 笔记 在推送之前，完整的 repo 留在损坏的计算机上
Threejs中使用astar(A*)算法寻路导航，Threejs寻路定位导航
左本Web3D
07-07 2285
1，介绍 该示例使用的是 r95版本Three.js库。利用A*算法实现寻路、导航功能。添加坐标轴。 效果图如下： 2，主要说明 引入A*算法astar.js <script type="text/javascript" src="libs/astar.js"></script> 初始化路网、障碍物，记录路网、障碍物位置信息 // 绘制路网 function initGround() { var geometry = new THREE.Geom.
three.js 笔记3
workhard0905的博客
09-29 437
网格对象提供的方法（属性） 1、position:该属性决定该对象相对于父对象的位置，通常父对象是THREE.Scene对象或者THREE.Object3D对象 2、roation:该属性可以设置每个轴的旋转弧度，Three.js还提供了设置相对特定轴的旋转弧度的方法：rotateX() rotateY() rotateZ() 3、scale 该属性可以沿着x y z轴缩放对象 4、translateX(amount) 沿x轴将对象平移amount距离 5、translateY(amount) 沿
three.js 笔记2
workhard0905的博客
09-29 736
场景是所有物体、光源和摄像机的容器 scene中最常用的方法和属性 add(object):用于向场景中添加对象，使用该方法还可以创建对象组 remove(object):使用该方法可以将对象从场景中移除 object为场景中对象的引用 children:用于返回一个场景所有对象的列表，包括摄像机和光源 getObjectByName:在创建对象的时 可以指定唯一的标识name 使用该方法可以查找特定名字的对象，当参数recursive设置为false时，在调用者子元素上查找，当参数recursi
three.js 郭隆邦 笔记1
weixin_42508745的博客
08-29 430
three.js 其他扩展库 examples>jsm>controls 下的都是。.html 直接引入three.js 本地静态服务打开html。新版本 three>addons>controls。three.js 就用 live-server 就行。本地静态服务器 webpack vite 开发环境。vue 引入three.js(js库)
three.js 笔记
Wanan
12-12 521
Three.js 是基于 WebGL的 3D 开发框架。 一些概念 物体 ○ 点（Points）线（Line）面（Sprite）等基础物体 ○ 立方体、圆柱、圆环、圆锥等各种几何体(以 Geometry 为后缀) ○ 坐标系工具（AxisHelper）等辅助工具（辅助工具由几何体、点线面封装） Scene 场景，用来承载物体。 Group 分组，可以理解为一个小的场景。 Renderer 渲染 Scene 中各种物体。 Camera 用一个二维平面来反映三维世界。 透视相机 PerspectiveCamer
three.js学习笔记
Z_Gleng的博客
10-22 855
three.js学习笔记
Three.js 笔记
cky_123的博客
06-26 1511
three.js笔记
three.js 基础认识与简单应用
热门推荐
前端菜菜DayDayUp的博客
02-09 1万+
three.js 基础认识与简单应用
Three.js笔记分享
01-10
Three.js笔记分享
learning-webgl:使用WebGL，Three.js和Babylon.js进行学习–文章，有用的资源，课件，个人笔记
05-08
学习WebGL，GLSL和Three.js 文章，有用的资源，课件，个人笔记工作坊Mapping Festival 2019 /工作坊6·23.05.2019 10h–19h ·（ ·日内瓦·丰德丽·库格勒（Fonderie Kugler），日内瓦代码实验室 ，奥利维尔·兰格...
Three.js源码阅读笔记(Object3D类)
10-27
Object3D似乎是Three.js框架中最重要的类，相当一部分其他的类都是继承自Object3D类，比如场景类、几何形体类、相机类、光照类等等：他们都是3D空间中的对象，所以称为Object3D类,需要了解的朋友可以参考下
web 3d three.js+cannon.js
02-27
使用 three.js，您不再需要花哨的游戏PC或控制台来显示逼真的3D图形。 您甚至不需要下载特殊的应用程序。现在每个人都可以使用智能手机和网络浏览器体验令人惊叹的3D应用程序。 这个惊人的库和充满活力的社区是您在...
three.js学习笔记(七)——粒子
hongsir的博客
12-06 2861
粒子可以被用来创建星星、烟雾、雨滴、灰尘、火焰等等。我们可以使用合理的帧速率来创建数千个粒子。每个粒子都是由始终面向摄影机的平面（俩个三角形）组成的。 创建粒子 创建粒子和创建网格很像，不同的是粒子使用的材质是点材质PointsMaterial和点实例Points。 下面代码为例，当实例化球缓冲几何体时，该几何体的每个顶点都将成为粒子。 /** * 粒子 */ const particlesGeometry = new THREE.SphereBufferGeometry(1,32,32) const
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1187
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1083
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 491
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
WebGL three.js学习笔记 阴影与实现物体的动画
05-30
WebGL three.js是一款基于WebGL的JavaScript 3D库，可以帮助我们快速搭建3D场景和应用。接下来我们来讲解阴影和实现物体动画的方法。 一、阴影 阴影是模拟物体之间的阴影效果，让3D场景更加真实。在three.js中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值