Threejs之MeshBasicMaterial

Threejs之MeshBasicMaterial（基本几何体）

import * as THREE from "three";
// 导入轨道控制器
import {
    
     OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui 操作变量界面库
import * as dat from "dat.gui"; // https://www.npmjs.com/package/dat.gui
import webglGlobalOptions from "./config/webgl";
// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机的位置 0, 0, 10: x y z
camera.position.set(0, 0, 10);

// 将相机添加到场景
scene.add(camera);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 设置几何体材质
const materialColor = {
    
    
    color: 0x00ff00,
}
const material = new THREE.MeshBasicMaterial({
    
    
    color: materialColor.color
});
// 根据几何体和材质  创建物体
const cube = new THREE.Mesh(geometry, material);
// 修改物体的位置
// cube.position.set(5, 0, 0);
// cube.position.x = 3;
// 设置物体的缩放
// cube.scale.set(3, 2, 1);
// cube.scale.x = 5

// 旋转
// 按照XYZ的顺序 旋转x轴45°  Math.PI=180°
// cube.rotation.set(Math.PI / 4, 0, 0)
// 将物体添加到场景中
const gui = new dat.GUI();
gui
  .add(cube.position, "x")
  .min(0)
  .max(5)
  .step(0.01)
  .name("移动物体的x轴")
  .onChange((value) => {
    
    
    console.log("x轴大小变化：", value);
  }).onFinishChange(value => {
    
    
    console.log("完成操作的x轴大小：", value);
  });

// 修改物体的颜色ui 
gui.addColor(materialColor, "color").onChange(color=>{
    
    
    // 改变物体填充色
   cube.material.color.set(color)
}).name("物体填充色")
// 设置选项框
gui.add(cube, "visible").name("是否显示")
// 设置按钮 点击触发某个事件
const cubeAnimateBtn = {
    
    
    fn: () => {
    
    
        gsap.to(cube.position, {
    
    x: 5, duration: 5, yoyo: true});
    }
}
gui.add(cubeAnimateBtn,"fn").name("点击物体运动")

// 设置目录
const folder = gui.addFolder("物体配置项")
folder.add(cube.material, "wireframe").name("是否显示物体线框")
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);   // 只是渲染了一次

// 上面的是平面物体  需要看立体的   则需要创建轨道控制器

//物体添加轨道控制器(让物体可以随着鼠标360旋转)
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器具有惯性
controls.enableDamping = true; // 设置完后，必须在动画循环里调用update()
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(
  webglGlobalOptions.WEBGL_COORDINATE_AXIS_LENGTH
);
scene.add(axesHelper);

// 创建时钟
const clock = new THREE.Clock();

// 设置动画

// const cubePositionAnimate = gsap.to(cube.position,
//     {
    
    
//         x: webglGlobalOptions.WEBGL_COORDINATE_AXIS_LENGTH,
//         duration: 5,
//         ease: "power1.inOut",
//         // 设置动画重复的次数   无限次循环就是-1
//         repeat: -1,
//         // 往返运动
//         yoyo: true,
//         // 延迟几秒开始运动
//         delay: 2
//     }
// )
// // cubePositionAnimate.pause()  暂停动画
// // cubePositionAnimate.resume();  恢复动画
// // cubePositionAnimate.isActive();  // 动画激活状态
// gsap.to(cube.rotation, {x: 2 * Math.PI, duration: 2, ease: "power1.inOut"})
// 这里需要浏览器每渲染一帧  就加载一次渲染器    浏览器默认每秒渲染60帧
function render() {
    
    
  controls.update();
  renderer.render(scene, camera);
  // requestAnimationFrame 浏览器自带函数： 浏览器每加载一帧执行一次render函数
  requestAnimationFrame(render);
}
// 首次渲染
render();

// 监听页面变化，更新渲染画面
window.addEventListener("resize", () => {
    
    
  // 更新摄像头宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

// 双击控制是否全屏
window.addEventListener("dblclick", () => {
    
    
  // 是否存在全屏的元素，不存在，则返回null
  const isExistFullScreenElement = document.fullscreenElement;
  if (!isExistFullScreenElement) {
    
    
    // renderer.domElement: canvas元素
    // 让画布对象全屏
    renderer.domElement.requestFullscreen();
  }
  // 推出全屏 是使用document对象
  document.exitFullscreen();
});