😃So sánh Mesh với Object3D
https://threejs.org/manual/#en/scenegraph
Tốt hơn nhiều. Trái đất nhỏ hơn mặt trời và nó quay quanh mặt trời và tự quay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="./libs/three.js"></script>
<script type="text/javascript" src="./libs/dat.gui.js"></script>
<title>Threejs</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<script type="module">
function init() {
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 50, 0);
camera.up.set(0, 0, 1);
camera.lookAt(0, 0, 0);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
{
const color = 0xFFFFFF;
const intensity = 3;
const light = new THREE.PointLight(color, intensity);
scene.add(light);
}
// show axes in the screen
var axes = new THREE.AxisHelper(50);
scene.add(axes);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// rotate and position the plane
plane.rotation.x = - Math.PI / 2;
plane.position.x = 30;
plane.position.y = 0;
plane.position.z = 0;
const radius = 1;
const widthSegments = 6;
const heightSegments = 6;
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
const solarSystem = new THREE.Object3D();
scene.add(solarSystem);
const sunMaterial = new THREE.MeshPhongMaterial({ emissive: 0xFFFF00 });
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
sunMesh.scale.set(5, 5, 5);
solarSystem.add(sunMesh);
const earthMaterial = new THREE.MeshPhongMaterial({ color: 0x2233FF, emissive: 0x112244 });
const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
earthMesh.position.x = 10;
solarSystem.add(earthMesh);
// add the plane to the scene
scene.add(plane);
camera.position.x = - 30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
var gui = new dat.GUI();
var controls = new function () {
this.rotationPlan = 0;
this.positionX = 30;
this.positionY = 0;
this.positionZ = 0;
};
gui.add(controls, 'rotationPlan', -6, 6);
gui.add(controls, 'positionX', -30, 30);
gui.add(controls, 'positionY', -40, 40);
gui.add(controls, 'positionZ', -30, 30);
render();
function render() {
plane.rotation.x = controls.rotationPlan;
plane.position.x = controls.positionX;
plane.position.y = controls.positionY;
plane.position.z = controls.positionZ;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
}
init();
</script>
</body>
</html>Last updated