HTML+3.js formatting
formatting
by RGMGx
HTML
<div id="container" style="float:left; width:98vw; height:65vw">
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
JavaScript
var camera, scene, renderer, circle, radius ;
var pos, vel;
var motion = true;
init();
animate();
function init() {
var ww = $("#container").innerWidth();
var hh = $("#container").innerHeight();
renderer = new THREE.WebGLRenderer();
renderer.setSize(ww, hh);
renderer.setClearColor(0x888888);
$("#container").append(renderer.domElement);
////////////////////////////////////////////////
scene = new THREE.Scene();
camera = new THREE.OrthographicCamera (-50,50,50,-50,1, 1000);
camera.position.z = 500;
radius = 5;
circle = new THREE.Mesh (new THREE.CircleGeometry (radius,20), new THREE.MeshBasicMaterial());
scene.add (circle);
let geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-40, -40, 0),
new THREE.Vector3(40, -40, 0),
new THREE.Vector3(40, 40, 0),
new THREE.Vector3(-40, 40, 0),
new THREE.Vector3(-40, -40, 0),
new THREE.Vector3(-40, -20, 0),
new THREE.Vector3(-20, -20, 0),
new THREE.Vector3(-20, 20, 0),
new THREE.Vector3(0, 20, 0),
new THREE.Vector3(-20, 20, 0),
new THREE.Vector3(-20, 0, 0),
new THREE.Vector3(-30,0,0));
let geometry2 = new THREE.Geometry();
geometry2.vertices.push(
new THREE.Vector3(40,0,0),
new THREE.Vector3(0,0,0),
new THREE.Vector3(20,0,0),
new THREE.Vector3(20,-20,0)
);
let geometry3 = new THREE.Geometry();
geometry3.vertices.push(
new THREE.Vector3(10,-40,0),
new THREE.Vector3(10,-20,0),
);
let border = new THREE.Line(geometry, new THREE.LineBasicMaterial({
color: 0x0000ff
}));
scene.add(border);
let border2 = new THREE.Line(geometry2, new THREE.LineBasicMaterial({
color: 0x0000ff
}));
scene.add(border2);
let border3 = new THREE.Line(geometry3, new THREE.LineBasicMaterial({
color: 0x0000ff
}));
scene.add(border3);
pos = new THREE.Vector3();
vel = new THREE.Vector3(5,4,0);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
...