js로 렌더링 어케 하나요?

Question

고등학교 프로그래밍 동아리 연말 과제물로 간단한 프로젝트를 제출해야 하는데, 저희 팀은 물리와 연계해서 중력을 시뮬레이션하는 프로젝트를 기획했습니다. 깃허브나 스택오버플로우를 통해서 다른 개발자 분들의 코드를 참고하여 개발을 진행하려고 했습니다. 참고한 개발자 분은 이분입니다: https://evan-moon.github.io/2017/05/06/gravity-via-js-2/저희 팀에 프로그래밍을 전문적으로 할 수 있는 부원이 한 명도 없어서 다들 기초적인 수준에 머물러 있습니다. 그래서 모듈화된 함수를 불러 오는 법은 몰라서 그냥 한 파일 안에 깃허브에서 받은 저 프로젝트(https://github.com/evan-moon/3d-gravity-test) 안에 모든 파일을 일단 한 파일 안에 집어넣고 새로 객체 생성해서 렌더링하는 계획으로 구상했습니다. 문제는, 저희중에서 정작 디스플레이를 띄워서 시뮬레이션을 구현할 수 있는 법을 아는 부원이 없어요;물체를 올바르게 생성이 되서 저희가 생각한 방식대로 올바르게 작동하는지 다 디스플레이가 되야 아는데 도와주실 분 계시나요. import javax.swing.*; import java.awt.Dimension; import java.awt.Toolkit; import { Vector3 } from 'three'; export default { calcG(o1, o2, G) { let force = new Vector3().subVectors(o1.location, o2.location); let distance = Math.sqrt(force.length() ** 2); force = force.normalize(); const strength = -(G * o1.mass * o2.mass) / (distance ** 2); force = force.multiplyScalar(strength); return force; } } import { SPHERE_SIDES, MASS_FACTOR } from '../constants'; import { Vector3, SphereGeometry, Line, MeshPhongMaterial, PointLight, Mesh, Geometry } from 'three'; import { darken } from '../algorithm/color.algorithm'; import Gravity from '../algorithm/gravity.algorithm'; export class Mover { constructor(mass, velocity, location, id, scene) { this.uid = `mover-${id}`; this.location = location; this.velocity = velocity; this.acceleration = new Vector3(0.0, 0.0, 0.0); this.mass = mass; this.alive = true; this.geometry = new SphereGeometry(100, SPHERE_SIDES, SPHERE_SIDES); this.vertices = []; this.line = new Line(); this.color = this.line.material.color; this.basicMaterial = new MeshPhongMaterial({ color: this.color, specular: this.color, shininess: 10 }); this.selectionLight = new PointLight(this.color, 0.1); this.selectionLight.position.copy(this.location); this.mesh = new Mesh(this.geometry, this.basicMaterial); this.mesh.castShadow = false; this.mesh.receiveShadow = true; this.position = this.location; this.parentScene = scene; } addMover() { this.parentScene.add(this.mesh); this.parentScene.add(this.selectionLight); this.parentScene.add(this.line); } applyForce(force) { if(!this.mass) this.mass = 1.0; const f = force.divideScalar(this.mass); this.acceleration.add(f); } update() { this.velocity.add(this.acceleration); this.location.add(this.velocity); this.acceleration.multiplyScalar(0); this.selectionLight.position.copy(this.location); this.mesh.position.copy(this.location); if(this.vertices.length > 10000) this.vertices.splice(0, 1); this.vertices.push(this.location.clone()); } attract(otherMover, options) { const force = Gravity.calcG(this, otherMover, options.G); this.applyForce(force); } kill() { this.alive = false; this.selectionLight.intensity = 0; this.parentScene.remove(this.mesh); } display(totalMass) { if(this.alive) { const scale = (this.mass * MASS_FACTOR / (4 * Math.PI)) ** (1/3); this.mesh.scale.x = scale; this.mesh.scale.y = scale; this.mesh.scale.z = scale; this.selectionLight.intensity = 2 * this.mass / totalMass; let emissiveColor = this.color.getHex().toString(16); emissiveColor = darken(emissiveColor, -1 + this.mass / totalMass); this.basicMaterial.emissive.setHex(parseInt(emissiveColor, 16)); } else { this.selectionLight.intensity = 0; } } showTrace(TRAILS_LENGTH) { this.parentScene.remove(this.line); let geometry = new Geometry(); geometry.vertices = this.vertices.slice(); geometry.verticesNeedUpdate = true; if(!this.alive) this.vertices.shift(); while(geometry.vertices.length > parseInt(TRAILS_LENGTH)) { geometry.vertices.shift(); } this.line = new Line(geometry, this.line.material); this.parentScene.add(this.line); } } import { SPHERE_SIDES, MASS_FACTOR } from '../constants'; import { Vector3, SphereGeometry, Line, MeshPhongMaterial, PointLight, Mesh, Geometry } from 'three'; import { darken } from '../algorithm/color.algorithm'; import Gravity from '../algorithm/gravity.algorithm'; export class Mover { constructor(mass, velocity, location, id, scene) { this.uid = `mover-${id}`; this.location = location; this.velocity = velocity; this.acceleration = new Vector3(0.0, 0.0, 0.0); this.mass = mass; this.alive = true; this.geometry = new SphereGeometry(100, SPHERE_SIDES, SPHERE_SIDES); this.vertices = []; this.line = new Line(); this.color = this.line.material.color; this.basicMaterial = new MeshPhongMaterial({ color: this.color, specular: this.color, shininess: 10 }); this.selectionLight = new PointLight(this.color, 0.1); this.selectionLight.position.copy(this.location); this.mesh = new Mesh(this.geometry, this.basicMaterial); this.mesh.castShadow = false; this.mesh.receiveShadow = true; this.position = this.location; this.parentScene = scene; } addMover() { this.parentScene.add(this.mesh); this.parentScene.add(this.selectionLight); this.parentScene.add(this.line); } applyForce(force) { if(!this.mass) this.mass = 1.0; const f = force.divideScalar(this.mass); this.acceleration.add(f); } update() { this.velocity.add(this.acceleration); this.location.add(this.velocity); this.acceleration.multiplyScalar(0); this.selectionLight.position.copy(this.location); this.mesh.position.copy(this.location); if(this.vertices.length > 10000) this.vertices.splice(0, 1); this.vertices.push(this.location.clone()); } eat(otherMover) { const newMass = this.mass + otherMover.mass; const newLocation = new Vector3( (this.location.x * this.mass + otherMover.location.x * otherMover.mass) / newMass, (this.location.y * this.mass + otherMover.location.y * otherMover.mass) / newMass, (this.location.z * this.mass + otherMover.location.z * otherMover.mass) / newMass ); const newVelocity = new Vector3( (this.velocity.x * this.mass + otherMover.velocity.x * otherMover.mass) / newMass, (this.velocity.y * this.mass + otherMover.velocity.y * otherMover.mass) / newMass, (this.velocity.z * this.mass + otherMover.velocity.z * otherMover.mass) / newMass ); this.location = newLocation; this.velocity = newVelocity; this.mass = newMass; otherMover.kill(); } attract(otherMover, options) { const force = Gravity.calcG(this, otherMover, options.G); this.applyForce(force); } kill() { this.alive = false; this.selectionLight.intensity = 0; this.parentScene.remove(this.mesh); } display(totalMass) { if(this.alive) { const scale = (this.mass * MASS_FACTOR / (4 * Math.PI)) ** (1/3); this.mesh.scale.x = scale; this.mesh.scale.y = scale; this.mesh.scale.z = scale; this.selectionLight.intensity = 2 * this.mass / totalMass; let emissiveColor = this.color.getHex().toString(16); emissiveColor = darken(emissiveColor, -1 + this.mass / totalMass); this.basicMaterial.emissive.setHex(parseInt(emissiveColor, 16)); } else { this.selectionLight.intensity = 0; } } showTrace(TRAILS_LENGTH) { this.parentScene.remove(this.line); let geometry = new Geometry(); geometry.vertices = this.vertices.slice(); geometry.verticesNeedUpdate = true; if(!this.alive) this.vertices.shift(); while(geometry.vertices.length > parseInt(TRAILS_LENGTH)) { geometry.vertices.shift(); } this.line = new Line(geometry, this.line.material); this.parentScene.add(this.line); } } export function darken(color, percent) { let f = parseInt(color.slice(1), 16), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent - 1 : percent, R = f >> 16, G = f >> 8&0x00ff, B = f & 0x0000ff; return (0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1); } export const initOptions = { framerate: 60, G: 250, START_SPEED: 30, MOVER_COUNT: 40, TRAILS_DISPLAY: true, TRAILS_LENGTH: 100, MIN_MASS: 400, MAX_MASS: 3000, DENSITY: 0.15 }; export const G = 6.6742e-11; export const SPHERE_SIDES = 20; export const MASS_FACTOR = 0.01; import './index.scss'; import $ from 'jquery'; import SceneService from './services/Scene.service'; $(document).ready(function() { __init__(); }); function __init__() { const rootEl = document.getElementById('root'); SceneService.init(rootEl); SceneService.create(); } const THREE = require('three'); window.THREE = THREE; require('three.OrbitControls'); export const OrbitControls = window.THREE.OrbitControls; var function makeNewObjects(){ var this.object = new Mover(); object.location = 10; object.velocity = 10; object.acceleration = new Vector3(0.0,-10, 0.0); object.mass = 10; object.alive = true; } var function main(){ makeNewObjects(); object.display(object.mass); } 코드 전문입니다. 일단 맨 마지막에 main 함수를 만들어야 하는데 시작부터 갑갑하네요;새로운 물체를 생성한 후에 이를 디스플레이하려는데, 정작 화면에 어케 뛰우는지를 모릅니다. 혹시 도와주실 분 계시나요?

youngyoung · Answer

요즘 고등학생은 이런것도 하는군요.. 스윙은 너무 예전에 만져서.. 기억이 잘 안나서 다음분이.. 파이팅입니다.

HJOW · Answer

코드 일부는 다른사람이 짠건가요?왜 자바기반언어(순수 자바코드는 아님)와 자바스크립트가 섞여있죠?

오징어먹물식빵 · Answer

그냥 여기저기서 복붙을 하신 듯 하네요...

송서리 · Answer

이렇게 한파일에 모아놓았다고 실행이 되는 코드가 아닙니다.해당 repository를 clone해서 컴터에 저장하고 npm install한 다음 index.html을 실행시키면 될텐데 그정도까지 할 수 있겠는지 모르겠네요.

gredo · Answer

모든 파일을 일단 한 파일 안에 집어넣고 << 부터가 완전 잘못된 생각이네요;;

js로 렌더링 어케 하나요?

5개의 답변

Q&A 목록