效果图
![](https://img2018.cnblogs.com/blog/1108804/201810/1108804-20181019201432881-789559285.png)
demo
import './index.css';
// stats
var stats;
(function(){
stats = new Stats();
document.body.appendChild( stats.dom );
})();
// gui
var gui;
(function(){
gui = new dat.GUI();
var fn = new function() {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03 ;
}
gui.add(fn,'rotationSpeed', 0, 0.5);
gui.add(fn,'bouncingSpeed', 0, 0.5);
})();
// renderer
var renderer;
(function(){
renderer = new THREE.WebGLRenderer();
renderer.physicallyCorrectLights = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
})();
// scene
var scene;
(function(){
scene = new THREE.Scene();
})();
// 相机
var camera;
(function(){
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.x = -4;
camera.position.z = 4;
camera.position.y = 2;
})();
// controls
(function(){
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
window.addEventListener('resize', function(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}, false);
})();
// 设置光源
var bulbLight;
(function(){
// 创建灯泡
var bulbGeometry = new THREE.SphereBufferGeometry( 0.02, 16, 8 );
bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
var bulbMat = new THREE.MeshStandardMaterial( {
emissive: 0xffffee,
emissiveIntensity: 1,
color: 0x000000
});
bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
bulbLight.position.set( 0, 2, 0 );
bulbLight.castShadow = true;
bulbLight.power = 400;
scene.add( bulbLight );
// 创建球形光源
var hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
scene.add( hemiLight );
})();
// 加载模型
(function(){
// 创建地板
var floorMat = new THREE.MeshStandardMaterial( {
roughness: 0.8,
color: 0xffffff,
metalness: 0.2,
bumpScale: 0.0005
});
var textureLoader = new THREE.TextureLoader();
textureLoader.load( "./static/textures/hardwood2_diffuse.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
floorMat.map = map;
floorMat.needsUpdate = true;
} );
textureLoader.load( "./static/textures/hardwood2_bump.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
floorMat.bumpMap = map;
floorMat.needsUpdate = true;
} );
textureLoader.load( "./static/textures/hardwood2_roughness.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
floorMat.roughnessMap = map;
floorMat.needsUpdate = true;
} );
var floorGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
var floorMesh = new THREE.Mesh( floorGeometry, floorMat );
floorMesh.receiveShadow = true;
floorMesh.rotation.x = -Math.PI / 2.0;
scene.add( floorMesh );
// 创建立方体
var cubeMat = new THREE.MeshStandardMaterial( {
roughness: 0.7,
color: 0xffffff,
bumpScale: 0.002,
metalness: 0.2
});
textureLoader.load( "./static/textures/brick_bump.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
cubeMat.map = map;
cubeMat.needsUpdate = true;
} );
textureLoader.load( "./static/textures/brick_diffuse.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
cubeMat.map = map;
cubeMat.needsUpdate = true;
} );
var boxGeometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
var boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
boxMesh.position.set( -0.5, 0.25, -1 );
boxMesh.castShadow = true;
scene.add( boxMesh );
var boxMesh2 = new THREE.Mesh( boxGeometry, cubeMat );
boxMesh2.position.set( 0, 0.25, -5 );
boxMesh2.castShadow = true;
scene.add( boxMesh2 );
var boxMesh3 = new THREE.Mesh( boxGeometry, cubeMat );
boxMesh3.position.set( 7, 0.25, 0 );
boxMesh3.castShadow = true;
scene.add( boxMesh3 );
// 创建球体
var ballMat = new THREE.MeshStandardMaterial( {
color: 0xffffff,
roughness: 0.5,
metalness: 1.0
});
textureLoader.load( "./static/textures/brick_bump.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
ballMat.map = map;
ballMat.needsUpdate = true;
} );
textureLoader.load( "./static/textures/brick_diffuse.jpg", function( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
ballMat.map = map;
ballMat.needsUpdate = true;
} );
var ballGeometry = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
var ballMesh = new THREE.Mesh( ballGeometry, ballMat );
ballMesh.position.set( 1, 0.5, 1 );
ballMesh.rotation.y = Math.PI;
ballMesh.castShadow = true;
scene.add( ballMesh );
})();
var time;
var animate = function () {
requestAnimationFrame(animate);
time = Date.now() * 0.0005;
bulbLight.position.x = Math.cos( time * 0.3 ) * 5;
bulbLight.position.y = Math.cos( time ) * 0.75 + 1.25;
bulbLight.position.z = Math.cos( time * 0.3 ) * 5;
stats.begin();
renderer.render( scene, camera );
stats.end();
};
animate();