<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程036 - 创建HemisphereLight半球光光源和辅助线</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setSize(window.innerWidth, window.innerHeight);
$("#myContainer").append(myRenderer.domElement);
var myScene = new THREE.Scene();
myScene.background = new THREE.Color('white');
var myCamera = new THREE.PerspectiveCamera(75,
window.innerWidth / window.innerHeight, 0.1, 1000);
myCamera.position.set(-131.98, 189.53, 119.55);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
//创建并添加红蓝配置的半球光源
//即指定接收自天空的颜色,接收自地面的颜色,及光照强度
var myHemisphereLight = new THREE.HemisphereLight('red', 'blue', 1);
myHemisphereLight.position.set(0, -100, -100);
myScene.add(myHemisphereLight);
//绘制半球光源辅助线
var myHemisphereLightHelper =
new THREE.HemisphereLightHelper(myHemisphereLight, 100, 'red');
myScene.add(myHemisphereLightHelper);
//创建球体
var myGeometry = new THREE.SphereGeometry(60, 40, 40);
var myMap = THREE.ImageUtils.loadTexture("images/img007.jpg");
var myMaterial = new THREE.MeshPhongMaterial({ map: myMap });
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
myMesh.position.set(0, 90, 100);
myScene.add(myMesh);
//渲染图形
animate();
function animate() {
requestAnimationFrame(animate);
myMesh.rotation.x += 0.01;
myMesh.rotation.y += 0.01;
myMesh.rotation.z += 0.01;
myRenderer.render(myScene, myCamera);
};
</script>
</body>
</html>
three.js从入门到精通系列教程036 - 创建HemisphereLight半球光光源和辅助线
最新推荐文章于 2024-03-31 19:12:48 发布