Paris8/GeometryDash3D
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add same scene but with threeJS

Browse source
This commit is contained in:
Mylloon 2022-11-08 09:43:37 +01:00
parent 5b136ab38d
commit 76028e9de3
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
2 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -9,16 +9,10 @@
body { body {
margin: 0px; margin: 0px;
} }
canvas {
border: 1px solid black;
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="canvas" width="1280" height="720"></canvas>
<script src="https://unpkg.com/three@0.146.0/build/three.min.js"></script> <script src="https://unpkg.com/three@0.146.0/build/three.min.js"></script>
<script type="module" src="./js/main.js"></script> <script type="module" src="./js/main.js"></script>
</body> </body>

35
js/main.js
View file

@ -1,16 +1,29 @@
window.addEventListener("load", () => main()); window.addEventListener("load", () => main());
const main = () => { const main = () => {
const cnv = document.getElementById("canvas"); const scene = new THREE.Scene();
const ctx = cnv.getContext("2d"); const camera = new THREE.PerspectiveCamera(
75,
const size = 100; window.innerWidth / window.innerHeight,
0.1,
ctx.fillStyle = "blue"; 1000
ctx.fillRect(
cnv.width / 2 - size / 2,
cnv.height / 2 - size / 2,
size,
size
); );
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
}; };