地日運動模型

• 示例
• HTML
• CSS
• JS

更多有趣示例 盡在 知屋安磚社區

示例

HTML

<canvas id="c"></canvas><div id="ui"></div><script src="https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.min.js"></script> <script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>

CSS

body {margin: 0;color: red;font-family: monospace; } #c {width: 100vw;height: 100vh;display: block; } #ui {position: absolute;right: 1em;top: 1em;background: rgba(64, 64, 64, 0.8);padding: .5em; } #ui .axisgrid {display: flex;align-items: center; } #ui .axisgrid:nth-child(odd) {background: rgba(72, 72, 72, 0.8); } #ui .label {width: 8em;overflow: hidden;text-overflow: ellipsis; } #ui .checkbox {display: flex;align-items: center; }

JS

// Three.js - Scenegraph - Sun Earth // from https://threejsfundamentals.org/threejs/threejs-scenegraph-sun-earth-moon-axes-grids.html'use strict';/* global THREE, dat */function main() {const canvas = document.querySelector('#c');const renderer = new THREE.WebGLRenderer({canvas});const gui = new dat.GUI();const fov = 40;const aspect = 2; // the canvas defaultconst near = 0.1;const far = 1000;const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);camera.position.set(0, 50, 0);camera.up.set(0, 0, 1);camera.lookAt(0, 0, 0);const scene = new THREE.Scene();{const color = 0xFF00FF;const intensity = 3;const light = new THREE.PointLight(color, intensity);scene.add(light);}const objects = [];const radius = 1;const widthSegments = 6;const heightSegments = 6;const sphereGeometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);const solarSystem = new THREE.Object3D();scene.add(solarSystem);objects.push(solarSystem);const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFF00FF});const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);sunMesh.scale.set(5, 5, 5);solarSystem.add(sunMesh);objects.push(sunMesh);const earthOrbit = new THREE.Object3D();earthOrbit.position.x = 10;solarSystem.add(earthOrbit);objects.push(earthOrbit);const earthMaterial = new THREE.MeshPhongMaterial({color: 0x2233FF, emissive: 0x112244});const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);earthOrbit.add(earthMesh);objects.push(earthMesh);const moonOrbit = new THREE.Object3D();moonOrbit.position.x = 2;earthOrbit.add(moonOrbit);const moonMaterial = new THREE.MeshPhongMaterial({color: 0x888888, emissive: 0x222222});const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial);moonMesh.scale.set(.5, .5, .5);moonOrbit.add(moonMesh);objects.push(moonMesh);// Turns both axes and grid visible on/off// dat.GUI requires a property that returns a bool// to decide to make a checkbox so we make a setter// can getter for `visible` which we can tell dat.GUI// to look at.class AxisGridHelper {constructor(node, units = 10) {const axes = new THREE.AxesHelper();axes.material.depthTest = false;axes.renderOrder = 2; // after the gridnode.add(axes);const grid = new THREE.GridHelper(units, units);grid.material.depthTest = false;grid.renderOrder = 1;node.add(grid);this.grid = grid;this.axes = axes;this.visible = true;}get visible() {return this._visible;}set visible(v) {this._visible = v;this.grid.visible = v;this.axes.visible = v;}}function makeAxisGrid(node, label, units) {const helper = new AxisGridHelper(node, units);gui.add(helper, 'visible').name(label);console.log(helper)}makeAxisGrid(solarSystem, 'solarSystem', 26);makeAxisGrid(sunMesh, 'sunMesh');makeAxisGrid(earthOrbit, 'earthOrbit');makeAxisGrid(earthMesh, 'earthMesh');makeAxisGrid(moonMesh, 'moonMesh');function resizeRendererToDisplaySize(renderer) {const canvas = renderer.domElement;const width = canvas.clientWidth;const height = canvas.clientHeight;const needResize = canvas.width !== width || canvas.height !== height;if (needResize) {renderer.setSize(width, height, false);}return needResize;}function render(time) {time *= 0.001;if (resizeRendererToDisplaySize(renderer)) {const canvas = renderer.domElement;camera.aspect = canvas.clientWidth / canvas.clientHeight;camera.updateProjectionMatrix();}objects.forEach((obj) => {obj.rotation.y = time;});renderer.render(scene, camera);requestAnimationFrame(render);}requestAnimationFrame(render); }main();

總結

以上是生活随笔為你收集整理的地日运动模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。