球体の回転

2025/04/20 ThreeJS

HTML

<canvas id='canvas'></camvas>

CDN

<script type='importmap'>
{
    "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.175.0/build/three.module.js"
    }
}
</script>
<script type='module'>
import * as THREE from three;
width = window.innerWidth;
height = window.innerHeight;

Scene

const scene = new THREE.Scene();

PerspectiveCamera

const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(0,0,+1000);

WebGLRenderer

const renderer = new THREE.WebGLRenderer({
    canvas:document.querySelector('#canvas');
});
renderer.setSize(width, height);

geometry

const geometry = new THREE.SphereGeometry(300, 30, 30);

sphere … SphereGeometry()

box … BoxGeometry(1,1,1)

plane … PlaneGeometry(5,20,32)

cone … ConeGeometry(5,20,32)

円柱 … CylinerGeometry(5,5,20,32)

ドーナツ … TorusGeometry(10,3,16,100)

material

const material = new THREE.MeshStandardMaterial({ color: 0xFF0000 });

Mesh

const mesh = new THREE.Mesh(geometry, material);

scene.add

scene.add(mesh);

DirectionalLight平行光源 not= 環境光AmbientLight

const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
directionalLight.position.set(1,1,1);
scene.add(directionalLight);

Animation

tick();
function tick(){
    requestAnimationFrame(tick);
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

BACK