场景初始化

合集 - ThreeJs(3)

1.场景初始化2024-09-23

2.鼠标射线拾取2024-09-233.后期-抗锯齿化（Fxaa,Smaa,Mmaa）2024-09-19

收起

获取初始化的元素

//常规
const targetdom	=	document.getElementById('targetdom')  
//vue3
const targetdom	 =	ref('targetdom') 
//react 
const targetdom	=	ref('targetdom') 

初始化相机、场景、光源、render

const camera = new Three.PerspectiveCamera(
	50,
	dom.clientWidth / dom.clientHeight,
	0.01,
	1000)

const scene = new Three.Scene() 

const camera = new Three.PerspectiveCamera(
	50,
	dom.clientWidth / dom.clientHeight,
	0.01,
	1000) 

//创建环境光 

const white = new Three.Color('white')
const light = new Three.AmbientLight(white, 10) 
//创建半球光
const hemisphereLight = new Three.HemisphereLight(
	'white',
	'darkslategrey', 
	8,
); 

//创建直射光
const directionalLight = new Three.DirectionalLight('white', 10)



const renderer = new Three.WebGLRenderer(options)
renderer.outputEncoding = Three.sRGBEncoding;
renderer.sortObjects = true;//设置sortobject 结局mesh不透明

scene.position.set(-6, 3, 1)
camera.position.set(11.304493812891662, 7.9402369729813636, 11.571010202778185)
camera.rotation.set(
	Three.MathUtils.degToRad(-0.406464440721367),
	Three.MathUtils.degToRad(0.38309200850090414),
	Three.MathUtils.degToRad(0.2044538642079754)
)
camera.lookAt(0, 0, 0); 

renderer.setSize(dom.clientWidth, dom.clientHeight, true)

初始化轨道控制器

const orbitcontrols = new OrbitControls(this.camera, css3drender.domElement)

初始化css2drender,css3drender

const css2drender = new CSS2DRenderer()
const css2drenderHeight = dom.clientHeight
const css2drenderWidth = dom.clientWidth
css2drender.setSize(css2drenderWidth, css2drenderHeight)
css2drender.domElement.style.position = 'absolute'
css2drender.domElement.style.top = '0px'
css2drender.domElement.style.zIndex = 1
css2drender.domElement.style.height = css2drenderHeight
css2drender.domElement.style.width = css2drenderWidth
document.getElementById('container').appendChild(css2drender.domElement)
this.css2drender = css2drender

const css3drender = new CSS3DRenderer()
const css3drenderHeight = dom.clientHeight
const css3drenderWidth = dom.clientWidth
css3drender.setSize(css3drenderWidth, css3drenderHeight)
css3drender.domElement.style.position = 'absolute'
css3drender.domElement.style.top = '0px'
css3drender.domElement.style.zIndex = 2
css3drender.domElement.style.height = css3drenderHeight
css3drender.domElement.style.width = css3drenderWidth
document.getElementById('container').appendChild(css3drender.domElement)
this.css3drender = css3drender

渲染场景

this.scene.add(light)
this.scen.add(camera) 
this.renderer.render(this.scene, this.camera)

将当前元素加入到目标元素中去

dom.appendChild(renderer.domElement)