<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.js从入门到精通系列教程042 - 创建两个星体,模拟地球和月亮自转和公转效果</title>
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
//创建渲染器
var myRenderer = new THREE.WebGLRenderer({ antialias: true });
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$("#myContainer").append(myRenderer.domElement);
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
myCamera.position.set(3.9, 60.18, 15.1);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
var myScene = new THREE.Scene();
//创建大球
var mySphereGeometry1 = new THREE.SphereBufferGeometry(10, 26, 26);
var mySphereMaterial1 = new THREE.MeshNormalMaterial({
wireframe: true,
transparent: true
});
var mySphereMesh1 = new THREE.Mesh(mySphereGeometry1, mySphereMaterial1);
myScene.add(mySphereMesh1);
//创建小球
var mySphereGeometry2 = new THREE.SphereBufferGeometry(4, 16, 16);
var mySphereMaterial2 = new THREE.MeshNormalMaterial({
wireframe: true,
transparent: true
});
var mySphereMesh2 = new THREE.Mesh(mySphereGeometry2, mySphereMaterial2);
mySphereMesh2.translateX(26);
//将小球与大球合成一个整体
mySphereMesh1.add(mySphereMesh2);
//渲染大球和小球的旋转
var myStep = 0.01;
animate();
function animate() {
requestAnimationFrame(animate);
//旋转小球与大球这个整体,公转
mySphereMesh1.rotation.y += myStep;
//旋转小球,自转
mySphereMesh2.rotation.y += 2 * myStep;
myRenderer.render(myScene, myCamera);
};
</script>
</body>
</html>
06-28
1226
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交