本文要实现的效果 本文适合 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
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
这里我就通过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相关的成员变量仍然是初始化的值，得不到想要的结果。
两种原因： 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元无门槛券
手把手带您无忧上云
