three.js学习日记（2）

接上文

three.js学习日记（1）-优快云博客文章浏览阅读178次。three.js的学历路https://blog.youkuaiyun.com/weixin_58735350/article/details/143754414

今天主要是学了一个新工具，dat.gui

这个工具的使用可以参考这篇文档dat.GUI如何使用和常用方法-优快云博客

import * as dat from "dat.gui";
// 创建配置对象
var controlData = {
  rotationSpeed: 0.011,//这个控制转动速度
  color: "#66ccff",
  wireframe: false,//控制是否以线框形式展示
};
// // 创建dat.GUI实例
const gui = new dat.GUI();
const f = gui.addFolder("配置");
// 写法1,最小值，最大值，步长
f.add(controlData, "rotationSpeed", 0.01, 0.1, 0.01);
// 写法2
// f.add(controlData, "rotationSpeed").min(0.01).max(0.1).step(0.01);
// 添加颜色选择器
f.addColor(controlData, "color");

// 选择框
f.add(controlData, "wireframe");
f.domElement.id = "gui";

f.open();
//需要在onMounted里面加上这个
document.getElementById("container").appendChild(f.domElement);
//然后在animate这个函数里面把涉及到的可以改变的值替换成controlData中的值
  function animate() {
    requestAnimationFrame(animate);

    // 旋转动画
    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
    cube.rotation.x += controlData.rotationSpeed;
    cube.rotation.y += controlData.rotationSpeed;
    cube.material.color = new THREE.Color(controlData.color);
    material.wireframe = controlData.wireframe;
    // 轨道控制器更新
    controls.update();
    // 更新相机视角
    camera.lookAt(cube.position);

    renderer.render(scene, camera);
  }

还有设置球体，立方体，以及模拟镜面反射的效果

// 创建纹理,图片地址参照背景图片地址
// const textures = new THREE.TextureLoader().load("02.jpeg");

// 创建立体纹理，六张各个角度的图片拼起来就可以模拟立体的环境
// const cubeTexture = new THREE.CubeTextureLoader()
//   .setPath("/")
//   .load(["02.jpeg", "02.jpeg", "02.jpeg", "02.jpeg", "02.jpeg", "02.jpeg"]);
// 立方体
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// // 立方体材质
// const material = new THREE.MeshBasicMaterial({
//   color: 0x2e8b57,
//   map: textures, //纹理
// });
// 创建一个球体
// const geometry = new THREE.SphereGeometry(1);
// const material = new THREE.MeshBasicMaterial({
//   envMap: cubeTexture,
// });
// 创建平面几何体
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  side: THREE.DoubleSide,
});