threejs-workflow

// 舞台佈置
const scene = new THREE.Scene();

// 演員完妝上台
const geometry = new THREESphereGeometry ( 5, 32, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

// 設定攝影機
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
camera.position.z = 30;

// 舞台打光
const light = new THREE.PointLight( 0xffffff, 1, 0 );
light.position.set( 100, 200, 100 );
scene.add( light );

// Action 開拍
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1 );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );