Threejs_纹理_earth

最新推荐文章于 2024-06-19 16:06:13 发布

风雨飘摇中的石头

最新推荐文章于 2024-06-19 16:06:13 发布

阅读量170

点赞数

文章标签： 3d 贴图

本文链接：https://blog.csdn.net/ydk001001/article/details/122809488

版权

这篇博客展示了如何利用Three.js库创建一个3D地球模型，并通过SphereBufferGeometry、TextureLoader和MeshBasicMaterial添加地球贴图。博客中还引入了OrbitControls实现鼠标控制，使得用户可以全方位查看旋转的地球。此外，代码还隐藏了body的滚动条并设置了渲染器的像素比和尺寸。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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

风雨飘摇中的石头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Threejs_纹理_earth

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>贴图</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style> <!--引入three.
复制链接

扫一扫