<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DynamicEnvMap</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'
];
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);
/**
* CubeCamera( near : Number, far : Number, cubeResolution : Number, options : Object )
* near -- The near clipping distance.
* far -- The far clipping distance
* cubeResolution -- Sets the length of the cube's edges.
* options -- (optional) object that holds texture parameters passed to the auto-generated WebGLRenderTargetCube.
* @type {CubeCamera}
*/
let cubeCamera = new THREE.CubeCamera(0.1, 300, 512);
scene.add(cubeCamera);
let cubeMaterial = new THREE.MeshStandardMaterial({
envMap: scene.background,
color: 0xffffff,
metalness: 1,
roughness: 0,
});
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 cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-10, 10, 0);
scene.add(cube);
let sphereGeometry = new THREE.SphereGeometry(7, 50, 50);
let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(20, 10, 0);
scene.add(sphere);
cubeCamera.position.copy(cube.position);
cubeMaterial.envMap = cubeCamera.renderTarget.texture;
// 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();
cubeCamera.update(renderer, scene);
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
cube.rotation.y += 0.01;
sphere.rotation.y -= 0.01;
}
}
</script>
</body>
</html>
運行結果：
