内容简介：纹理贴图是通过将图像应用到对象的一个或多个面，来为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中纹理格式探究
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Rationality for Mortals
Gerd Gigerenzer / Oxford University Press, USA / 2008-05-02 / USD 65.00
Gerd Gigerenzer's influential work examines the rationality of individuals not from the perspective of logic or probability, but from the point of view of adaptation to the real world of human behavio......一起来看看 《Rationality for Mortals》 这本书的介绍吧!
