Web前端笔记-two.js加载图片

目前关于two.js的资料，国内的不是很多，项目中要加载图片，官方文档上没有关于加载图片的相关资料，但在github生态圈找到了，在此记录下。

如下图片：

图片路径：

在JS文件中导入图片：

import img from '@/assets/image/pic1.png'

代码如下：

let pic = two.makeTexture(img);
let shape = two.makeRectangle(3000, 3000, 100, 100);
shape.fill = pic;
shape.noStroke();

程序运行截图如下：

Web前端笔记-two.js加载图片相关推荐

VR 效果前端使用 three.js 加载 Obj，drc文件（三维模型文件）
VR 效果前端使用 three.js 加载 Obj(三维模型文件) 前言:我对 three.js 并不熟!只是朋友有这个需求,写了几个 demo 运行,能看~.如果想深入学习,还需要多看看官方文档, ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
Android 开发笔记 ListView异步加载图片
当ListView需要在线获取数据,并且列表中需要显示图片时,友好的处理方式是使用异步加载图片的方式. 这是因为LIstView中显示的内容是分为两部加载的,第一次加载文本信息(包含图片的uri地址) ...
Web前端优化，提高加载速度
研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜 ...
HTML运行到浏览器自动刷新,web前端开发之热加载—liveReload（浏览器自动刷新）...
今天主要写一下,如何配置,保存前端代码后,浏览器自动刷新的功能,双屏操作,真的会方便很多,对于前端开发来说,一边写样式,一边看效果,爽翻~ 图片发自简书App 一.开发环境 1.电脑系统:mac 2. ...
web前端优化（加快加载速度，由点滴做起）
前端是庞大的,包括HTML.CSS.Javascript.Image.Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的是什么 1. 从用户角度而言 ...
Web前端笔记-two.js实现坐标定位（动画效果非瞬移定位）
先来看下程序运行截图: 画图相关代码: ;import * as Two from "JS/two"; import * as $ from "JS/jquery&quo ...
Web前端笔记-two.js图形旋转动画的2种实现方式
这里有两种方式! 第一种是使用setInterval: 代码如下: let time = setInterval(function(){if(sun.sun.rotation >= TWO_PI ...
Web前端笔记-two.js画三角形及画tip含tip旋转
程序运行截图如下: 旋转下: 代码如下: import * as Two from "JS/two"; import * as $ from "JS/jquery&quo ...

Web前端笔记-two.js加载图片

Web前端笔记-two.js加载图片相关推荐

最新文章

热门文章