相关内容
three.js 着色器材质之纹理
今天郭先生说一说如何在three.js着色器中添加纹理，先看看今天要完成的效果，在线案例请点击着色器纹理。 image.png 捕57获.png这里我们分别引入三个纹理，分别是地球的表面纹理，对应的海拔灰度图，和云朵的纹理。 使用表面纹理还是地球的外貌，海拔灰度图给地球添加凹凸效果，云朵纹理给地球添加云朵效果...
three.js 材质
根据values设置属性。. tojson ( meta : object ) : nullmeta -- 包含元素，例如材质的纹理或图像。 将材质转换为three.js json格式。 2. three.js材质种类名称介绍linebasicmaterial一种用于绘制线框样式几何体的材质。 linedashedmaterial一种用于绘制虚线样式几何体的材质。 meshbasicmaterial一个以简单着色...
Threejs 快速入门
其实threejs在定义一个3d物体时，需要提供两个信息，第一是形状信息，也就是这个物体上每一个点，每一个面的坐标信息，第二是材质信息，用于告诉threejs物体的颜色，纹理，反光等信息。 有了这些信息，threejs才知道要如何渲染这个物体。 而上面的new boxgeometry(1, 1, 1)，就是告诉threejs，我要显示一个长宽高各为...
three.js 新手指南
搭建本地环境javascript 具有称为同源策略的安全功能，意味着你不能在 javascript 中跨域获取资源。 这会有一些问题，因为 three.js 需要加载几何，纹理和其它文件。 为了规避这些问题，你需要一个本地 http 服务器，使文件来自相同的源。 直接打开 index.html 是不会有效果的。 幸运的是，在 three.js faq中有一个很...
Three.js - 走进3D的奇妙世界
上图右侧就是右手坐标系，五指并拢手指放平，指尖指向x轴的正方向，然后把四个手指垂直弯曲大拇指分开，并拢的四指指向y轴的正方向，大拇指指向的就是z轴的正方向。 在three.js中提供了坐标轴工具（three.axeshelper），在场景中添加坐标轴后，画面会出现3条垂直相交的直线，红色表示x轴，绿色表示y轴，蓝色表示z轴...
Three.js - 走进3D的奇妙世界
上图右侧就是右手坐标系，五指并拢手指放平，指尖指向x轴的正方向，然后把四个手指垂直弯曲大拇指分开，并拢的四指指向y轴的正方向，大拇指指向的就是z轴的正方向。 在three.js中提供了坐标轴工具（three.axeshelper），在场景中添加坐标轴后，画面会出现3条垂直相交的直线，红色表示x轴，绿色表示y轴，蓝色表示z轴...
ThreeJS实现船行效果
最近确实业务上需要, 简单学习了threejs的api 文章中代码不全,需要了解的可以访问仓库: https:github.comklren0312threejs_ocean_ship 在线示例(很慢) ? 效果图一. 相关库 项目里用到的相关库, 基本都在threejs项目文件夹里https:github.commrdoobthree.jstreedevexamplesjs three.js 核心库: https:github...
Three.js camera初探——转场动画实现
通过它可以在网页中进行3d建模，结合上tweenmax.js动画库，在网页中实现3d动画效果就变得很简单了。 这是three.js建模的简单流程图例：? 用通俗的话来讲，首先可以用js创建各种形状的几何体，或者从外部导入建好的模型文件，然后为几何体添加材质（纹理、颜色等），就组成了一个网格模型mesh，我们可以创建很多的模型...
解剖 WebGL & Three.js 工作原理
实际上，上面所有步骤，three.js都帮我们完成了。 5.1. 5、three.js顶点处理具体流程所以有了，多次矩阵计算，多次坐标换算。 three.js具体是怎么做的呢？? 坐标转换流程：1、首先，顶点坐标存储在mesh.vertex.position中； 2、随后，如果模型（mesh）设置了旋转、缩放、移动，那将这些转换信息存储在mesh的模型矩阵...
three.js中帧缓存的使用
1. 概述在网上查阅了一下three.js关于帧缓存的使用， 感觉很多都是关于three.js中后处理通道的使用的。 后处理通道确实使用fbo实现的，但其实我就是想获取某个时刻的渲染结果作为纹理，没必要在动态渲染中进行后处理。 真正实现这个功能的是webglrendertarget这个类，这是一个渲染目标的缓冲区，可以装载到webgl...
基于 Threejs 的 web 3D 开发入门
第二种方式是requestanimationframe，让浏览器自行根据当前cpu负载等情况决定何时重绘，达到最佳帧率。 位置为了方便描述位置，引入了坐标系，threejs使用的是右手坐标系，如下图所示。 坐标系的原点位于渲染画布的几何中心。 我们对物体的位置的描述，也是指物体的几何中心的位置。 ?相机相机有正交投影相机和透视...
three.js UV映射简述
单张纹理图如下图所示，将六个面的纹理贴图绘制到一张 image.png 捕获1212122.pngvar geom = newthree.boxgeometry(20, 20, 20); var mate = newthree...再说说uv映射，一个纹理图的原点在其左下方，坐标为(0,0),右下方为(1,0)，左上方为(0,1)，右上方为(1,1) image.png 未标题1.png在geometry中...
three.js 制作机房（下）
let line = new three.line( linegeom, linemate ); })}数据是一个数组，每两个点坐标放在一个数组作为一个线的两个端点，代码中v0，v1既为两个vectro3...双面材质，纹理重复等等，但是这里为了让风有一点感觉，我们考虑使用着色器材质。 不过这里我发现，在使用着色器材质后，纹理的repeat将不再起作用...
Three.js 粒子系统学习小记：礼花效果实现
背景知识在3d建模过程中，当我们需要创建很多细小的物体时，并不会一个个地创建这些物体，而是通过创建粒子，粒子可以模拟很多效果，例如烟花、火焰、雨滴、雪花、云朵等等。 three.js提供了各种的粒子系统创建方式。 从官网例子的demo来看，可以总结分为两类，分别是points和sprite。 points粒子系统的创建首先看看...
前端迈进3D时代-three.js高阶（3D图片预览）
前言前面通过一篇简单的文章，讲述了three.js是干什么的，有哪些主要的对象，今天我们来学习一下更深层次的知识。 下面是上一期文章。 《前端迈进3d时代-three.js初识》 核心代码材质中使用纹理，这里的纹理就是图片，添加到场景中three.imageutils.loadtexture(url, {}, function(){}）控制器controls= newthree...
【带着canvas去流浪（11）】Three.js入门学习笔记
二. three.js中的基本概念官方文档中的新手示例过于简单， 所以本节对three.js中的概念进行一些补充描述：客观三要素：场景scene，相机camera，渲染器renderer 具体用法可以看官方文档的【新手示例demo】光照lightthree.js提供了点光源，射线光源，平行光，环境光的等多种光源来模拟光。 几何模型geometry 生成实体的...
vue.js + three.js轻松构建3d场景的动画图形
3d场景实现实现彩色正方体旋转 import * as three from threeexport default{ data() { return { camera: null, scene: null, renderer: null, mesh: null } },methods:{ 初始化图形 init() { let container = document.getelementbyid(container); this.camera = newthree.perspectivecamera(70, container.client...
three.js 对象绕任意轴旋转--模拟门转动
为门添加一个高光材质和纹理贴图var doormesh = new three.mesh(doorgeom, doormate); doormesh.position.x = -27; 给门添加偏移量和门框相同doormesh...因为之前的所有都添加了-27的偏移量，为了保证门在世界坐标系的中心，我在将门的group的x方向平移27。 scene.add(group); 最后将scene中添加group...
【带着canvas去流浪（12）】用Three.js制作简易的MARVEL片头动画（上）
可以看到，视频实际上的确是覆盖在立方体表面了，但只是占了很小的一块，所以需要针对这种情况进行模型纹理修复，使视频可以覆盖几何体的单个表面。 3.2 纹理贴图的基本原理-uv映射在three.js中，几何体是通过点和面的特征构建起来的，如果将一个几何体实例对象在控制台打印出来，就可以看到存储端点坐标信息的...
幕后故事 | 设计定义年味
在前期看到开发那边有提到开发环境的左手坐标与右手坐标的问题，于是在c4d,3dsmax和maya中进行挑选。 刚好maya的坐标系统与three.js的坐标一致，于是动画...4）减少纹理贴图 设计之初，为了强化纸的质感，在模型的材质中加入了一些纸质贴图，为了进一步提升性能，我们选择去掉这个贴图，而是在ui层上设计了一个...
