Skip to content

Instantly share code, notes, and snippets.

@tanish-kr

tanish-kr/index.html

Created October 21, 2021 02:58
Show Gist options
  • Save tanish-kr/cb326ee918c5ced7e70c8d39febf75c5 to your computer and use it in GitHub Desktop.
Save tanish-kr/cb326ee918c5ced7e70c8d39febf75c5 to your computer and use it in GitHub Desktop.
Download ZIP
threejs-example
Raw
index.html
<canvas id="myCanvas"></canvas>
Raw
script.typescript
window.addEventListener('load', init);
function init() {
// サイズを指定
const width = 960;
const height = 540;
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// シーンを作成(3D空間のことで3Dオブジェクト等の置き場となる)
const scene = new THREE.Scene();
// カメラを作成(どの視点から空間を撮影するか)
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
// 箱を作成
const geometry = new THREE.BoxGeometry(400, 400, 400);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry, material);
scene.add(box);
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
box.rotation.y += 0.01;
renderer.render(scene, camera); // レンダリング
requestAnimationFrame(tick);
}
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment