WebGL three.js学习笔记纹理贴图模拟太阳系运转

纹理贴图的应用以及实现一个太阳系的自转公转

点击查看demo演示

demo地址：https://nsytsqdtn.github.io/demo/solar/solar

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/4876471245?red_tag=3235237836

完整太阳系代码：

<!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);//3scene.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);//4scene.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);//6scene.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);//8scene.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 12scene.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);//16scene.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);//19scene.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);//22scene.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搭建一个本地服务器，然后把图片放进去就可以直接读取了。

WebGL three.js学习笔记纹理贴图模拟太阳系运转相关推荐

WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
dx12 龙书第九章学习笔记 -- 纹理贴图
1.纹理与资源的回顾我们其实很早就接触过纹理了,之前的深度缓冲区与后台缓冲区,它们都是通过ID3D12Resource接口表示,并以D3D12_RESOURCE_DESC::Dimension成员中 ...
OpenGL学习笔记——纹理贴图
简单地说,纹理就是矩形的数据数组.例如,颜色数据.亮度数据.颜色和alpha数据.纹理数组中的单个值常常称为纹理单元(texel).纹理贴图之所以复杂,是因为矩形的纹理可以映射到非矩形的区域,并且必须 ...
three.js学习笔记(十八)——调整材质
介绍到现在为止,我们都在创建新的着色器材质,但是如果我们想要修改一个Three.js内置的材质呢?或许我们对MeshStandardMaterial的处理结果感到满意,但是希望往里边添加顶点动画. ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
JS学习笔记——入门基础知识总结
JS入门基础知识总结1 前言基础背景知识一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式一.行内式(了解即可,项目中不使用,日常练习尽 ...
nest.js学习笔记（一）
nest.js学习笔记(一) 一.安装nest.js 前置条件运行项目目录介绍二.nest.js cli 常用命令三.RESTful 风格设计 1.接口url 2.RESTful 版本控制四 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...

WebGL three.js学习笔记纹理贴图模拟太阳系运转

纹理贴图的应用以及实现一个太阳系的自转公转

点击查看demo演示

demo地址：https://nsytsqdtn.github.io/demo/solar/solar

three.js中的纹理

WebGL three.js学习笔记纹理贴图模拟太阳系运转相关推荐

最新文章

热门文章

WebGL three.js学习笔记 纹理贴图模拟太阳系运转

纹理贴图的应用以及实现一个太阳系的自转公转

点击查看demo演示

demo地址：https://nsytsqdtn.github.io/demo/solar/solar

three.js中的纹理

WebGL three.js学习笔记 纹理贴图模拟太阳系运转相关推荐

最新文章

热门文章

WebGL three.js学习笔记纹理贴图模拟太阳系运转

WebGL three.js学习笔记纹理贴图模拟太阳系运转相关推荐