用three.js制作3D魔方

一个W牛

已于 2024-03-15 15:07:00 修改

阅读量356

点赞数 8

文章标签： javascript 3d 开发语言前端

于 2024-03-15 14:53:05 首次发布

本文链接：https://blog.csdn.net/qq_45587547/article/details/136739287

版权

参考资料：WebGL

html部分

three.min.js可以通过cdn引入，或者通过three.js引入，复制出来放进three.min.js文件中（我用的第二种方式，第一种也能用）
***详细注释都在代码中写了 ***

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>3D魔方</title>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.156.1/three.min.js"></script> -->
  <script src="three.min.js" defer></script>
  <script src="script.js" defer></script>
  <link href="style.css" rel="stylesheet" />
</head>
<body></body>
</html>

js部分

//创建一个构造器
const scene = new THREE.Scene(); //Scene() 构造器创建一个新的场景，表示即将显示的整个 3D 世界。

//创建一个摄影机
const camera = new THREE.PerspectiveCamera(
  75, //参数一: 观察区域，镜头视角大小，用角度表示
  window.innerWidth / window.innerHeight, //参数二:屏幕宽高比
  0.1, //参数三:近裁切面：停止渲染前对象离摄影机的最近距离
  1000 //参数四:远裁切面：停止渲染前离摄像机最远的对象的距离
);
camera.position.z = 5; //将摄像机的位置设定为距 Z 轴 5 个距离单位的位置，与 CSS 类似，在屏幕之外你（观察者）的位置。

//创建一个渲染器
const renderer = new THREE.WebGLRenderer(); //构造器创建一个渲染器供稍后使用
renderer.setSize(window.innerWidth, window.innerHeight); //设定渲染器在当前摄影机视角下的尺寸
document.body.appendChild(renderer.domElement); //将渲染好的 <canvas> 对象加入 HTML 的 <body> 中

//在画布中创建魔方
let cube; //创建一个全局变量 cube，这样就可以在代码任意位置访问我们的魔方

const loader = new THREE.TextureLoader();
//纹理图片
loader.load("001.jpg", (texture) => {//这里的图片你可以换成你喜欢的纹理
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set(4, 4); //指明我们要在魔方的每个面渲染4*4 的图片

  const geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4); //长宽高
  const material = new THREE.MeshLambertMaterial({
    map: texture,
    shading: THREE.FlatShading,
  });

  //Mesh 一般就需要两个参数：一个几何（形状）和一个素材（形状表面外观）。
  cube = new THREE.Mesh(geometry, material); //将两者作为 Mesh 的参数来创建我们的魔方。
  scene.add(cube); //将魔方添加进场景中
  draw(); //调用draw()函数开始动画。
});

//为场景打光，以照亮场景中的物体
const light = new THREE.AmbientLight("rgb(255,255,255)"); //柔光，像户外的阳光
scene.add(light); //将柔光添加进场景中

const spotLight = new THREE.SpotLight("rgb(255,255,255)"); //直射的硬光
spotLight.position.set(100, 1000, 1000); //硬光放置的位置，X轴,Y轴,Z轴
spotLight.castShadow = true;
scene.add(spotLight); //将硬光添加进场景中

function draw() {
  cube.rotation.x += 0.005; //沿X轴将魔方轻微转动
  cube.rotation.y += 0.005; //沿Y轴将魔方轻微转动
  renderer.render(scene, camera); //按摄像机视角渲染场景

  requestAnimationFrame(draw); //最后调用 requestAnimationFrame() 来准备下一帧
}

// 当窗口大小改变时，调整相机和渲染器的大小
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
// 监听窗口大小改变事件
window.addEventListener("resize", onWindowResize, false);

css部分

html,
body {
  margin: 0;
}
body {
  overflow: hidden;
}

引用的img图片

在这里插入图片描述

结果展示