我已经尝试了一段时间，在我的场景中实现特定的效果。
期望的效果是散景，在ThreeJs样本中，有两个版本的散景可用，在尝试1散景后，我没有得到预期的效果，所以我切换到第二个，我有很难将它应用到我的场景中，因为我无法理解示例源代码，所以我无意知道它是如何工作的。
任何机构都可以给我一个提示或链接到一个好的文档/教程吗？
答案 0 :(得分：0)
我试图说明这个例子：[http://threejs.org/examples/#webgl_postprocessing_dof2][1]
这是我得到的：
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- replace "../../../JS/" in this document by the actual JS library relative root -->
<!-- Tree JS -->
<script src="../../../JS/threeJS/three.min.js"></script>
<script src="../../../JS/threeJS/controls/OrbitControls.js"></script>
<script src="../../../JS/threeJS/loaders/BinaryLoader.js"></script>
<script src="../../../JS/threeJS/Detector.js"></script>
<script src="../../../JS/threeJS/libs/stats.min.js"></script>
<!-- Hypertor JS -->
<script src="../../../JS/hypertorJS/hypertor.js"></script>
<!-- Modifier -->
<script src="../../../JS/threeJS/modifiers/SubdivisionModifier.js"></script>
<!-- Control -->
<script src="../../../JS/threeJS/controls/OrbitControls.js"></script>
<!-- DOF -->
<script src="../../../JS/threeJS/shaders/BokehShader2.js"></script>
<!-- DAT GUI -->
<script src="../../../JS/threeJS/libs/dat.gui.min.js"></script>
<body>
<script>
/////////////
//3D VIEWER//
/////////////
//if WebGL available then proceed to 3D model viewing?
if (Detector.webgl )
{
////////////////////
//environment vars//
////////////////////
var scene, camera, renderer, material_depth;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var postprocessing = {enabled:true};
var shaderSettings = {rings: 3, samples: 4};
/////////
//alias//
/////////
container = document.createElement('div');
document.body.appendChild( container );
init();
animate();
// Sets up the scene.
function init()
{
/////////
//scene//
/////////
scene = new THREE.Scene();
////////////
//renderer//
////////////
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
renderer.shadowMapEnabled = true;
renderer.sortObjects = false;
material_depth = new THREE.MeshDepthMaterial();
container.appendChild(renderer.domElement);
//////////
//camera//
//////////
camera = new THREE.PerspectiveCamera( 60, WIDTH/HEIGHT, 1, 1000 );
camera.position.set(2, 1, 2);
//////////
//lights//
//////////
// Set the background color of the scene.
renderer.setClearColor(0xcccccc, 1);
//ambient
var ambient = new THREE.AmbientLight( 0x999999);
scene.add( ambient );
//point
pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set(0, 0, 2);
scene.add(pointLight);
/////////////
//skySphere//
/////////////
var skySphereGeometry = new THREE.SphereGeometry( 500, 60, 40 );
skySphereGeometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );
var skySphereMaterial = new THREE.MeshBasicMaterial( {map: THREE.ImageUtils.loadTexture( 'textures/yourTexture.jpg' )} );
skySphereMesh = new THREE.Mesh( skySphereGeometry, skySphereMaterial );
scene.add( skySphereMesh );
/////////////
//materials//
/////////////
material = new THREE.MeshPhongMaterial({color:0xffffff*Math.random(), shininess:0.5, specular:0xffffff});
/////////////////
//window resize//
/////////////////
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
//////////
//loader//
//////////
var loader = new THREE.JSONLoader();
loader.load( "obj/yourObject.json", function(geometry)
{
mesh = new THREE.Mesh(geometry, material);
////////////
//position//
////////////
mesh.rotation.set(0, 10, 0, 'XYZ');
mesh.scale.set(35,32,35);
/////////////
//subdivide//
/////////////
var modifier = new THREE.SubdivisionModifier(1);
modifier.modify(geometry);
//////////
//shadow//
//////////
mesh.castShadow = true;
mesh.receiveShadow = true;
////////////
//add mesh//
////////////
scene.add(mesh);
//re color test
//mesh.material.color.setHex(0xf2a0dc);
//mesh.material.ambient.setHex(0xf2a0dc);
});
initPostprocessing();
renderer.autoClear = false;
///////////
//control//
///////////
controls = new THREE.OrbitControls( camera );
controls.damping = 5;
controls.minDistance = 2;
controls.maxDistance = 5;
controls.addEventListener( 'change', render );
}
function initPostprocessing()
{
if(postprocessing.enabled)
{
postprocessing.scene = new THREE.Scene();
//postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
//postprocessing.camera.position.z = 100;
postprocessing.camera = new THREE.PerspectiveCamera( 60, WIDTH/HEIGHT, 1, 1000 );
postprocessing.camera.position.set(2, 1, 2);
postprocessing.scene.add( postprocessing.camera );
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, HEIGHT, pars );
postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, HEIGHT, pars );
var bokeh_shader = THREE.BokehShader;
postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
postprocessing.bokeh_uniforms[ "tColor" ].value = postprocessing.rtTextureColor;
postprocessing.bokeh_uniforms[ "tDepth" ].value = postprocessing.rtTextureDepth;
postprocessing.bokeh_uniforms[ "textureWidth" ].value = window.innerWidth;
postprocessing.bokeh_uniforms[ "textureHeight" ].value = HEIGHT;
postprocessing.materialBokeh = new THREE.ShaderMaterial({uniforms: postprocessing.bokeh_uniforms, vertexShader: bokeh_shader.vertexShader, fragmentShader: bokeh_shader.fragmentShader, defines: { RINGS: shaderSettings.rings, SAMPLES: shaderSettings.samples } } );
postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
postprocessing.quad.position.z = - 500;
postprocessing.scene.add( postprocessing.quad );
}
}
///////////
//animate//
///////////
function animate()
{
requestAnimationFrame(animate, renderer.domElement);
render();
controls.update();
}
//////////////////
//render refresh//
//////////////////
function render()
{
if ( postprocessing.enabled )
{
renderer.clear();
// Render scene into texture
scene.overrideMaterial = null;
renderer.render( scene, camera, postprocessing.rtTextureColor, true );
// Render depth into texture
scene.overrideMaterial = material_depth;
renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
// Render bokeh composite
renderer.render( postprocessing.scene, postprocessing.camera );
}
else
{
scene.overrideMaterial = null;
renderer.clear();
renderer.render( scene, camera );
}
}
}
//otherwise, proceed to alternative
else
{
alert('webGL is unfortunately not available');
}
</script>
</body>
</html>