【Three】three.js--添加多个立方体并加入点击按钮

1.首先我们按照之前的方式先创建出来一个元素

这个在之前的笔记里面有

2.现在我们开始对父元素的属性进行设置

这父元素的形状和材质上可以和其他元素共用
我们将父元素添加到画面中
在将子元素加入父元素中
这样我们给父元素设置大小位置时子元素也同时会有相同的改变

3.加入点击全屏和退出全屏的按钮

这里大部分是原生js方式
在点击事件中document.body则是对页面body元素的全屏
如果要对浏览器全屏则是renderer.domElement.requestFullscreen()

下面是全部script标签中的完整代码

//1.导入 
import * as THREE from 'three'
//引入轨道控制器
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'


//2.创建场景
const scence = new THREE.Scene() 
//6.创建立方体 几何➕材质
const cubeGeometry = new THREE.BoxGeometry(2,2,2)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

//创建父元素
const parentMaterial = new THREE.MeshBasicMaterial({color: 0xffffff })
const parentCube = new THREE.Mesh(cubeGeometry, parentMaterial)
scence.add(parentCube)
parentCube.position.set(2,2,4)
parentCube.scale.set(2,1,4)
parentCube.add(cube)
//3.创建相机
const camera = new THREE.PerspectiveCamera(
    45, 
    window.innerWidth/window.innerHeight,
    1,
    1000
)
camera.position.set(20,20,20)
camera.lookAt(0,0,0)

//7. 创建坐标系辅助对象
const axesHelper = new THREE.AxesHelper(10) 
scence.add(axesHelper)

cube.position.set(3,0,4)
cube.rotation.x = Math.PI / 4
parentCube.rotation.x = Math.PI / 4

//10，创建网格辅助对象
const gridHelper = new THREE.GridHelper(20,20,0xffffff, 0xffffff)
gridHelper.material.transparent = true //透明度
gridHelper.material.opacity = 0.5
scence.add(gridHelper)




//4.创建渲染器
const renderer = new THREE.WebGL1Renderer({ antialias: true})   
renderer.setSize( window.innerWidth, window.innerHeight)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setAnimationLoop(animation)
document.body.appendChild(renderer.domElement)
//5.渲染  
function animation() {
    renderer.render(scence, camera) 
}


//8.创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
//设置带阻力惯性 
controls.enableDamping = true;
//设置阻力系数
controls.dampingFactor = 0.05
//设置旋转速度
console.autoRotate = true

//9.监听window的resize事件
window.addEventListener('resize', ()=> {
      //重新设置相机宽高比
      camera.aspect = window.innerWidth / window.innerHeight
      //更新相机投影取证
      camera.updateProjectionMatrix()

      //设置渲染器出图  照片大小
      renderer.setSize(window.innerWidth, window.innerHeight)
})

var btn = document.createElement("button");
btn.innerHTML = "点击全屏"
btn.style.position = "absolute"
btn.style.top = "10px"
btn.style.left = "10px"
btn.style.zIndex = "999"
btn.onclick = function(){
  document.body.requestFullscreen()
}
document.body.appendChild(btn)

var exitbtn = document.createElement("button");
exitbtn.innerHTML = "退出全屏"
exitbtn.style.position = "absolute"
exitbtn.style.top = "10px"
exitbtn.style.left = "150px"
exitbtn.style.zIndex = "999"
exitbtn.onclick = function() {
  document.exitFullscreen()
};
document.body.appendChild(exitbtn)