<!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>
three.js加载纹理
猜你喜欢
转载自blog.csdn.net/hb707934728/article/details/78772405
今日推荐
周排行