import * as THREE from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'const width = window.innerWidth;
const height = window.innerHeight;//創建場景
const scene = new THREE.Scene();
scene.background = new THREE.Color('#65762c'); //創建幾何體
const geometry = new THREE.SphereGeometry(50,50,50)
const material = new THREE.MeshLambertMaterial({color:0x00ffff,
})
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh)//創建平行光
const dirLight2 = new THREE.DirectionalLight(0xFFFFFF, 1);
dirLight2.position.set(100,100,100);
scene.add(dirLight2);//添加環境光
const ambient = new THREE.AmbientLight(0xffffff, 1)
scene.add(ambient)//光源輔助觀察
// const pointLightHelper = new THREE.DirectionalLightHelper(dirLight2, 2)
// scene.add(pointLightHelper)//AxesHelper 輔助觀察坐標系
// const axesHelper = new THREE.AxesHelper(100);
// scene.add(axesHelper)//相機
const camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
//相機在three.js三維坐標系中的位置,根據需要設置相機位置具體值
camera.position.set(100,200,250);
//相機觀察目標指向three.js坐標系原點,相機的位置
camera.lookAt(0,0,0)//創建渲染器對象
const renderer = new THREE.WebGLRenderer();
//設置three.js渲染區域的尺寸
renderer.setSize(width,height);//three.js執行渲染命令會輸出一個canvas畫布
document.body.appendChild(renderer.domElement);//循環渲染
function render(){renderer.render(scene,camera);requestAnimationFrame(render);
}render();//設置相機軌道控制器
const controls = new OrbitControls(camera, renderer.domElement);//如果OrbitControls改變了相機參數，重新調用渲染器渲染三維場景,監聽鍵盤、鼠標事件
controls.addEventListener('change',function(){renderer.render(scene,camera);  //執行渲染操作// console.log('camera.position',camera.position)
})