function initThree(elid) {
let scene,camera ,renderer,viewer,el
viewer={}
el = document.getElementById(elid)
const width = el.offsetWidth, height = el.offsetHeight,asp = width / height
renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setSize(width, height);
el.append(renderer.domElement);
renderer.setClearColor('#000')
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(45, asp, 1, 10000)
camera.position.set(10,10,10)
camera.lookAt(0,0,0)
scene.add(camera)
viewer.scene=scene
viewer.camera=camera
viewer.renderer=renderer
const controls = new THREE.OrbitControls( camera, renderer.domElement );
// 如果使用animate方法时,将此函数删除
controls.addEventListener( 'change', ()=>{
renderer.render( scene, camera );
});
viewer.controls=controls
renderer.render( scene, camera );
return viewer
}
let app=new initThree('box')
let scene=app.scene
let renderer=app.renderer
let camera=app.camera
let controls=app.controls
camera.position.set(50, 50, 50)
camera.lookAt(new THREE.Vector3(0, 0, 0))
//add light
const directionalLight = new THREE.DirectionalLight( '#fff' )
directionalLight.position.set( 30, 30, 30 ).normalize()
scene.add( directionalLight )
const ambientLight = new THREE.AmbientLight('#fff',0.3) // obj 唯一 id
scene.add(ambientLight)
const boxGeo = new THREE.BoxBufferGeometry(20,20,20)
function randomColor() {
return `rgb(${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)})`
}
let currentHover
for(let i = 0; i<500;i++){
const mesh = new THREE.Mesh( boxGeo, new THREE.MeshStandardMaterial({color:randomColor()}))
mesh.position.set(Math.random()*800-400,Math.random()*800-400,Math.random()*800-400)
scene.add(mesh)
}
let el = document.getElementById('box')
el.addEventListener('mousemove',function (event) {
event.preventDefault()
const mouse = new THREE.Vector2()
const raycaster = new THREE.Raycaster()
let objectList = []
try {
mouse.x = (((event.clientX || (event.touches[0]? event.touches[0].pageX : event.changedTouches[0].pageX)) - el.getBoundingClientRect().left) / el.offsetWidth) * 2 - 1
mouse.y = -(((event.clientY || (event.touches[0]? event.touches[0].pageY : event.changedTouches[0].pageY)) - el.getBoundingClientRect().top) / el.offsetHeight) * 2 + 1
raycaster.setFromCamera(mouse, camera)
objectList = raycaster.intersectObjects(scene.children, true)
}
catch (e) {
// 鼠标越界
}
let objList=objectList
if (objList.length > 0) {
if (currentHover !== objList[0].object) { //Mesh // Line //Points .name === "you need"
if ( currentHover ) currentHover.material.emissive.setHex( currentHover.currentHex )
currentHover = objList[0].object;
currentHover.currentHex = currentHover.material.emissive.getHex();
currentHover.material.emissive.setHex( 0xff0000 );
}
} else {
if (currentHover) currentHover.material.emissive.setHex( currentHover.currentHex )
currentHover = null
}
},true)
function animate() {
controls.update()
renderer.render(scene, camera)
requestAnimationFrame(animate)
}
animate()