<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>贴图</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="/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="/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>
