您的位置：首页 > Web前端 > JavaScript

three.js加载纹理

2017-12-11 14:37 393 查看

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
</style>
</head>
<body>

<script src="../js/three.js"></script>

<script>
var camera,scene,renderer;
var mesh;
init();
animate();
function init() {
//初始化渲染器
renderer=new THREE.WebGLRenderer();
//设置渲染窗口大小
renderer.setSize(window.innerWidth,window.innerHeight);
//将渲染内容显示到body中
document.body.appendChild(renderer.domElement);

//初始化相机
camera=new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,1000);
camera.position.z=400;
//初始化场景
scene=new THREE.Scene();

//画一个平面
var geometry=new THREE.PlaneGeometry(500,300,1,1);
//设置UV坐标，必须逆时针方向
geometry.vertices[0].uv=new THREE.Vector2(0,0);
geometry.vertices[1].uv=new THREE.Vector2(1,0);
geometry.vertices[2].uv=new THREE.Vector2(1,1);
geometry.vertices[3].uv=new THREE.Vector2(0,1);

//价值纹理
var texture=THREE.ImageUtils.loadTexture("textures/a.jpg",null,function (t) {

});
//定义材质
var material=new THREE.MeshBasicMaterial({map:texture});
var mesh=new THREE.Mesh(geometry,material);
scene.add(mesh);

//监听窗口大小改变
window.addEventListener('resize',onWindowResize,false);
}

//窗口大小改变时，更新投影矩阵
function onWindowResize() {
//更新宽高比
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}

function animate() {
requestAnimationFrame(animate);
renderer.render(scene,camera);
}

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航