本文要实现的效果 本文适合 Three.js 入门级的工友阅读~ 如果你还不了解 Three.js ,可以先看看 《Three.js 起飞》 。 本文使用 Three 的版本是 137 。...用 PlaneGeometry 生成一个平面,并设置该平面的 receiveShadow 属性为 true 就能接受别的物体投射过来的阴影。 立方体 本例的物体元素。...使用 SpotLight 创建光源,并设置该光源的 castShadow 为 true 开启阴影效果。...第3步:创建地面 在本例中地面是用来接受物体投影的载体。 创建地面我使用了 PlaneGeometry 平面,该方法只需传入宽和高即可。...// 省略部分代码 plane.rotation.x = -90 * Math.PI / 180 // 地面 x轴 旋转-90度 第4步:创建立方体 我使用 BoxGeometry 创建立方体,设置一个红色的纹理
本文简介 在阅读本文前,我希望你对 Three.js 有一个初步的理解。如果你不清楚 Three.js 是什么,我推荐你先阅读 『Three.js』起飞!...在使用 Three.js 的前,必须先了解 3大组件:摄像机、场景、渲染器。这是 Three.js 的必需品。 本文讲解的是 场景 的用法。 什么是场景?...属性 属性名 说明 children 返回一个场景中所有对象的列表,包括摄像机和光源 fog 给场景添加雾化效果,雾化效果的特点是场景中的物体离得越远就会变得越模糊 overrideMaterial 使用该属性可以强制场景中的所有物体使用相同的材质...,学 Three.js 最好的方式就是自己敲一遍,然后看效果~ 创建场景 只有场景是无法运行的,必须加上摄像机和渲染器才行。...方法:获取场景中 指定名称的对象 getObjectByName 如果你在创建元素时给元素添加一个 name ,之后就可以使用在场景对象中使用 scene.getObjectByName 方法根据 name
,并且设置重力系数 9.8 const world = new CANNON.World(); world.gravity.set(0, -9.82, 0); 在物理世界中创建一个和我们 Three.js...创建 Three.js 中的地面, 这里主要用到的是 PlaneGeometry 它有4个参数 PlaneGeometry(width : Float, height : Float, widthSegments...: Integer, heightSegments : Integer) 和之前类似我们只需要关注前 2 个参数,就是平面的宽和高,由于平面默认是 x-y 轴的平面,由于Three.js 默认用的是右手坐标系...,对应的旋转也是右手法则,所以逆时针为正值,顺时针为负值,而我们的平面需要向顺时针旋转 90°,所以是 -PI/2 const planeGeometry = new THREE.PlaneGeometry...来总结一下我们本期学习的内容,一共用到 SphereGeometry、PlaneGeometry、 BoxGeometry,然后学习了 Three.js 几何体 与 物理引擎 cannon.js 绑定
这样一个房子,其实也是由几个几何体堆起来的: 具体有这么些几何体: 地板就是个平面,用 PlaneGeometry(平面几何体) 就可以画,贴上个纹理贴图就行。...还剩下一个草地,这个也是一个平面,用 PlaneGeometry(平面几何体)画,只不过就是长宽比较大,看不到尽头而已。 看起来还有雾?...我们创建平面几何体(PlaneGeometry),长和宽制定一个很大的值,比如 10000,然后加载草地的图片作为纹理(Texture),构成材质。之后就可以创建出草地了。...然后草地的平面要旋转一下。...const light = new THREE.AmbientLight(0xCCCCCC); scene.add(light); 创建相机,使用透视相机,也就是近大远小的那种透视效果: const
此时的效果如下,你可以修改参数来更新mesh: ? CircleGeometry CircleGeometry是一种圆形的平面几何体。...3个来绘制的,如果是小数,Three.js也会转化为整数(向下取整)来处理,但是最好还是传入的就是整数,因为有的几何体传入小数的段数会报错。...RingGeometry RingGeometry是一种环状的平面几何体。...更多几何体 我们上面讲了5种几何体,估计你也知道了创建几何体的套路了,其他几何体的创建方式和上面的基本一致,这里就不做更多的叙述了。...当然Three.js不仅仅可以使用给出的几何体,甚至还可以自定义几何体,最重要的是还可以导入其他建模软件做出来的模型,这一点是非常厉害的。
,一个平面,再创建一个平行光和一个环境光。...Near and far Three.js使用相机来帮助计算阴影贴图。这些相机与我们前面学到的相机具有相同的属性。比如我们必须定义相机的近视距离和远视距离。...这是由于在Three.js中点光源的阴影贴图要依赖6个方向上的相机来实现-_-!。 正因为点光源会在每个方向上发光,所以Three.js必须通过6个方向的渲染才能创建出多维数据集阴影贴图。...() const bakedShadow = textureLoader.load('/textures/bakedShadow.jpg') 最后,我们使用MeshBasicMaterial来创建一个基本材质的平面即可...const simpleShadow = textureLoader.load('/textures/simpleShadow.jpg') 加载好贴图后,我们可以通过使用一个平面来创建阴影,平面是创建出来时默认是面向
如果你想要安装特定版本的Three.js,你可以指定版本号,例如: npm install three@0.128.0 threejs 使用先创建一个Dom 如果将Threejs渲染的三维效果展示到电脑页面...:矩形平面 const geometry = new PlaneGeometry(100,50); //CircleGeometry:圆形平面 const geometry = new CircleGeometry...Three.js 深度冲突 什么是深度冲突,下面创建两个平面,都默认加载到坐标原点: // 创建平面 const plantGeometry = new THREE.PlaneGeometry(80,...controls.update() }; Three.js 克隆.clone() 和 复制.copy() 克隆 .clone()、复制 .copy() 是threejs很多对象都具有的方法,比如三维向量对象...,在创建标签的时候,不生成 CSS3DObject 了,而是使用 CSS3DSprite。
在Three.js中,物体可以形成阴影投影效果,但是由于渲染阴影需要消耗计算机大量资源,所以Three.js在默认情况下是不会渲染阴影的,所以需要我手工设置开启阴影效果。...创建平行光的接口与环境光一致。实际使用过程中具体需要用到光源,怎么去布置光源,需要根据具体应用场景来定。 创建好光源之后,需要设置castShadow属性告诉光源开启阴影投射。...cube.position.z = -10; //告诉立方体需要投射阴影 cube.castShadow = true; scene.add(cube); 4、创建底部平面接收阴影设置...最后,添加一个接收阴影的平面,通过receiveShadow属性设置平面接收阴影。...//平面 var planeGeometry = new THREE.PlaneGeometry(100,100); var planeMaterial = new THREE.MeshStandardMaterial
这里我就通过three.js这个图形引擎,验证一下其推导是否正确,顺便学习下three.js是如何进行图形变换的。 2. 基本变换 2.1....模型变换矩阵 在场景中新建一个平面: // create the ground plane var planeGeometry = new THREE.PlaneGeometry(60, 20); var...var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); 这里创建了一个透视投影的相机...开关变量会每60帧变一次,如果为假,会使用内置的projectionMatrix和modelViewMatrix来计算顶点值,此时场景中的物体颜色会显示为蓝色;如果开关变量为真,则会使用传入的计算好的mvpMatrix...其他 在使用JS的console.log()进行打印camera对象的时候,会发现如果不调用render()的话(或者单步调式),其内部的matrix相关的成员变量仍然是初始化的值,得不到想要的结果。
Node.js 在其标准库中提供了一组异步 I/O 原语,以防止 JavaScript 代码阻塞,并且通常,Node.js 中的库是使用非阻塞范例编写的,这使得阻塞行为成为例外而不是常态....Node.js 具有独特的优势,因为数百万为浏览器编写 JavaScript 的前端开发人员现在除了客户端代码之外,还能够编写服务器端代码,而无需学习完全不同的语言....在 Node.js 中,可以毫无问题地使用新的 ECMAScript 标准,因为您不必等待所有用户更新他们的浏览器——您负责通过更改 Node.js 版本来决定使用哪个 ECMAScript 版本,您还可以通过运行带有标志的...目录 安装three完成 六、基于Node的Three案例 6.1 构建一个Three案例 参考博客Three.js入门教程——教不会算我输 在前端demo的文件夹下创建src目录,在src...--------------------- var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1); var planeMaterial
两种原因: 1、物体材质不对 代码: // 纹理贴图映射到一个矩形平面上 var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面 // TextureLoader...创建一个纹理加载器对象,可以加载图片作为几何体纹理 var textureLoader = new THREE.TextureLoader(); // 执行load方法,加载纹理贴图成功后,返回一个纹理对象...material = new THREE.MeshLambertMaterial({ // color: 0x0000ff, // 设置颜色纹理贴图:Texture对象作为材质map属性的属性值...floor.geometry.setAttribute( "uv2", new THREE.Float32BufferAttribute(floor.geometry.attributes.uv.array, 2) ); 原因: 在three.js...当使用aoMap,属性时,必须指定uv2.
这篇郭先生来说一说three.js几何体都有哪些?在线案例点击预览three.js 几何体 1....了解各种three.js几何体 下面是three.js几何体的分类介绍以及构造器的参数(r117版本) |名称|构造器参数| |-|-|-| |PlaneGeometry(平面几何体)|width —...平面沿着X轴的宽度。...height — 平面沿着Y轴的高度。默认值是1。widthSegments — (可选)平面的宽度分段数,默认值是1。heightSegments — (可选)平面的高度分段数,默认值是1。...认识几何体 先上图 image.png 图片对应的就是这些几何体,如果你想更加细致的认识这些几何体请看demo。接下来的几篇我将详细的介绍这些几何体的使用以及注意事项。 转载请注明地址:郭先生的博客
概述 在three.js场景中,有时会遇到场景模糊,纹理失真的现象,似乎three.js并没有用到纹理图片应有的分辨率。可以通过相关设置来解决这个问题。 2. 方案 2.1....开启反走样 three.js创建的WebGLRenderer对象有抗锯齿选项的支持: var renderer = new THREE.WebGLRenderer({ antialias: true...开启HiDPI设置 如果开启抗锯齿后仍然显示比较模糊,那么可能就是使用的是HiDPI (High Dots Per Inch) 设备显示造成的,HiDPI设备能在较小尺寸下显示出较高分辨率,也就是每一个屏幕上的物理像素其实是由多个像素显示出来的...= new THREE.PlaneGeometry(2, 2); // var planeMaterial = new THREE.MeshBasicMaterial({...参考 关于ThreeJS场景失真的问题 关于three.js 抗锯齿 HiDPI (简体中文)
概述 在网上查阅了一下three.js关于帧缓存的使用,感觉很多都是关于three.js中后处理通道的使用的。...后处理通道确实使用FBO实现的,但其实我就是想获取某个时刻的渲染结果作为纹理,没必要在动态渲染中进行后处理。...map: bufferTexture.texture //获取渲染目标缓冲区中的纹理 }); var plane = new THREE.Mesh(planeGeometry...}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); scene.add(plane); 这个面的材质纹理来自于自定义的喧嚷目标缓冲区...参考 Quick Tip: How to Render to a Texture in Three.js 如何在ThreeJS中使用场景的渲染结果作为纹理?
概述 使用如下代码绘制一个面: 'use strict'; function init() { //console.log("Using Three.js version: " + THREE.REVISION...= new THREE.PlaneGeometry(60, 20); var planeMaterial = new THREE.MeshBasicMaterial({ color...可以发现两者的输出结果并不一致,这其实涉及到three.js中矩阵更新的问题。 2....详解 three.js中的Mesh和Camera都继承自Object3D,Object3D提供了更新图形矩阵的接口: ?...(true); 但是在调用renderer.render之后,three.js就会使得矩阵自动进行更新。
z 是相机在 z 轴上的位置。 在 createScene 方法中使用的是 Transform 类,它是一个新场景的表示,包含所有表示 WebGL 环境中图像的平面。...创建可重用的几何实例 不管你用的是哪种 WebGL 库,总是要通过重复使用相同的几何图形引用来保持较低的内存使用量,这是一种很好的做法。...为了表示所有图像,我们将使用平面几何图形,所以要创建一个新方法并将新几何图形存储在 this.planeGeometry 变量中。...Mesh、 Program 和 Texture 类来创建 3D 平面并赋予纹理,在例子中,这个平面会成为我们的图像。...可以用 sin 和 cos 像平面一样弯曲我们的顶点,添加下面的代码: p.z = (sin(p.x * 4.0 + uTime) * 1.5 + cos(p.y * 2.0 + uTime) * 1.5
------数字资产研究院学术与技术委员会主任朱嘉明教授 来源知乎 Three.js基础入门-自学篇 Web3D技术 随着浏览器性能和网络带宽的大幅度提升,以及WebGL的实现,使得Web应用中也可以使用...WebGL使用需要图形学知识,对WebGL编程可以通过js和glsl两种语言。如果想直接使用WebGL,使用者可以采用着色器(Shader)用来实现图像渲染的,但对于新手来说,Shader还是困难的。...这时我们可以使用Three.js来简化我们对底层图形学的开发知识,更快的上手3D开发过程。...Three.js自学篇 官网以及下载 Three.js的官网 Three.js下载地址:github下载, 国内码云 本文采用码云下载 下载后,解压 备注,你可以根据下载后的文件,搭建一个本地的...入门教程——教不会算我输 编码 在前端demo的文件夹下创建src目录,在src目录下创建a.html内容如下 代码: <!
1 创造世界 很好理解,就是我们现在看到的世界,用Three.js做出来。...首先对Three.js还是要了解其一些概念的,这样才能看的更明白。新建一个项目,引入Three.js,网上不好js找没关系,我会在最后提供本篇文章的完整demo。...2 创建一个地面 上面的步骤只是创建了全景的世界,但是我们需要有个地面来放置我们之后要创建的房子,因此,这个地面要比较大。...创建 为了方便,我们新建一个方法来创建,后面只需要调用这个方法即可 function createGrass() { // 创建一个平面缓冲几何体 const geometry = new THREE.PlaneGeometry...(地板) // 创建地板方法 function createFloor() { // 创建一个平面缓冲几何体 const geometry = new THREE.PlaneGeometry
1.立方缓冲几何体(BoxGeometry),立方缓冲几何体我们前面已经使用过了,它是四边形的原始几何类,它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形...添加立方缓冲几何体到场景中,前面也使用过,使用下面的代码可以将立方缓冲几何体添加到场景中// 创建一个几何体,相当于在画布上想要呈现的物体const geometry = new THREE.BoxGeometry...同时它也可以用于创建规则多边形,其分段数量取决于该规则多边形的边数。...(PlaneGeometry):PlaneGeometry是用于生成平面几何体的类,其构造函数如下 PlaneGeometry(width : Float, height : Float, widthSegments...height — 平面沿着Y轴的高度。默认值是1。 widthSegments — (可选)平面的宽度分段数,默认值是1。 heightSegments — (可选)平面的高度分段数,默认值是1。
文件,该文件必须在three.js的下方引入,如下: <script type="text/javascript" src=".....不再是通过new THREE.Mesh(geometry, material);这样来<em>创建</em><em>的</em>。...不同面<em>使用</em>不同<em>的</em>材质 不同面<em>使用</em>不同<em>的</em>材质很简单,只要把材质传一个数组就可以了,与联合材质不同<em>的</em>是,联合材质是多种材质混合<em>使用</em>,这里是每一个面用了一种材质。...在老版本<em>的</em><em>three.js</em>中有一个名叫MeshFaceMaterial<em>的</em>材质可以让不同面拥有不同<em>的</em>材质,这里就不简绍已经废弃<em>的</em>MeshFaceMaterial了。...---- 至此,<em>three.js</em><em>的</em>基本概念我们已经讲完了,大家是不是收获满满?<em>three.js</em>看似东西多,其实基本套路都是一样<em>的</em>,就比如基本上所有的设置材质<em>的</em>方法都是类似的。
领取专属 10元无门槛券
手把手带您无忧上云