内容简介:纹理贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法。可以使用TextureLoader类的load方法来加载纹理实现效果如下:
纹理贴图的应用以及实现一个太阳系的自转公转
点击查看demo演示
demo地址: https://nsytsqdtn.github.io/d...
three.js中的纹理
纹理贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法。
可以使用TextureLoader类的load方法来加载纹理
function loadImgTexture(){ var loader = new THREE.TextureLoader(); loader.load("metal-rust.jpg",function(texture){ var geometry = new THREE.BoxGeometry(10,10,10); var material = new THREE.MeshBasicMaterial({color:0x739783,map:texture}); mesh = new THREE.Mesh(geometry,material); scene.add(mesh); }) }
实现效果如下:
八大行星的贴图资源网上到处都可以找到,这里给一个还不错的地址:
https://tieba.baidu.com/p/487...完整太阳系代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src="../../Import/three.js"></script> <script src="../../Import/stats.js"></script> <script src="../../Import/Setting.js"></script> <script src="../../Import/OrbitControls.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 850px; background-color: #333333; } </style> </head> <body onload="threeStart()"> <script> let renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width,height); document.getElementById("canvas-frame").appendChild(renderer.domElement); renderer.setClearColor(0x333333, 1.0); } let camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); camera.position.x = 0; camera.position.y = 500; camera.position.z = 2000; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookAt(0,0,0); } let scene; function initScene() { scene = new THREE.Scene(); let bgTexture = new THREE.TextureLoader().load("../../Image/universe.jpg");//背景贴图 scene.background = bgTexture;//把场景的背景设置为一张图片 } let light; function initLight() { light = new THREE.PointLight(0xffffff,1);//点光源,模拟太阳 light.position.set(0,0,0); scene.add(light); light = new THREE.AmbientLight(0xffffff,0.3);//环境光 scene.add(light); } let sun; let earth; let tuxing; let shuixing; let jinxing; let huoxing; let muxing; let tianwangxing; let haiwangxing; function initObject() { let geometry = new THREE.SphereGeometry(15, 50, 50); let texture = THREE.ImageUtils.loadTexture("../../Image/shuixing.jpg");//定义一个贴图,并从本地文件中加载 let material = new THREE.MeshBasicMaterial({map:texture});//把上面定义的texture设置为星球的纹理材质 shuixing = new THREE.Mesh(geometry,material); shuixing.position.set(0,0,150);//3 scene.add(shuixing); geometry = new THREE.SphereGeometry(25, 50, 50); texture = THREE.ImageUtils.loadTexture("../../Image/jinxing.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); jinxing = new THREE.Mesh(geometry,material); jinxing.position.set(0,0,200);//4 scene.add(jinxing); geometry = new THREE.SphereGeometry(30, 50, 50); texture = THREE.ImageUtils.loadTexture("../../Image/earth.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); earth = new THREE.Mesh(geometry,material); earth.position.set(0,0,300);//6 scene.add(earth); geometry = new THREE.SphereGeometry(20, 50, 50); texture = THREE.ImageUtils.loadTexture("../../Image/huoxing.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); huoxing = new THREE.Mesh(geometry,material); huoxing.position.set(0,0,400);//8 scene.add(huoxing); geometry = new THREE.SphereGeometry(65, 50, 50); texture = THREE.ImageUtils.loadTexture("../../Image/muxing.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); muxing = new THREE.Mesh(geometry,material); muxing.position.set(0,0,600);//500 12 scene.add(muxing); geometry = new THREE.TorusGeometry(80,6,20,20); texture = THREE.ImageUtils.loadTexture("../../Image/muxinghuan.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); let muxinghuan = new THREE.Mesh(geometry,material); muxinghuan.rotation.x = 1.4;//木星环 muxing.add(muxinghuan); geometry = new THREE.SphereGeometry(55, 50, 50); texture = THREE.ImageUtils.loadTexture("../../Image/tuxing.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); tuxing = new THREE.Mesh(geometry,material); tuxing.position.set(0,0,800);//16 scene.add(tuxing); geometry = new THREE.TorusGeometry(65,8,20,20); texture = THREE.ImageUtils.loadTexture("../../Image/tuxinghuan.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); let tuxinghuan = new THREE.Mesh(geometry,material); tuxinghuan.rotation.x = 1.4; tuxing.add(tuxinghuan); geometry = new THREE.SphereGeometry(45, 50, 50); texture = THREE.ImageUtils.loadTexture("../../Image/tianwangxing.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); tianwangxing = new THREE.Mesh(geometry,material); tianwangxing.position.set(0,0,950);//19 scene.add(tianwangxing); geometry = new THREE.SphereGeometry(40, 50, 50); texture = THREE.ImageUtils.loadTexture("../../Image/haiwangxing.jpg"); material = new THREE.MeshBasicMaterial({map:texture}); haiwangxing = new THREE.Mesh(geometry,material); haiwangxing.position.set(0,0,1100);//22 scene.add(haiwangxing); geometry = new THREE.SphereGeometry(120, 50, 50); texture = THREE.ImageUtils.loadTexture("../../Image/sun.jpg"); material = new THREE.MeshBasicMaterial({map:texture, emissive: 0xffffff,side: THREE.DoubleSide,}); sun = new THREE.Mesh(geometry,material); sun.position.set(0,0,0); scene.add(sun); //在太阳外面设置一层透明的罩,看上去更像太阳 let canvas = document.createElement( 'canvas' ); canvas.width = 256; canvas.height = 256; let context = canvas.getContext( '2d' ); let gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );//创建一个圆形渐变对象 gradient.addColorStop( 0.1, 'rgba(255,60,0,0.01)' );//内圈的颜色 gradient.addColorStop( 1, 'rgba(255,125,0,0.5)' );//最外面的颜色 context.fillStyle = gradient; context.fillRect( 0, 0, canvas.width, canvas.height );//将一个画布使用圆形渐变对象进行填充 let shadowTexture = new THREE.CanvasTexture( canvas );//把刚刚画好的画布拿来作为画布贴图 let shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture,transparent:true } );//用此贴图来当材质 let shadowGeo = new THREE.SphereGeometry( 130,50,50); let shadowMesh; shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial ); shadowMesh.position.y = 0; shadowMesh.position.x = 0; sun.add( shadowMesh ); //画线,把太阳系每个星球运行轨迹画出来 for(let j=3;j<=22;j++) { if (j==3||j==4||j==6||j==8||j==12||j==16||j==19||j==22){ let radius = 50 * j; let lineGeometry2 = new THREE.Geometry(); for (let i = 0; i <= 2 * Math.PI; i += Math.PI / 30) { lineGeometry2.vertices.push(new THREE.Vector3(radius * Math.cos(i), 0, radius * Math.sin(i), 0)) } let material2 = new THREE.LineBasicMaterial({color: 0x8f6cab}) let cycleMesh = new THREE.Line(lineGeometry2, material2); cycleMesh.position.set(0, 0, 0); scene.add(cycleMesh); } } } //每个星球的自转函数 function zizhuan() { sun.rotation.y = sun.rotation.y+0.008>=2*Math.PI?0:sun.rotation.y+0.008; shuixing.rotation.y = shuixing.rotation.y+0.005>=2*Math.PI?0:shuixing.rotation.y+0.005; jinxing.rotation.y = jinxing.rotation.y+0.003>=0?2*Math.PI:jinxing.rotation.y+0.003; earth.rotation.y = earth.rotation.y+0.012>=2*Math.PI?0:earth.rotation.y+0.012; huoxing.rotation.y = huoxing.rotation.y+0.01>=2*Math.PI?0:huoxing.rotation.y+0.01; tuxing.rotation.y = tuxing.rotation.y+0.04>=2*Math.PI?0:tuxing.rotation.y+0.06; muxing.rotation.y = muxing.rotation.y+0.03>=2*Math.PI?0:muxing.rotation.y+0.08; tianwangxing.rotation.z = tianwangxing.rotation.z+0.015>=2*Math.PI?0:tianwangxing.rotation.z+0.015; haiwangxing.rotation.y = haiwangxing.rotation.y+0.02>=2*Math.PI?0:haiwangxing.rotation.y+0.02; } let shuixingAngle = 0; let jinxingAngle = 0; let earthAngle = 0; let huoxingAngle = 0; let tuxingAngle = 0; let muxingAngle = 0; let tianwangxingAngle = 0; let haiwangxingAngle = 0; //每个星球的公转函数 function gongzhuan() { shuixingAngle = shuixingAngle+0.03>=2*Math.PI?0:shuixingAngle +0.03; shuixing.position.set(150*Math.sin(shuixingAngle) ,0,150*Math.cos(shuixingAngle)); jinxingAngle = jinxingAngle-0.02>=0?2*Math.PI:jinxingAngle -0.02; jinxing.position.set(200*Math.sin(jinxingAngle) ,0,200*Math.cos(jinxingAngle)); earthAngle = earthAngle+0.015>=2*Math.PI?0:earthAngle +0.015; earth.position.set(300*Math.sin(earthAngle) ,0,300*Math.cos(earthAngle)); huoxingAngle = huoxingAngle+0.01>=2*Math.PI?0:huoxingAngle +0.01; huoxing.position.set(400*Math.sin(huoxingAngle) ,0,400*Math.cos(huoxingAngle)); muxingAngle = muxingAngle+0.006>=2*Math.PI?0:muxingAngle +0.006; muxing.position.set(600*Math.sin(muxingAngle) ,0,600*Math.cos(muxingAngle)); tuxingAngle = tuxingAngle+0.004>=2*Math.PI?0:tuxingAngle +0.004; tuxing.position.set(800*Math.sin(tuxingAngle) ,0,800*Math.cos(tuxingAngle)); tianwangxingAngle = tianwangxingAngle+0.003>=2*Math.PI?0:tianwangxingAngle +0.003; tianwangxing.position.set(950*Math.sin(tianwangxingAngle) ,0,950*Math.cos(tianwangxingAngle)); haiwangxingAngle = haiwangxingAngle+0.002>=2*Math.PI?0:haiwangxingAngle +0.002; haiwangxing.position.set(1100*Math.sin(haiwangxingAngle) ,0,1100*Math.cos(haiwangxingAngle)); } function initSetting() { loadAutoScreen(camera,renderer); loadFullScreen(); loadStats(); } let controller; function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); initSetting(); controller = new THREE.OrbitControls(camera,renderer.domElement); controller.target = new THREE.Vector3(0,0,0); controller.autoRotate = true; animation(); } function animation() { zizhuan(); gongzhuan(); renderer.clear(); renderer.render(scene,camera); requestAnimationFrame(animation); stats.update(); } </script> <div id="canvas-frame"></div> </body> </html>
注意从本地读取图片或者其他文件时,浏览器一般是不允许的,所以会出现加载不了纹理或者背景图片的情况,只能在Chrome浏览器的属性--目标的最后,加上 --allow-file-access-from-files(前面有一个空格),就可以从这个打开的快捷方式中去读取到本地文件,如果是Edge浏览器似乎就直接可以。也可以使用npm或者tomcat搭建一个本地服务器,然后把图片放进去就可以直接读取了。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Ghost配置6——首页太阳系动画效果
- OpenGL ES 入门之旅 -- GLSL纹理单元和纹理翻转解决策略
- OpenGL ES入门: 渲染金字塔 - 颜色、纹理、纹理与颜色混合填充以及GLKit实现
- WebGL 纹理详解
- WebGL 纹理颜色原理
- Unity中纹理格式探究
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据挖掘概念与技术
(加)Jiawei Han;Micheline Kamber / 范明、孟小峰 / 机械工业 / 2007-3 / 55.00元
《数据挖掘概念与技术(原书第2版)》全面地讲述数据挖掘领域的重要知识和技术创新。在第1版内容相当全面的基础上,第2版展示了该领域的最新研究成果,例如挖掘流、时序和序列数据以及挖掘时间空间、多媒体、文本和Web数据。本书可作为数据挖掘和知识发现领域的教师、研究人员和开发人员的一本必读书。 《数据挖掘概念与技术(原书第2版)》第1版曾是受读者欢迎的数据挖掘专著,是一本可读性极佳的教材。第2版充实了数据......一起来看看 《数据挖掘概念与技术》 这本书的介绍吧!