<!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.SphereBufferGeometry(34, 50, 50);
var textureLoader = new THREE.TextureLoader(); // 纹理加载器
var texture = textureLoader.load('./img/Earth.png'); // 加载图片,返回Texture对象
var material = new THREE.MeshBasicMaterial({
map: texture, // 设置贴图
});
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
//3 相机
camera.position.set(20, 30, 40); //相机位置
camera.lookAt(new THREE.Vector3(0, 0, 0))
// 鼠标控件
var controls = new THREE.OrbitControls(camera, render.domElement);
render.domElement.removeAttribute('tabindex'); //去除白框-鼠标使用时
// 坐标轴
var axisHelper = new THREE.AxisHelper(100);
scene.add(axisHelper)
/*********/
//4 动画 自我调用
//4.1 函数动画
function animate(){
<!-- texture.offset.x -= 0.006//数越大越快 -->
sphere.rotation.y += 0.03;
render.render(scene, camera);
window.requestAnimationFrame(animate);
}
//4.2 调用函数
animate();
</script>
</body>
</html>
Threejs_纹理_earth
最新推荐文章于 2024-06-19 16:06:13 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)