<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StaticEnvMap</title>
<script src="../../three-part/threejs/three.js"></script>
<script src="../../three-part/utils/stats.min.js"></script>
<script src="../../three-part/utils/dat.gui.min.js"></script>
<script src="../controls/TrackballControls.js"></script>
<script src="../util/util.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
init();
function init() {
// show FPS
let stats = initStats();
// resize
window.addEventListener('resize', onResize, false);
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 0;
camera.position.y = 20;
camera.position.z = 40;
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById("container").appendChild(renderer.domElement);
// init trackball control
let trackballControls = initTrackballControls(camera, renderer);
let clock = new THREE.Clock();
let cubeTextureLoader = new THREE.CubeTextureLoader();
let textureLoader = new THREE.TextureLoader();
const urls = [
'../assets/textures/cubemap/flowers/right.png',
'../assets/textures/cubemap/flowers/left.png',
'../assets/textures/cubemap/flowers/top.png',
'../assets/textures/cubemap/flowers/bottom.png',
'../assets/textures/cubemap/flowers/front.png',
'../assets/textures/cubemap/flowers/back.png'
];
/**
* CubeTextureLoader.load ( urls : String, onLoad : Function, onProgress : Function, onError : Function ) : CubeTexture
* urls — array of 6 urls to images, one for each side of the CubeTexture.
* The urls should be specified in the following order: pos-x, neg-x, pos-y, neg-y, pos-z, neg-z. They can also be Data URIs.
* Note that, by convention, cube maps are specified in a coordinate system in which positive-x is to the right when
* looking up the positive-z axis -- in other words, using a left-handed coordinate system.
* Since three.js uses a right-handed coordinate system, environment maps used in three.js will have pos-x and neg-x swapped.
* onLoad — Will be called when load completes. The argument will be the loaded texture.
* onProgress — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .total and .loaded bytes.
* onError — Will be called when load errors.
*/
scene.background = cubeTextureLoader.load(urls);
let ambientLight = new THREE.AmbientLight(0x343434);
scene.add(ambientLight);
let spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10, 30, 40);
spotLight.shadow.mapSize.width = 2048;
spotLight.shadow.mapSize.height = 2048;
spotLight.shadow.camera.fov = 15;
spotLight.castShadow = true;
spotLight.decay = 2;
spotLight.penumbra = 0.05;
scene.add(spotLight);
let cubeMaterial = new THREE.MeshStandardMaterial({
envMap: scene.background,
color: 0xffffff,
metalness: 1,
roughness: 0,
});
let cubeGeometry = new THREE.BoxGeometry(10, 10, 10)
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-8, 0, 0);
scene.add(cube);
let sphereMaterial = cubeMaterial.clone();
sphereMaterial.normalMap = textureLoader.load("../assets/textures/engraved/Engraved_Metal_003_NORM.jpg");
sphereMaterial.aoMap = textureLoader.load("../assets/textures/engraved/Engraved_Metal_003_OCC.jpg");
sphereMaterial.roughnessMap = textureLoader.load("../assets/textures/engraved/Engraved_Metal_003_ROUGH.jpg");
let sphereGeometry = new THREE.SphereGeometry(7, 50, 50);
let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(8, 0, 0);
scene.add(sphere);
// attributes which can be modified in GUI
const controls = {
};
// init GUI
initGUI();
renderScene();
function initGUI(){
let gui = new dat.GUI();
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function renderScene(){
trackballControls.update(clock.getDelta());
stats.update();
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
}
</script>
</body>
</html>
运行结果：
网友评论