var textureLoader = new THREE.TexturenLoader();
var texture = textureLoader.load("../../assets/textures/sss.jpg");
使用THREE.TextureLoader()从指定位置加载图片,图片格式可以是png,jpg或jpeg
var textureLoader = new THREE.TextureLoader();
var texture = textureLoder.load("../../assets/textures/sss.jpg",onloadFunction,onProgressFunction,onErrorFunction);
onloadFunction在纹理加载完成时被调用,onProgressFunction可以随时汇报加载进度,onError在纹理加载出故障时被调用
名称 | 描述 |
---|---|
THREE.NearestFilter(最邻近过滤) | 这个过滤器会将纹理上最近的像素颜色应用于面上。在放大时,会导致方块化,在缩小时,会丢失很多细节 |
THREE.LinearFilter(线性过滤) | 这个过滤器最终的颜色是由周围四个像素值决定的。在缩小时仍会丢失一些细节,但是在放大时会平滑很多,方块化也比较少一些出现 |
也可以使用mipmap。mipmap是把纹理按照2的倍数进行缩小。mipmap纹理过滤模式如下表所示
关于mipmap,https://blog.csdn.net/qq_42428486/article/details/118856697
如果没有设置magFilter和minFilter属性的值。Three.js会将THREE.LinearFilter作为magFilter属性的默认值,将THREE.LinearMipMapLinearFilter作为minFilter属性的默认值。
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name=viewport
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<script type="text/javascript" src="../libs/three/three.js">script>
<script type="text/javascript" src="../libs/three/controls/OrbitControls.js">script>
<script type="text/javascript" src="../libs/util/dat.gui.js">script>
<script type="text/javascript" src="../libs/util/Stats.js">script>
<script type="text/javascript" src="js/basicTexture.js">script>
<script type="text/javascript" src="../js/util.js">script>
<script type="text/javascript" src="js/utils.js">script>
<link rel="stylesheet" href="../css/default.css">
<title>Titletitle>
<style>style>
<script>script>
head>
<body>
<div id="webgl-output">
div>
<script type="text/javascript">
(function() {
draw()
})()
script>
body>
html>
//初始化场景
var scene = new THREE.Scene();
//渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器开启阴影投射
renderer.shadowMap.enabled = true;
document.getElementById("webgl-output").appendChild(renderer.domElement);
//摄像机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(0,20,40);
camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);
//地面
var groundPlane = addLargeGroundPlane(scene);
groundPlane.position.y = -10;
//聚光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10,30,40);
spotLight.shadow.mapSize.width = 20480;
spotLight.shadow.mapSize.height = 20480;
spotLight.shadow.camera.fov = 150;
spotLight.castShadow = true;
spotLight.decay = 2;
spotLight.penumbra = 0.05;
spotLight.name = "spotLight"
scene.add(spotLight);
scene.add(new THREE.AmbientLight(0x444444));
//加载器
var textureLoader = new THREE.TextureLoader();
//法向贴图
var polyhedron = new THREE.BoxGeometry(4,4,4);
var polyheMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("../assets/textures/general/plaster.jpg"),
normalMap: textureLoader.load("../assets/textures/general/plaster-normal.jpg"),
// bumpScale: 15,
// normalScale: 1,
metalness: 0.2,
roughness: 0.07,
});
var polyhedronMesh = new THREE.Mesh(polyhedron,polyheMaterial);
polyheMaterial.normalScale.set(-5,-5);
polyhedronMesh.castShadow = true;
polyhedronMesh.position.x = 10;
polyhedronMesh.position.z =10;
scene.add(polyhedronMesh);
//凹凸贴图
var polyhedron2 = new THREE.BoxGeometry(4,4,4);
var polyheMaterial2 = new THREE.MeshStandardMaterial({
map: textureLoader.load("../assets/textures/stone/stone.jpg"),
bumpMap: textureLoader.load("../assets/textures/stone/stone-bump.jpg"),
metalness: 0.2,
roughness: 0.07,
});
var polyhedronMesh2 = new THREE.Mesh(polyhedron2,polyheMaterial2);
polyhedronMesh2.castShadow = true;
polyhedronMesh2.position.x = 0;
polyhedronMesh2.position.z = 10;
scene.add(polyhedronMesh2);
//移动贴图
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("../assets/textures/w_c.jpg"),
displacementMap: textureLoader.load("../assets/textures/w_d.png"),
metalness: 0.2,
roughness: 0.07,
color: 0xffffff,
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.castShadow = true;
sphere.position.x = -10;
sphere.position.z = 10;
scene.add(sphere);
var stats = new Stats();
document.getElementById("webgl-output").appendChild(stats.domElement);
var bump = new function (){
this.rotationSpeed = 0.02;
this.bumpScale = 1;
this.normalScaleX = 1;
this.normalScaleY = 1;
this.displacementScale = sphereMaterial.displacementScale;
this.displacementBias= sphereMaterial.displacementBias;
}
gui.add(bump,'bumpScale',-1,1,0.001).onChange(function (e){
polyheMaterial2.bumpScale = e;
});
gui.add(bump,'normalScaleX',-3,3,0.001).onChange(function (e){
polyheMaterial.normalScale.set(bump.normalScaleX,bump.normalScaleY);
});
gui.add(bump,'normalScaleY',-3,3,0.001).onChange(function (e){
polyheMaterial.normalScale.set(bump.normalScaleX,bump.normalScaleY);
})
gui.add(bump,'displacementScale',-5,5,0.01).onChange(function(e){
sphereMaterial.displacementScale = e;
});
gui.add(bump,'displacementBias',-5,5,0.01).onChange(function (e){
sphereMaterial.displacementBias = e;
});
var controls = new THREE.OrbitControls( camera, renderer.domElement );
window.addEventListener("resize",OnResize,false);
function OnResize(){
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
render()
function render(){
stats.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
// polyhedronMesh.rotation.y += 0.02;
}
var camera,renderer,scene
function draw(){
//初始化性能插件
var stats = new Stats();
document.getElementById("webgl-output").appendChild(stats.domElement);
//渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器开启阴影投射
renderer.shadowMap.enabled = true;
document.getElementById("webgl-output").appendChild(renderer.domElement);
//摄像机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(0,20,40);
camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);
//交互鼠标控制场景移动旋转
var controls = new THREE.OrbitControls( camera, renderer.domElement );
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = true;
//设置相机距离原点的最远距离
controls.minDistance = 1;
//设置相机距离原点的最远距离
controls.maxDistance = 200;
//是否开启右键拖拽
controls.enablePan = true;
//初始化场景
scene = new THREE.Scene();
//地面
var groundPlane = addLargeGroundPlane(scene);
groundPlane.position.y = -10;
//聚光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10,30,40);
spotLight.shadow.mapSize.width = 20480;
spotLight.shadow.mapSize.height = 20480;
spotLight.shadow.camera.fov = 150;
spotLight.castShadow = true;
spotLight.decay = 2;
spotLight.penumbra = 0.05;
spotLight.name = "spotLight"
scene.add(spotLight);
// initDefaultLighting(scene);
scene.add(new THREE.AmbientLight(0x444444));
//加载器
var textureLoader = new THREE.TextureLoader();
//gui
var gui = new dat.GUI();
//坐标轴
var axes = new THREE.AxesHelper(50);
// scene.add(axes);
//法向贴图
var polyhedron = new THREE.BoxGeometry(4,4,4);
var polyheMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("../assets/textures/general/plaster.jpg"),
normalMap: textureLoader.load("../assets/textures/general/plaster-normal.jpg"),
// bumpScale: 15,
// normalScale: 1,
metalness: 0.2,
roughness: 0.07,
});
var polyhedronMesh = new THREE.Mesh(polyhedron,polyheMaterial);
polyheMaterial.normalScale.set(-5,-5);
polyhedronMesh.castShadow = true;
polyhedronMesh.position.x = 10;
polyhedronMesh.position.z =10;
scene.add(polyhedronMesh);
//凹凸贴图
var polyhedron2 = new THREE.BoxGeometry(4,4,4);
var polyheMaterial2 = new THREE.MeshStandardMaterial({
map: textureLoader.load("../assets/textures/stone/stone.jpg"),
bumpMap: textureLoader.load("../assets/textures/stone/stone-bump.jpg"),
metalness: 0.2,
roughness: 0.07,
});
var polyhedronMesh2 = new THREE.Mesh(polyhedron2,polyheMaterial2);
polyhedronMesh2.castShadow = true;
polyhedronMesh2.position.x = 0;
polyhedronMesh2.position.z = 10;
scene.add(polyhedronMesh2);
//移动贴图
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("../assets/textures/w_c.jpg"),
displacementMap: textureLoader.load("../assets/textures/w_d.png"),
metalness: 0.2,
roughness: 0.07,
color: 0xffffff,
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.castShadow = true;
sphere.position.x = -10;
sphere.position.z = 10;
scene.add(sphere);
var bump = new function (){
this.rotationSpeed = 0.02;
this.bumpScale = 1;
this.normalScaleX = 1;
this.normalScaleY = 1;
this.displacementScale = sphereMaterial.displacementScale;
this.displacementBias= sphereMaterial.displacementBias;
}
gui.add(bump,'bumpScale',-1,1,0.001).onChange(function (e){
polyheMaterial2.bumpScale = e;
});
gui.add(bump,'normalScaleX',-3,3,0.001).onChange(function (e){
polyheMaterial.normalScale.set(bump.normalScaleX,bump.normalScaleY);
});
gui.add(bump,'normalScaleY',-3,3,0.001).onChange(function (e){
polyheMaterial.normalScale.set(bump.normalScaleX,bump.normalScaleY);
})
gui.add(bump,'displacementScale',-5,5,0.01).onChange(function(e){
sphereMaterial.displacementScale = e;
});
gui.add(bump,'displacementBias',-5,5,0.01).onChange(function (e){
sphereMaterial.displacementBias = e;
});
window.addEventListener("resize",OnResize,false);
render()
function render(){
stats.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function OnResize(){
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
}