不说其他的，直接上源码。
<canvas id=\"大众canvas\"大众></canvas>
css代码：
html, body {
margin: 0;
overflow: hidden;
}
javascript代码：
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
var canvas = document.getElementById('canvas'),
renderer = new THREE.WebGLRenderer({canvas : canvas, alpha: false, antialias: false}),
WIDTH = document.documentElement.clientWidth,
HEIGHT = document.documentElement.clientHeight;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(WIDTH, HEIGHT);
var camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, .1, 100);
camera.position.z = 10;
camera.position.x = 2;
camera.position.y = 2;
scene.add(camera);
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = .25;
controls.enableZoom = true;
controls.autoRotate = false;
controls.autoRotateSpeed = 5.0;
controls.minDistance = 4;
controls.maxDistance = 20;
controls.minPolarAngle = 0;
controls.maxPolarAngle = 1.5;
scene.fog = new THREE.Fog(0x000000, 5, 50);
window.addEventListener('resize', function() {
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH,HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
pass2.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight);
});
var ambiantlight = new THREE.AmbientLight( 0xffffff, .3 );
scene.add( ambiantlight );
var light = new THREE.SpotLight(0xffffff, .3);
light.position.set( 30, 30, 20 );
light.castShadow = true;
light.penumbra = 1;
scene.add( light );
var light2 = new THREE.SpotLight(0xffffff, .5);
light2.position.set( -20, 10, 20 );
light2.castShadow = true;
light2.penumbra = 1;
scene.add( light2 );
var geometry = new THREE.PlaneGeometry(100,100);
var material = new THREE.MeshStandardMaterial( {color: 0x9e9e9e, roughness: 1.0} );
var plane = new THREE.Mesh( geometry, material );
plane.rotation.x = degToRad(-90);
plane.position.y = -2;
plane.receiveShadow = true;
scene.add( plane );
var geometry = new THREE.TorusKnotGeometry(1,.5,256,64 );
var material = new THREE.MeshStandardMaterial( {
map: null,
color: 0xffffff,
metalness: 0.0,
roughness: 0.0
} );
var torusKnot = new THREE.Mesh( geometry, material );
torusKnot.castShadow = true;
scene.add( torusKnot );
var composer = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
var pass1 = new THREE.ShaderPass(THREE.ColorCorrectionShader);
composer.addPass(pass1);
var pass2;
console.log(window.devicePixelRatio);
pass2 = new THREE.ShaderPass(THREE.FXAAShader);
pass2.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
pass2.renderToScreen = true;
composer.setSize(window.innerWidth, window.innerHeight);
composer.addPass(pass2);
camera.lookAt( scene.position );
animate();
function animate() {
controls.update();
requestAnimationFrame( animate );
//renderer.render(scene, camera);
composer.render();
torusKnot.rotation.x += .01;
torusKnot.rotation.y += .01;
}
function degToRad(deg) {
return deg Math.PI / 180;
}
文章分享到末了小编推举一下我的前端学习群：611256580，里面都是学习前真个，如果你想制作酷炫的殊效，想学习前端知识，小编欢迎你的加入。小编会在群中不定期分享干货源码，包括我精心整理的一份前端教程。欢迎各位感兴趣的的小伙伴。
