Threejs_纹理

<!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相关推荐

CUDA C 纹理提取Texture Fetching
CUDA C 纹理提取Texture Fetching 一．参数曲面的纹理使用纹理指定参数曲面属性. 二．CUDA C 纹理获取开发用于计算纹理函数,根据纹理引用的各种属性返回的值的公式(请参见纹 ...
虚拟纹理与几何图像技术
虚拟纹理与几何图像技术一．基本图形学概念图1. 几何与纹理. 曲面一般表示成三角网格和纹理图像,三角网格表示曲面的几何拓扑信息,纹理图像给出曲面的颜色材质等信息.将三角网格映射到平面区域的过程被 ...
基于颜色特征，形状特征和纹理特征的数字图像的检索（Digital Image Retrieval）MATLAB GUI实现
** 数字图像的检索下载地址:代码.数据集下载地址如需论文请联系:hqucuihao@163.com ** 1. 摘要随着互联网发展的日新月异,人们对于信息的需求不再是简单的文字,大量的图像.语 ...
基于颜色特征，形状特征和纹理特征的数字图像的检索（Digital Image Retrieval）MATLAB GUI实现（本科毕业设计）
该程序实现的功能为:检索出指定的图像文件,并从检索出的图像中检索出指定的物体 . 1,主程序为Recognition和Recognition. 2.颜色特征,形状特征,纹理特征为对应的各子程序. 3. ...
CS131专题-8：图像纹理
目录 1 什么是图像纹理 1.1 不规则纹理 1.2 规则纹理 2 纹理描述(提取方法) 3 纹理滤波器组 4 一些滤波器提取的纹理效果 5 使用高维向量描述纹理 6 图像纹理提取的应用应用1:图像 ...
Open3DGen：从RGB-D图像重建纹理3D模型的开源软件
点云PCL免费知识星球,点云论文速读. 文章:Open3DGen: Open-Source Software for Reconstructing Textured 3D Models from RG ...
OpenGL如何处理多个纹理
在主程序中我们先设置3个采样器名称 pbrShader.use();pbrShader.setInt("irradianceMap", 0);pbrShader.setInt(&q ...
解决Qt+OpenGL更换图像纹理的问题
2020.2.5 疫情持续蔓延,在家无聊便解决标题所述问题. 若纹理加载是initializeGL()中,而在QtOpenGL的initializeGL()在程序运行时只运行一次,如果我的图像是通过上 ...
Learn OpenGL （四）：纹理
为了能够把纹理映射(Map)到三角形上,我们需要指定三角形的每个顶点各自对应纹理的哪个部分.这样每个顶点就会关联着一个纹理坐标(Texture Coordinate),用来标明该从纹理图像的哪个部分采 ...

Threejs_纹理_earth

Threejs_纹理_earth相关推荐

最新文章

热门文章