<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程031 - 使用线性雾化创建雾化圆球效果</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script type="text/javascript">
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$('#myContainer')[0].appendChild(myRenderer.domElement);
var myScene = new THREE.Scene();
//使用线性雾设置场景的fog雾化属性
myScene.fog = new THREE.Fog(0xffffff, 50, 60);
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 30, 1000);
myCamera.position.set(-55, 17, 31);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
var mySpotLight = new THREE.SpotLight('white');
mySpotLight.position.set(-30, 60, 60);
myScene.add(mySpotLight);
//创建圆球
var myMaterial = new THREE.MeshPhongMaterial({ color: 0x7777ff });
myMaterial.shininess = 100;
var myGeometry = new THREE.SphereGeometry(16, 100, 100);
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
myScene.add(myMesh);
//渲染圆球
myRenderer.render(myScene, myCamera);
</script>
</body>
</html>