three.js贴图
使用图像作为材质。这时候，就需要导入图像作为纹理贴图，并添加到相应的材质中
<!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(); // camera
var 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); // light
var 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>
aaarticlea/png;base64,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" alt="" />
<!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(); // camera
var 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); // light
var 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>
aaarticlea/png;base64,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" alt="" />
<!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(); // camera
var 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); // light
var 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>
aaarticlea/png;base64,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" alt="" />
<!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(); // camera
var 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>
aaarticlea/png;base64,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" alt="" />
<!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(); // camera
var 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>
aaarticlea/png;base64,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" alt="" />
<!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(); // camera
var 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-axis
var 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-axis
var 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-axis
var 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>
aaarticlea/png;base64,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z5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5ye6ulCT2kVz5yeBmP60VPYKJ45PQ3G9KOnsFE8c3oajOlHT2GjeOb0NBjTj57CRvHM6Wkwph89hY3imdPTYEw/egobxTOnp1mpaA70lFbxzL28p3GpaA70lFbxzL25p3eQiuZAT2kVz9w7e3ofqWgO9JRW8cy9sKe3kormQE9pFc/c23p6N6loDvSUVvHMvaqnN5SK5kBPaRXP3Ht6ek+paA70lFbxzL2kp7eViuZAT2kVz9wbenpnqWgO9JRW8cw9vqc3l4rmQE9pFc/cs3t6f6loDvSUVvHMPbinFVLRHOgpreKZe2pPW6SiOdBTWsUz98ieFklFc6CntIpn7nk97ZKK5kBPaRXP3MN6WicVzYGe0iqeuSf1tFEqmgM9pVU8c4/paalUNAd6Sqt45h7Q02qpaA70lFbxzLX3tF0qmgM9pVU8c9U9fYBUNAd6Sqt45np7+gypaA70lFbxzJX29DFS0RzoKa3imWvs6ZOkojnQU1rFM1fX04dJRXOgp7SKZ66rp8+Tiubgjt8E0EhPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A99BRgDz0F2ENPAfbQU4A9/gFy+u4It9evHwAAAABJRU5ErkJggg==" alt="" />缩放对应的属性是scale，旋转对应的属性是rotation，具体方法与上例相同
three.js贴图的更多相关文章
- js正则表达式图形化工具-rline
github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式 ...
- JS前端图形化插件之利器Gojs组件（php中文网）
JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...
- 最近发现了个js传图预览的函数和大家分享下
由于浏览器js沙箱,存在不同域,js无法直接调用电脑文件.在之前做传图预览的时候,基本的思路就是, 将图片先保存到服务器中缓存,然后返回一个服务器路径,并显示出图片,然而这样很耗缓存目录文件的.方法也 ...
- （转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程
myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...
- [Js]焦点图轮播效果
一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...
- 纯JS焦点图特效（可一个页面多用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 自己做的js甘特图插件
版权所有,禁止转载 内容都在代码中,上图上代码! 代码 <!DOCTYPE html> <html> <head> <title>ganttu.html ...
- html+JS刷图实现视频效果
网页播放视频须要载入播放器,可是通过刷图也能实现视频播放的效果 JS中用到Z-index属性,记录一篇解说Z-index属性的博客的地址: http://www.cnblogs.com/gisdrea ...
- 免费JS甘特图组件dhtmlxgantt
安装 参考:https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html 可使用NuGet.Bower.npm包管理器安装(应用在asp ...
随机推荐
- MySQL主从复制原理及配置详细过程以及主从复制集群自动化部署的实现
一.复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它主机(slaves)上,并重 ...
- web报表工具Stimulsoft Reports.Web在mvc项目中使用
Stimulsoft Reports.Web,是一款可以直接在Web中编辑报表的报表工具 web项目技术框架mvc4+easyui+knockoutjs 1.在项目中添加引用 Stimulsoft.B ...
- 前端工具HBuilder安装Sass插件
HBuilder自带未安装的less插件,但是sass插件却没有,需要自己安装,步骤如下: 1.安装sass,参考: http://www.w3cplus.com/sassguide/install. ...
- 数据结构 浙大MOOC 笔记二 线性结构
线性表及其表现 第二章的内容是关于三种最基本的数据结构 结合<DDSA>第三章 表.栈和队列做一个总结 首先简单说明一下各个数据结构的特点: 数组:连续存储,遍历快且方便,长度固定,缺点是 ...
- connect/express 的参考
1.Node.js[5] connect & express简介 对connect中间件的分类比较容易理解. http://www.cnblogs.com/luics/archive/2 ...
- js词法分析
JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...
- 设计模式--装饰模式Decorate（结构型）
一.装饰模式 动态地给一个对象添加额外的职责.就增加功能来说,装饰模式相比生成子类更为灵活.有时我们希望给某个对象而不是整个类添加一些功能. 二.UML图 1.Component(概念中提到的对象接口 ...
- （一）Netty源码学习笔记之概念解读
尊重原创,转载注明出处,原文地址:http://www.cnblogs.com/cishengchongyan/p/6121065.html 博主最近在做网络相关的项目,因此有契机学习netty,先 ...
- 【webGL】插件的使用的，实现一个鼠标动画的盒子
准备工作: 1.stat.js stat.js是Three.js的作者Mr. Doob的另一个有用的JavaScript库.很多情况下,我们希望知道实时的FPS信息,从而更好地监测动画效果.这时候,s ...
- Eclipse下载与安装
有很多小伙伴不知道eclipse在哪里下载以及怎么安装的,那我来给大家做个演示吧. 学习java比较常用的软件就是eclipse,而eclipse安装后并不能马上使用,还需要安装jdk并搭建环境.下面 ...