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)
// console.log('controls.target',controls.target)
})
创建一个有阴影的threejs三维几何体
于 2023-12-11 23:23:59 首次发布