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

<!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>

three.js贴图_javascript



<!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>

three.js贴图_3c_02

<!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>

three.js贴图_html_03

<!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>

three.js贴图_html_04

<!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>

three.js贴图_javascript_05


<!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>

three.js贴图_javascript_06

three.js贴图_javascript_07缩放对应的属性是scale,旋对应的属性是rotation,具体方法与上例相同