使用图像作为材质。这时候，就需要导入图像作为纹理贴图，并添加到相应的材质中
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>
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>
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>
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>
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>
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>
缩放对应的属性是scale，旋转对应的属性是rotation，具体方法与上例相同