使用图像作为材质。这时候，就需要导入图像作为纹理贴图，并添加到相应的材质中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript">function init() {var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('mainCanvas')});renderer.setClearColor(0x000000);var scene = new THREE.Scene();// cameravar camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);camera.position.set(25, 25, 25);camera.lookAt(new THREE.Vector3(0, 0, 0));scene.add(camera);// lightvar light = new THREE.PointLight(0xffffff, 1, 1000);light.position.set(10, 15, 20);scene.add(light);//如果没有重绘函数，就需要在完成导入纹理的步骤后，重新绘制画面，这是在回调函数中实现var texture = THREE.ImageUtils.loadTexture('img/0.png', {}, function() {//将图片导入到纹理中
                    renderer.render(scene, camera);});var material = new THREE.MeshLambertMaterial({//将材质的map属性设置为texture：
                    map: texture});var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);scene.add(cube);//var sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 25, 15), material);//scene.add(sphere);
                renderer.render(scene, camera);}</script></head><body onload="init()"><canvas id="mainCanvas" width="400px" height="300px" ></canvas></body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript">function init() {var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('mainCanvas')});renderer.setClearColor(0x000000);var scene = new THREE.Scene();// cameravar camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);camera.position.set(25, 25, 25);camera.lookAt(new THREE.Vector3(0, 0, 0));scene.add(camera);// lightvar light = new THREE.PointLight(0xffffff, 1, 1000);light.position.set(10, 15, 20);scene.add(light);var materials = [];for (var i = 0; i < 6; ++i) {//导入图像到六个纹理，并设置到六个材质中
                    materials.push(new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('img/' + i + '.png', {}, function() {renderer.render(scene, camera);}),overdraw: true}));}var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5),new THREE.MeshFaceMaterial(materials));scene.add(cube);renderer.render(scene, camera);}</script></head><body onload="init()"><canvas id="mainCanvas" width="400px" height="300px" ></canvas></body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript">function init() {var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('mainCanvas')});//renderer.setClearColor(0x666666);var scene = new THREE.Scene();// cameravar camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);camera.position.set(0, 0, 25);camera.lookAt(new THREE.Vector3(0, 0, 0));scene.add(camera);// lightvar light = new THREE.PointLight(0xffffff, 1, 1000);light.position.set(10, 15, 20);scene.add(light);var texture = THREE.ImageUtils.loadTexture('img/chess.png', {}, function() {renderer.render(scene, camera);});texture.wrapS = texture.wrapT = THREE.RepeatWrapping;//指定重复方式为两个方向（wrapS和wrapT）都重复
                texture.repeat.set(4, 4);//，设置两个方向上都重复4次，由于我们的图像本来是有2行2列，所以重复4次即为8行8列var material = new THREE.MeshLambertMaterial({map: texture});var plane = new THREE.Mesh(new THREE.PlaneGeometry(12, 12), material);scene.add(plane);renderer.render(scene, camera);}</script></head><body onload="init()"><canvas id="mainCanvas" width="400px" height="300px" ></canvas></body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript">function init() {var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('mainCanvas')});renderer.setClearColor(0x000000);var scene = new THREE.Scene();// cameravar camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);camera.position.set(5, 5, 20);camera.lookAt(new THREE.Vector3(0, 0, 0));scene.add(camera);var material = new THREE.MeshLambertMaterial({color: 0xffff00});var geometry = new THREE.CubeGeometry(1, 2, 3);var mesh = new THREE.Mesh(geometry, material);//把几何形状与材质传入其构造函数
                scene.add(mesh);var light = new THREE.DirectionalLight(0xffffff);light.position.set(20, 10, 5);scene.add(light);// render
                renderer.render(scene, camera);}</script></head><body onload="init()"><canvas id="mainCanvas" width="400px" height="300px" ></canvas></body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript">function init() {var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('mainCanvas')});renderer.setClearColor(0x000000);var scene = new THREE.Scene();// cameravar camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);camera.position.set(5, 5, 20);camera.lookAt(new THREE.Vector3(0, 0, 0));scene.add(camera);var material = new THREE.MeshLambertMaterial({color: 0xffff00});var geometry = new THREE.CubeGeometry(1, 2, 3);var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);mesh.material = new THREE.MeshLambertMaterial({color: 0xff0000});var light = new THREE.DirectionalLight(0xffffff);light.position.set(20, 10, 5);scene.add(light);// render
                renderer.render(scene, camera);}</script></head><body onload="init()"><canvas id="mainCanvas" width="400px" height="300px" ></canvas></body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript">function init() {var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('mainCanvas')});renderer.setClearColor(0x000000);var scene = new THREE.Scene();// cameravar camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);camera.position.set(5, 5, 20);camera.lookAt(new THREE.Vector3(0, 0, 0));scene.add(camera);var material = new THREE.MeshLambertMaterial({color: 0xffff00});var geometry = new THREE.CubeGeometry(1, 2, 3);var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);mesh.position.set(1.5, -0.5, 0);mesh.position = new THREE.Vector3(1.5, -0.5, 0);mesh.position.z = 1;//只设置其中一个属性//如果需要同时设置多个属性，可以使用以下两种方法： mesh.position.set(1.5, -0.5, 0);var light = new THREE.DirectionalLight(0xffffff);light.position.set(20, 10, 5);scene.add(light);drawAxes(scene);// render
                renderer.render(scene, camera);}function drawAxes(scene) {// x-axisvar xGeo = new THREE.Geometry();xGeo.vertices.push(new THREE.Vector3(0, 0, 0));xGeo.vertices.push(new THREE.Vector3(1, 0, 0));var xMat = new THREE.LineBasicMaterial({color: 0xff0000});var xAxis = new THREE.Line(xGeo, xMat);scene.add(xAxis);// y-axisvar yGeo = new THREE.Geometry();yGeo.vertices.push(new THREE.Vector3(0, 0, 0));yGeo.vertices.push(new THREE.Vector3(0, 1, 0));var yMat = new THREE.LineBasicMaterial({color: 0x00ff00});var yAxis = new THREE.Line(yGeo, yMat);scene.add(yAxis);// z-axisvar zGeo = new THREE.Geometry();zGeo.vertices.push(new THREE.Vector3(0, 0, 0));zGeo.vertices.push(new THREE.Vector3(0, 0, 1));var zMat = new THREE.LineBasicMaterial({color: 0x00ccff});var zAxis = new THREE.Line(zGeo, zMat);scene.add(zAxis);}</script></head><body onload="init()"><canvas id="mainCanvas" width="400px" height="300px" ></canvas></body>
</html>

缩放对应的属性是scale，旋转对应的属性是rotation，具体方法与上例相同

three.js贴图相关推荐

  1. d3.js折线图_学习使用D3.js创建折线图

    d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...

  2. js折线图设置y轴刻度_手绘风格的 JS 图表库：Chart.xkcd

    本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...

  3. vue.js 多图上传，并可预览

    <!DOCTYPE html> <html> <head><title>vue.js 简单多图上传图片</title><meta ht ...

  4. js小学生图区_推荐12个最好的 JavaScript 图形绘制库

    众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web  ...

  5. js视频html代码,html+JS刷图实现视频效果(示例代码)

    网页播放视频须要载入播放器,可是通过刷图也能实现视频播放的效果 JS中用到Z-index属性,记录一篇解说Z-index属性的博客的地址: http://www.cnblogs.com/gisdrea ...

  6. three.js贴图之CubeTextureLoader全景贴图

    学习交流欢迎加群:789723098,博主会将一些demo整理共享 有时候我们在创建地图街景或者地点全景图的时候,会经常用到THREE.CubeTextureLoader来对场景Scene的背景进行贴 ...

  7. js折线图设置y轴刻度_d3.js实现自定义多y轴折线图

    前言 需求是实现一个生命体征的体温单,x轴是时间线,y轴有多个体征项.效果不是特别复杂,但是行业特殊性,所以也没有现成可用的,所以用 d3.js 实现了一个多y轴的折线图. 基础 这张图只用了d3.j ...

  8. js小学生图区_js读取本地图片并显示

    版权声明:本文为博主原创文章,未经博主允许不得转载. 根据项目需要,需要选择本地图片并显示在页面上,然后上传至服务器.因为自身刚刚接触js,所以比较生疏,碰到问题吼,幸好有强大的网络,搜索很多有用的资 ...

  9. IoT SOL：基于HTML5+Node.js的图形化、社区化开发平台

    英特尔物联网服务融合开发套件(IoT SOL)是软件与服务事业部系统技术和优化部门(STO)开发的一款面向物联网开发的图形编程工具,旨在降低IoT应用的开发门槛.在2016年英特尔信息技术峰会(IDF ...

最新文章

  1. 【练习】2021下半年数据结构刷题笔记和总结 （一）（图和动态规划）
  2. rdb和aof优势劣势
  3. 深度有趣 | 30 快速图像风格迁移
  4. 【飞秋】OpenExpressApp对建模支持的初步计划
  5. 手工删除oracle的方法
  6. 2012我的这一年，2013时不我待
  7. 免费直播｜1小时详解区块链技术
  8. 软件工程 超市库存管理系统 UML模型
  9. Springboot开关柜综合监测信息查询系统毕业设计-附源码191550
  10. 学习Python对英语水平有要求吗？
  11. 随机梯度下降(SGD)与经典的梯度下降法的区别
  12. 利用爬虫获取app数据
  13. Jenkins - cannot find symbol
  14. unity steamworksdk简单接入
  15. 你看那只追风的风筝，它好像是在发电？
  16. 日立电梯中标武汉地铁16号线 支持江城轨道交通复工建设
  17. PAT甲级1121 Damn Single
  18. word2010中护眼色
  19. 基于简单字符设备驱动框架编写代码驱动io_2
  20. .py文件和.yaml文件作为配置文件

热门文章

  1. swift_039（Swift中的KVC的使用方法)
  2. 小程序之 转发／分享
  3. 20171218-编程语言的介绍
  4. win10 uwp 按下等待按钮
  5. 有关Nodejs的一些插件介绍
  6. Vim 自动文件头注释与模板定义
  7. bestcoder#51
  8. 单片机生成随机数的方法总结
  9. HDU 1574 RP问题
  10. 白领丽人减肥四大注意 - 生活至上，美容至尚！