<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贴图</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隐藏body窗口区域滚动条 */
}
</style>
<!--引入three.js三维引擎-->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script src="http://127.0.0.1:8080/three.js-master/examples/js/controls/OrbitControls.js"></script>
<!-- <script src="http://127.0.0.1:8080/three.js-master/build/three.js"></script> -->
<!-- <script src="./three.js-master/build/three.js"></script> -->
<!-- <script src="./three.js"></script> -->
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<div id="myapp"></div>
<body>
<script>
//1 舞台
var scene = new THREE.Scene();
//1.1摄像头
camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);
//1.2设置渲染器
render = new THREE.WebGLRenderer({
antialias: true//抗锯齿
});
//1.2.1设置像素
render.setPixelRatio(window.devicePixelRatio);
//1.2.2设置尺寸
render.setSize(window.innerWidth, window.innerHeight)
/****/
//1.3设置html名称
var app = document.getElementById("myapp");
app.appendChild(render.domElement);//渲染器放入规定位置
//2 设置载体
var geometry = new THREE.PlaneGeometry(30, 20, 30); //平面
//var geometry = new THREE.PlaneGeometry(20, 20, 32); //平面
//2.14质地
var textureLoader = new THREE.TextureLoader(); // 纹理加载器
var texture = textureLoader.load('./img/grass.jpg');
//var texture = textureLoader.load('./img/tree.png');
//var texture = textureLoader.load('./img/Earth.png');
// 纹理模式:默认-ClampToEdgeWrapping(夹边包裹) RepeatWrapping:阵列 镜像阵列:MirroredRepeatWrapping
texture.wrapS = THREE.RepeatWrapping;//质地.包裹
texture.wrapT = THREE.RepeatWrapping;
// u+v方向纹理重复数量
texture.repeat.set(10,10);//质地重复
<!-- var material = new THREE.MeshLambertMaterial({ -->
<!-- color: 0x00ff00, -->
<!-- }); -->
//2.2素材、物质的
var material = new THREE.MeshBasicMaterial({
map: texture, // 贴图
color: 0x00ff00,
side: THREE.DoubleSide
});
//2. 网格化、啮合化=几何+素材
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);//加到场景内
//3 相机
camera.position.set(20, 30, 40); //设置相机位置
camera.lookAt(new THREE.Vector3(0, 0, 0))
/*********/
//4 动画 自我调用
//4.1 函数动画
function animate(){
render.render(scene, camera);
window.requestAnimationFrame(animate);
}
//4.2 调用函数
animate();
</script>
</body>
</html>